IE shows site correct - Firefox not

[Daniel Forster]

When you look at http://www.jgtranslations.ch/, IE shows the site correct
but Firefox doesn't. It seems that Firefox doesn't handle the statement
height:51px in the following part of stylesheet.css correct.... How can I do
it in a way that both browsers do show it correct??? I do not want to use
tables, because of cms-reasons.

thanks, Peter

h1,h2,h3
{font-size:13px;font-weight:bold;background-color:#FFFFFF;height:51px;border-bottom:
1px solid #000000;padding-top:16}

li.doc,li.sdoc,li.docs,li.sdocs{line-height:1.5;display:inline;padding-left:15px}

ul.search{padding-left:0;margin-left:0;list-style:none;text-decoration:none}

 

[Steve Pugh]

When you look at http://www.jgtranslations.ch/, IE shows the site correct
but Firefox doesn't.

I bet it's actually the other way round.

It seems that Firefox doesn't handle the statement
height:51px in the following part of stylesheet.css correct.... How can I do
it in a way that both browsers do show it correct??? I do not want to use
tables, because of cms-reasons.

h1,h2,h3
{font-size:13px;font-weight:bold;background-color:#FFFFFF;height:51px;border-bottom:
1px solid #000000;padding-top:16}

Your doctype triggers quirks mode so IE includes borders and padding
inside the width/height. So in IE the total height of your headings
from outside edge of the top border to the outside edge of the bottom
border will be 51px.

In decent browsers the total height might be 51px + 1px for the bottom
border, or it might be 51px + 1px for the bottom border + 16px for the
top padding. All depending on whether they chuck out your incorrect
unitless length or not.

You can make IE6 behave properly by using a different doctype, but IE5
will always be broken.

And then there's also margin collapsing to take into account which
again FF tends to get right and IE tends to get wrong.

Setting font sizes in pixels is a bad idea - Win IE users can't resize
the text except by disabling all font sizing. I would drop the pixel
font size and adjust the rest of the design so that text of any size,
and thus a <h1> of any height, works.

You should also fix the syntax errors:
http://validator.w3.org/check?uri=http://www.jgtranslations.ch/
http://jigsaw.w3.org/css-validator/...www.jgtranslations.ch/&warning=1&profile=css2

If you really just want to hack it so that FF gets a different height
value in the CSS then feast your eyes on all the dozens of CSS hacks
at http://www.dithered.com/css_filters/
But don't be surprised if hammering it flat in one place causes it to
pop up in another.

Steve

 

[Jukka K. Korpela]

{font-size:13px;font-weight:bold;background-color:#FFFFFF;height:51px;bo
rder-bottom: 1px solid #000000;padding-top:16}

You should start from checking your CSS syntax using the so-called CSS
Validator at http://jigsaw.w3.org/css-validator/

Conforming browsers ignore declaration padding-top:16, while conconforming
browsers such as IE might make guesses on what the author meant, attaching
some unit to the number 16.

Besides, you should stop using px values especially since they fix the size
on IE.

 

[Richard]

Better. Trash IE all together.