Div width difference between IE and FF

dwspritchard · 06-01-2005, 11:36 AM

I've taken the plunge and am trying to move my IE only CMS to be compliant with the standards, but I'm having a problem with divs and was wondering if anyone could shed some light on whats happening?

Basically my CMS allows positioning of elements anywhere on the page using position:absolute. This seems to work fine for positioning of elements, but something is happening to either the width/height of divs or splitting of sentences in firefox. I've done searches but nothing seems to quite match this, and i've played round with most of the styles but none seem to make the IE and FF versions appear identical.

here is a link to the page that is giving me grief

Thanks in advance

NancyJ · 06-01-2005, 12:34 PM

I'm guessing your link is wrong...

dwspritchard · 06-01-2005, 07:19 PM

Thanks for pointing that out NancyJ, i've updated it, and it can be found here. Look forward to someone helping me out of my hole.

Mr J · 06-01-2005, 11:27 PM

The basics area that Internet Explorer will put borders and padding to the inside of the box where FireFox puts them outside of the box, this effectively makes the widths and heights different in browsers so you have to take this into account and create rules for both browsers.

Although someone will be able to come up with a more indepth explanation take a look here for a brief one.

http://www.huntingground.freeserve.c...yers_ie_ns.htm

dwspritchard · 06-02-2005, 12:28 AM

Thanks MrJ, that explains it, my sanity is restored almost. Looks like I'll have to resize FF divs with borders/padding after the page loads using javascript. Unless anyone knows of a simpler solution?

Bill Posters · 06-02-2005, 09:01 AM

If you added a full (and correct) DTD at the very top of your markup document, MSIE6 will behave as it should regarding how it adds widths, borders, margins, etc…
A full and complete DTD will trigger MSIE6/Win's 'standards-compliant' mode which means it will interpret the 'box model' correctly.

Looking briefly at your source markup, the DTD that falls closest to the standard of markup is HTML 4.01 Transitional

Code:

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

It's my understanding that (for reasons best known to the ham-fisted apes in MS's IE/Win department) MSIE6 can act up when using a full HTML 4.01 Transitional DTD. Using a partial DTD keeps MSIE/Win in non-standards'compliant mode ('quirks mode') which means that it will continue to misinterpret the box model.
With a little more effort (see validator mentioned below), you could get the markup up to HTML 4.01 Strict standards, which, when used with a full HTML 4.01 Strict DTD will keep MSIE6/Win on its best behaviour.

Code:

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

Unfortunately, MSIE5/Win cannot be convinced to understand the box model correctly and requires the use of a workaround or a 'box model hack'.

The box model hack is possibly the easiest to implement as it doesn't require you to restructure your site.

-

You also need to add a character encoding meta tag. You can safely use either of these:

Code:

<meta http-equiv="content-type" content="text/html; charset=utf-8">

Code:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

Once you have added both the DTD and the character encoding tag, the first few lines of your markup document will appear something like this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>…

Once you have that sorted, you should then test your markup with the W3C online markup validator. This will highlight errors and issues in the markup that may lead to problems in how the page appears in some browsers.
Go through the list and resolve each issues.

Once you have valid markup, your site pages should appear with an improved level of consistency across a range of browsers.

dwspritchard · 06-02-2005, 12:49 PM

Thanks alot Bill Posters, that worked a treat I've implemented the changes by hand and validated against Transitional/loose and everything looks spot on in IE6 / FF. Just got to put the changes in to the code produced by the CMS.

However when I move to Strict (I've included a banner as well), everything appears fine (or at least how it did in loose) in IE, but when I view the new page with FF the middle section of the banner appears to extend a couple of pixels down past the images. Any ideas what could cause that? I've tried explicity setting the height and padding/margins etc but it just hangs there

thanks in advance.