Spacing not same in IE and Firefox

Forum Moderators: not2easy

Message Too Old, No Replies

Spacing not same in IE and Firefox

Tobin83

2:55 pm on Mar 15, 2006 (gmt 0)

There is one thing that always confuses me with coding in CSS that I can not figure out. If someone out there can please explain to me how to get a site to look the same in both firefox and internet explorer. If someone knows please answer because I'm only down to a few hairs left on my precious little head. :)

Thank you a million,

Tobin -- ps. I tried using relative positioning..

maerk

3:15 pm on Mar 15, 2006 (gmt 0)

If you're using the width property, I think it's handled differently in each browser.

The correct way is that width defines the *content* (i.e. the text) of the element. If you have any borders/margin/padding, these are then added ON TOP of the width value. So:

div {
width: 200px;
border-width: 10px;
padding: 20px;
margin: 0; }

The actual, visible width of the element, from the edge of one border to the other would be:

200 + (10 * 2) + (20 * 2) = 260px

I think firefox does it that way, but IE does it the way you would expect.

Does that help? Even if not, it's worth bearing in mind for the future.

Fotiman

3:15 pm on Mar 15, 2006 (gmt 0)

First, make sure you use a fully valid DOCTYPE. For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

If you don't, then IE will run in Quirks mode. This means it uses it's own funky box model instead of the "official" box model defined by the W3 specs. By including the full DOCTYPE, IE will behave more like Firefox and other browsers that more accurately follow the specs.

This won't fix all of the differences, as IE has a lot of bugs depending on what you're doing. But it's a step in the right direction.

Tobin83

4:53 pm on Mar 15, 2006 (gmt 0)

thank you both.. it works.. just can't get it to show up at all in IE now. AHHH :)

Tobin

doodlebee

8:08 pm on Mar 15, 2006 (gmt 0)

Tobin -
to add to the other's responses - you should also use conditional comments to assist IE. Since Firefox, Safari, Opera et al are standards-compatible browsers, you should get your site looking great in them (usually, getting it in one will make the others also just fine). IE is the only one you have to wrry about, and even Microsoft tells you conditional commetns are the way to go.

Bascially, it's a way of targeting the IE browser without using a javascript browser sniffer. You can create a separate stylesheet for IE browsers and use the comment to call them in. Usually a separate stylesheet only takes a few extra lines of code to fix IE - no need to "do it all over".

You can read up more on conditional comments by googling about them (ways to distinguish between IE6, IE 5, etc.), but my sites usually always contain this at the top, before the closing </head> tag:

And that's pretty much all there is to it - just use that stylesheet to fix the margins and padding for IE - all other browsers will ignore it, it validates and is a great little easy way to fix IE issues.