Forum Moderators: not2easy
I must have missed something easy - it is repeating part of the way therefore there is a repeat happening in all browsers, but for some reason it doesn't repeat all the way to the right-hand side. There's even some content in the div going past the right of where the repeating stops.
#header {
width: 100%;
background-image: url(images/top.gif);
background-repeat: repeat-x;
}
You will see that in IE the background image goes all the way to the right, in Mozilla/Netscape/Oper it stops part way. So IE is fooling me!
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test page</title>
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
img {
border: none;
}
#headerWrap {
position: absolute;
top: 0px;
left: 0px;
height: 117px;
padding-left: 180px;
}
#header {
width: 100%;
height: 100%;
background-image: url(images/top.gif);
background-repeat: repeat-x;
}
#heading {
position: relative;
left: 70px;
}
</style>
</head>
<body>
<div id="headerWrap">
<div id="header">
<div id="heading"><img src="images/heading.gif" alt="My Logo"></div>
<p>Other header content here.</p>
</div>
</div>
</body>
</html>
Why are you using position: relative on #heading? Why not { padding: 0 0 0 70px; }? It's my experience that less use of relative and fixed positioning is easier to maintain.
I only tested in Opera.
#headerWrap needs width: 100%
Why are you using position: relative on #heading? Why not { padding: 0 0 0 70px; }? It's my experience that less use of relative and fixed positioning is easier to maintain.
Thank you for trying but those ideas didn't work. I'd still appreciate it if anyone wants to have another look.
I don't think you need absolute positioning here, at least from what I see on your test page. The div would automatically begin at 0,0 in the natural flow. And when position:absolute is included, the div no longer extends for the full width of the screen but stops at the width where its content is contained.
---------------------------------
I understand why "when position:absolute is included, the div no longer extends for the full width of the screen but stops at the width where its content is contained".
But I don't understand why specifying 100% width while it is absolutely positioned causes a horizontal scrollbar. As far as I can work out, a div with the following CSS should be 100% wide and 117px high, be at the top of the window, and should have an internal gap of 180px to the left of the content.
#headerWrap {
position: absolute;
width: 100%;
top: 0px;
left: 0px;
height: 117px;
padding-left: 180px;
}
It gets the gap, but also extends past the right-hand edge of the window by 180px. I always thought that adding padding didn't affect the width - have I misunderstood something basic?
I am not sure which browsers are correct, but in the practical world where we need results, it matters not. I have always assumed that padding "should" be added to the width of the element.
Perhaps one of our serious CSS scholars can clear this up.
Anyone that hasn't read enough of the spec to quickly find these kind of answers shouldn't be using CSS for any more than dabbling.
What I know is that browsers are not consistent in whether padding adds to the declared width of the div.
Width is the area for the content, so 100px image (with no padding etc) should fit in a div with width:100px regardless of what the padding, border or margin on the div is set to.
All modern browsers (including IE6) get this part of the box model correct provided you use a full doctype declaration in the HTML.
Which means your HTML should always start with something like this..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Older browsers (such as IE5.5) will require some corrective surgery - so I usually browser sniff and send them an additional CSS file.
