-
This one CSS instance is stumping me big time!
This is really stumping me. I don’t know how many time’s I’ve done this, but on this one particular case it is not working.
My CSS says this:
#footer{
color:#888;
font-size:20px;
}h3{
font-family: Sylfaen, Georgia, “Times New Roman”, Times, serif;
font-weight:normal;
letter-spacing: -1px;
margin:0;
}This is the only reference to h3 in my CSS file.
It is used here:
Unlike all other instances of using px for font-size units, in this one case only, the resulting
is of significantly different size when viewed in Firefox vs. IE.
I cannot for the life of me figure out why this must be. I have plenty of other CSS styles linked that do this exact sort of thing, using px units, and they behave identically between the two browsers, because afterall pixels are pixels, no matter what software you are using.
But this one doesn’t!
Any ideas? I’ve studied these little snippets of code for hours and can’t understand.
Thanks
Andrew -
6 Replies
-
hello…
hmm – the examples you’ve provided here look the exact same on firefox, ie and safari on mac – sure you don’t have some sort of odd caching issue there?
sitruc
-
no, i always check against fresh pages, not cached ones.
it’s very odd and i guess it’s stumped you too!
if you want to see the page in question:
justpiano.org
bottom of pageat least on XP, tested on 2 different computers, using the latest Firefox and IE 6, the copyright is indeed a different size.
-a.
-
hello…
not stumping – you didn’t proivde the url on the first post, and your inline style example in the post looked the exact same across browsers, so that’s all i had to go on. now that i see your url, i can see the difference…
it looks like the culprit is the h3 tag – some browsers are honoring it, but others are not. while css is generic, there are numerous corner cases where different browser doms parse things in different ways. for example, on your page, i see that you appear to have 38 opening div tags but only 35 closing ones – that means that there are likely some unclosed divs, which might affect your layout in different browsers, and is probably the culprit here, although with as many specific divs as are in there, it’s hard to say. but there is an easier fix, which is next.
in this case, though, you have redundant tags. you have the “footer” div, which has a font size and color style set – then inside that, you have an h3 tag, which has a separate style in your sheet, but no font size attribute. but regardless, you don’t need it there – you have all the styles in the footer css declaration, so you can just remove the unneeded h3 tag around the text inside the footer – if you want that text bold, just add either a simple bold tag or a bold attribute to your footer css delcaration and that will solve the issue…
sitruc
-
Hey, good call. I got rid of the
and added its style info to the footer CSS, and now it works great cross-browser.
I’ll have to track down the missing next at some point.
I’m using a WordPress theme which is supposed to be a nice, dandy, packaged formatting template, but I’ve discovered lots of coding mistakes in it that I’ve had to fix manually. The worst of which was previously all the font-sizes were in units of “em”, but the parent unit was never defined. This gave the browsers full control over the text size, and it looked horrible on IE.
thanks for the help
-a. -
interestingly, i ran an XHTML validator on my site, and it didn’t catch any of the unclosed
tags, which is very bizarre considerting that usually these things are very strict. i used the processor at w3.org. why wouldn’t it do that?-a
-
oh, i realized that the extra
tags are actually openings that were commented out, so actually the XHTML is fine, with all tags properly closed, and thus this isn’t the cause of the original problem regarding the.
anyway, enough squinting for the night.
cheers,
andrew
Reply to this Discussion! Login or Sign Up