Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jun 2005
    Location
    Stoke on Trent, UK
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div width difference between IE and FF

    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
    Last edited by dwspritchard; 06-01-2005 at 07:16 PM.

  • #2
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,169
    Thanks
    19
    Thanked 65 Times in 64 Posts
    I'm guessing your link is wrong...

  • #3
    New to the CF scene
    Join Date
    Jun 2005
    Location
    Stoke on Trent, UK
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #5
    New to the CF scene
    Join Date
    Jun 2005
    Location
    Stoke on Trent, UK
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    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.

  • #7
    New to the CF scene
    Join Date
    Jun 2005
    Location
    Stoke on Trent, UK
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •