Webnerd
06-08-2006, 11:44 AM
Does anyone have a fix for the horizontal scrollbar being displayed when setting a DIV to 100% under XHTML Strict?
Click to See Complete Forum and Search --> : XHTML "width:100%" Scrollbar Problem
Stephen Philbin
06-08-2006, 12:03 PM
Under what circumstances? I've just tried XHTML 1.0 Strict and 1.1 served as both text/html and application/xhtml+xml, and not had a scroll bar appear as a consequence of setting a div to 100% width as the only child element to a <body> element. Perhaps you have padding on the parent element?
Webnerd
06-08-2006, 12:11 PM
Sorry about that, throw a border or padding on the DIV
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> new document </title>
<style type="text/css" media="all">
/*<![CDATA[*/
body{
margin:0px;
padding:0px;
}
#canvas{
position:absolute;
width:100%;
height:10px;
background-color:red;
padding:5px;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
//]]>
</script>
</head>
<body lang="en">
<div id="canvas"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> new document </title>
<style type="text/css" media="all">
/*<![CDATA[*/
body{
margin:0px;
padding:0px;
}
#canvas{
position:absolute;
width:100%;
height:10px;
background-color:red;
padding:5px;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
//]]>
</script>
</head>
<body lang="en">
<div id="canvas"></div>
</body>
</html>
slaughters
06-08-2006, 03:26 PM
I don't have a specific answere to your problem, as it looks like it is a known layout bug.
BUT - you may want to look at this page on "A List Apart": http://www.alistapart.com/d/holygrail/example_4.html to see how they solved the "Holy Grail" (http://www.alistapart.com/articles/holygrail) of layout issues, which might relate to what you are attempting to do on the page you're building.
BUT - you may want to look at this page on "A List Apart": http://www.alistapart.com/d/holygrail/example_4.html to see how they solved the "Holy Grail" (http://www.alistapart.com/articles/holygrail) of layout issues, which might relate to what you are attempting to do on the page you're building.
Stephen Philbin
06-09-2006, 06:09 AM
I'm a bit cack with CSS (Dave can vouch for that). I tried to figure out what was going on, but failed. In fact, I think I just found more problems.
I thought specifying 100% width on the body would help sort things out, but it did absolutely nothing. I dunno if that's how it's supposed to be, but in Firefox 1.5.0.4 you can not specify any kind of width on the body element. To my surprise though, I found you could specify width on the html element. So I tried sticking width:100%; on the html element rather than the body, but that still did nothing to help.
I can only guess that they figured if you wanted a div at 100%; width of the available body, you wouldn't specify a width and just let the div go to 100% naturally.
I thought specifying 100% width on the body would help sort things out, but it did absolutely nothing. I dunno if that's how it's supposed to be, but in Firefox 1.5.0.4 you can not specify any kind of width on the body element. To my surprise though, I found you could specify width on the html element. So I tried sticking width:100%; on the html element rather than the body, but that still did nothing to help.
I can only guess that they figured if you wanted a div at 100%; width of the available body, you wouldn't specify a width and just let the div go to 100% naturally.
toicontien
06-09-2006, 11:04 AM
You're running into a misunderstanding of the CSS Box model. The total width of an element is the width you specify, plus the padding, plus the borders, plus the margins. So your canvas DIV is 100% the width of the BODY tag, plus 10 pixels because of the 5 pixel padding on the left and right of the DIV.
If you want to give elements percentage widths and use fixed width borders and padding, nest a DIV inside a DIV:
<div id="outer">
<div id="inner"></div>
</div>
Then in your CSS:
#outer {
width: 50%;
}
#inner {
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 0 15px;
}
And you can give a width to the body element in Firefox, unless something has changed. You've been able to give widths to the BODY element in Gecko browsers since Moz 1.0 I think.
Lastly, make a quick trip to the W3C site to read up on the CSS Box Model: http://www.w3.org/TR/CSS21/box.html#box-dimensions
If you want to give elements percentage widths and use fixed width borders and padding, nest a DIV inside a DIV:
<div id="outer">
<div id="inner"></div>
</div>
Then in your CSS:
#outer {
width: 50%;
}
#inner {
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 0 15px;
}
And you can give a width to the body element in Firefox, unless something has changed. You've been able to give widths to the BODY element in Gecko browsers since Moz 1.0 I think.
Lastly, make a quick trip to the W3C site to read up on the CSS Box Model: http://www.w3.org/TR/CSS21/box.html#box-dimensions
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.
Copyright Internet.com Inc., All Rights Reserved.