Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old December 13th, 2004, 09:13 PM
Friend of Wrox
 
Join Date: Nov 2003
Location: , , .
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default Absolutely positioned element across the screen

Hello,

I am trying to get an absolutely positioned DIV element to stretch from the left to the right of the screen. I am targeting this for IE only, so IE-specific methods are fine.

I am setting the property with JavaScript, but the problem is with CSS.

I have tried:

myElement.style.width = document.body.clientWidth;
and
myElement.style.width = "100%";
and
myElement.style.width = "100%";
document.body.style.width = "100%";

Right now, I'm using

myElement.style.width = "99.7%";

but I doubt it works in all conditions.

Is there one perfect way to accomplish this for IE?

-Snib - http://www.snibworks.com
Where will you be in 100 years?
__________________
-Snib - http://www.snibworks.com
Where will you be in 100 years?
Reply With Quote
  #2 (permalink)  
Old December 15th, 2004, 07:15 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 5 Times in 5 Posts
Default

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <style type="text/css">
            body {
                padding: 0;
                margin: 0;
            }
            div {
                position: absolute;
                width: 100%;
                height: 10px;
                background: black;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
This is a simple testcase using percentage width. If you don't make the padding and margin of the <body> element zero, then you wind up with scroll bars since a percentage width is based on the width of the parent block. If you still want to have padding and or margins on the body element, or whatever other containing element. Then the solution is to use:

div {
   position: absolute;
   left: 0;
   right: 0;
   height: 10px;
}

But of course that doesn't work in IE. For IE, then, some hacking is in order.

width: expression();

expression(); can take some javascript from within the style sheet. What you need is to get the width of the <body> element, then subtract the values of the <body> element's margin, padding, and borders from that width.

width: expression();

I haven't experimented much with this feature, so you might want to read up on it on MSDN to see what it allows.

HTH!



Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
Reply With Quote
  #3 (permalink)  
Old December 15th, 2004, 01:21 PM
Friend of Wrox
 
Join Date: Nov 2003
Location: , , .
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default

Thanks Rich, I will look into this and let you know how it goes.

-Snib - http://www.snibworks.com
Where will you be in 100 years?
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
how can clear the screen the screen malli_kv2 BOOK: Beginning Java 2, JDK 5 Edition 4 January 16th, 2009 11:43 PM
Problem adding element to the previous element dani1 XSLT 5 September 10th, 2008 01:38 AM
translate element name to element name lexzeus XSLT 3 September 4th, 2006 09:04 AM
Draw on the screen without clearing the screen pu132 Visual Basic 2005 Basics 0 August 25th, 2006 09:03 PM
adding of element and assigning to one element sushovandatta XSLT 2 November 16th, 2004 06:04 PM



All times are GMT -4. The time now is 10:45 PM.


Powered by vBulletin®
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.