Multiple Browser Stylesheets

[Ascendancy]

I am designing a site's stylesheets and so far I have it working on IE7 and below with Conditional Comments, and in Firefox and Opera for the regular stylesheet. However, Netscape makes all of the font larger than it is in Firefox, so it messes up the layout completely. Is there any way to make a Netscape-specific stylesheet, or to make a stylesheet that can be ignored by Firefox and Opera?

Thanks for any help.

[KDLA]

You have to wonder about your layout if you're having to do browser-specific stylesheets. ;) You might try JUST ONE, with the following magical declarations:

* {margin: 0; padding: 0;}
body {font-size: 10px; line-height: 1;}


With these declarations, you negate any of those invisible settings any browser may have. I also like to use font-size: 10px because it's easier to base measurement upon: 1.1em = 11px, 1.2em = 12px, etc.

The only thing that WILL happen is that IE will render any heading tags in its default size, ignoring the 10px setting, so you'll have to manipulate those a bit in your CSS, however the other browser's won't need specific styling.

KDLA

[Ascendancy]

No no, the layout and everything is perfectly fine. The only reason that I needed an IE stylesheet is because of the weird rendering it has in some of the areas, so I needed to edit my paddings and margins. And yeah, I already had the zeroing padding and margins declaration, but I didn't have the line-height in there. My Font-size was set to 100%, so I figured everything would work out fine.

And uhm, the line-height actually squished everything together closer, it didn't make the font size smaller. :)

Is there anything else I could try? Or maybe I just used what you told me to do in the totally wrong way...

[KDLA]

I apply the line-height to cancel out the browser-applied default line heights, not to change the font size. That way, you can control the upper and lower "padding" of the text lines that line-height controls. You would have to assign line-heights to each of your elements once you used the "1" setting.

I know, I know -- you're probably asking why all this work? Believe me, it's much easier to re-apply spacing, than it is to figure out why it's occuring in the first place!

---

Anyway, I've noticed that IE's default font size is 16pt, and Firefox's is 14pt; there's the difference. So, if you're using em to space/size your elements, the end results will look different, based on the browser. When you apply the font sizing to the body tag, it helps control the font sizing (except for headings, as I've mentioned).

KDLA

[Ascendancy]

So if I apply a 10px font-size to the body, that will make 10px the universal size for the font in all browsers?(Excluding the Headings).

Because the difference is exactly why I am having this problem in the first place. Opera and Firefox have a 14pt based font, and IE and Netscape have a 16pt based font, so it's hard to control.

EDIT:
Yup, I tried what you said. I changed the body so that it had the rule of setting the font-size to 10px, and then I went in and edited the div's to change the font size to what I wanted, and it works in Netscape now. Thanks so much for the help.

[mactheweb]

The best way I know of to get font sizes to display consistently across browsers is to declare the font size a couple of times.

For those who are absolute paranoids, set the html font size at 16px; default font size is sometimes a problem with Netscape, some versions of which set the default font size at 14px, or so I remember.

html {font-size: 16px;}

html * {font-size: 100.01%} /*that's for IE, it sets the base font for relative font size consistency*/

body {font-size: 62.5%} /*that's not set in stone. it gives all fonts a 10 pixel base size, then you can style individual styles from there*/

h1 { font-size: 2.2em}
h2 {font-size: 2em}
p, li, li li, th, dd {font-size 1.2em}/* and so on. this example makes h1 a 22px equivalent and paragraphs a 12px equivalent. that makes figuring sizes a no brainer */

I have a standard style sheet clipping that I just drop into all new stylesheets and tweak according to the design.

This is probably overkill but it pretty much covers the bases for all browsers back to version 5 IE and 6 of Netscape.

[KDLA]

I've tried that method, but it causes a problem for inherited font sizes, such as nested lists. The font size in the body seems to make it an easier fix. But, that's just based on my experience. ;)

[mactheweb]

I've tried that method, but it causes a problem for inherited font sizes, such as nested lists. The font size in the body seems to make it an easier fix. But, that's just based on my experience. ;)
Yes, it does if you don't specifically define levels of nested lists. Notice that I defined font sizes for one level of nesting. You could easily do it for more. Just define them all at once.p, li, li li, li li li {font-size: 1.2em}

I can't remember the last time I nested lists more than two deep but you could extend the declaration as far as you want.