Tue, 2003-07-15 05:40
This is a funny situation that reveals how little I know about the exact details of the CSS specification.
I have the following problem where IE6 renders the page "as I like it". Although it may not be rendering it "to spec". Both Mozilla 1.4 and Opera 7.10 render "not how I like it" but they both render it in the exact same way! So I don't know who's right and who's wrong. Anyway here's the exact situation:
I want to make a div (Header) into a header for a page. I set the margins and padding to 0px for the body to satisfy all modern browsers. I then put a second div (HeaderTitle) inside the first one. The second div contains an h1 element that is the title of my site: "Web Chowder". Now here is where things break down. I want to position the HeaderTitle div down 25 pixels from the top of the Header div. This seems simple. I set margin-top: 25px; I refresh in IE and it looks great! I check it out in Mozilla and Opera and instead of moving the HeaderTitle div down 25 pixels from the top of the Header div, it instead moves the Header div down 25 pixels from the top of the body! The HeaderTitle div is now effectively 25 pixels from the top of the body, but the whole header is in the wrong place. I have no idea if this behavior is normal, but here are some hacks that fix it.
If set border-top of the Header div to anything the Header magically goes up to the top of the viewport and the HeaderTitle div is now 25 pixels from the top of the Header div (although it didn't move relative to the viewport).
If I put any content in the Header div before the HeaderTitle div, it also magically fixes the problem.
Now that is strange! This is why I'm confused! Two major, modern browsers have the exact same "bug" and the exact same hacks fix them both! That is why I can't tell if this really is a bug or if this is how CSS is supposed to work. Maybe the guy who wrote the code for this part of the CSS engine in Opera also wrote it for Mozilla. Who knows? 
Here is the complete and simple source I used to test the problem once I isolated it:
The source turned big and ugly, so I deleted it. Check out the attachment.
Thanks for reading! I am not interested in a workaround or other hacks that fix this problem. I simply want to know if this is indeed a bug in Opera 7.10 and Mozilla 1.4. Thanks again!
P.S. I didn't know I could add an attachment so I will do that also. It's a small file so I'll leave it in the code block too.
Tue, 2003-07-15 09:39
#1
I can't tell which browsers are rendering my CSS wrong!
Try this:
#Header
{
background-color: #ddd;
height: 95px;
padding-top: 25px;
}
#HeaderTitle
{
}
Tue, 2003-07-15 10:52
#2
Re: I can't tell which browsers are rendering my CSS wrong!
Hope this doesn't seem to blunt a message, but that's not what (s)he's after. We don't want the header div to be moved, just the header text within the div.
ElusiveByte wrote:
/*I want this to push the HeaderTitle div down into the Header div by 25 pixels
rather than move the Header down from the body*/
ElusiveByte wrote:
I am not interested in a workaround or other hacks that fix this problem. I simply want to know if this is indeed a bug in Opera 7.10 and Mozilla 1.4.
And just to add... I don't have those browsers hanging around. (this excuse is getting old, really should install them at home...)
Tue, 2003-07-15 11:18
#3
I can't tell which browsers are rendering my CSS wrong!
dJomp wrote:
Hope this doesn't seem to blunt a message, but that's not what (s)he's after. We don't want the header div to be moved, just the header text within the div.
ElusiveByte wrote:
/*I want this to push the HeaderTitle div down into the Header div by 25 pixels
rather than move the Header down from the body*/
ElusiveByte wrote:
I am not interested in a workaround or other hacks that fix this problem. I simply want to know if this is indeed a bug in Opera 7.10 and Mozilla 1.4.
And just to add... I don't have those browsers hanging around. (this excuse is getting old, really should install them at home...)
No problem - it doesn't seem blunt, but this fixes the problem - when I view the page in Firebird, the header box has moved 25px from the top of the page, as if the#Header has had margin-top: 25px; applied to it, rather than the #HeaderTitle. I thought this was what ElusiveByte meant by "move the Header down from the body".
By using padding in the #Header itself, the page looks the same in IE6 and Firebird, the #HeaderTitle is 25px from the top of the #Header and the #Header sits flush against the top of the page.
Tue, 2003-07-15 11:29
#4
I can't tell which browsers are rendering my CSS wrong!
I'm a dumbass! Sorry, I though you used margin-top, not padding...
/me slaps self with wet fish
Tue, 2003-07-15 11:34
#5
I can't tell which browsers are rendering my CSS wrong!
dJomp wrote:
I'm a dumbass! Sorry, I though you used margin-top, not padding...
/me slaps self with wet fish
/me hands dJomp a wet kipper and looks on expectantly...
Tue, 2003-07-15 18:53
#6
I can't tell which browsers are rendering my CSS wrong!
Thanks for the replies guys, but adding padding to the Header box is a bad workaround in my case because of other content in the header. But I'm not concerned with how to fix it because I have no problem simply setting a border-top on the Header since that fixes it. What I want to know is: Is this a bug?
You said Firebird does the same thing to the Header box? Well that's three browsers against one. Maybe this isn't a bug. Maybe IE isn't conforming to the spec. I'll have to check out Firebird and see if the same hacks fix the Header in that browser too. That is, adding a border-top, or some other content into the header above the HeaderTitle.
Edit: Blah, I didn't realize that Firebird is just Mozilla with an XUL interface. So it's still just two browsers against one.
Sun, 2003-07-27 05:19
#7
I can't tell which browsers are rendering my CSS wrong!
I have an update on this "bug" (still don't know whether it is or not)
As I said before, adding a border-top to the Header div fixed the bug. I also discovered that adding even a 1px padding-top fixes the problem too.
Sun, 2003-07-27 05:24
#8
I can't tell which browsers are rendering my CSS wrong!
I'm not sure what the bug is exactly, however Mozilla 1.4 is the most standards-compliant browser out right now, so IE6 is the deficient one.