www.webdeveloper.com
Results 1 to 7 of 7

Thread: firefox boxmodel bug

  1. #1
    Join Date
    Jun 2007
    Posts
    3

    firefox boxmodel bug

    I'm having nightmares trying to get margins and borders to behave. I wrote this simple example of the problems I'm having. IE 6 and 7 display it just the way I think it should be displayed, while firefox 2.0.0.4 and 3.0 beta screw it all up.

    Here is the html code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
    <head>
    <title>TestDivs</title>
    <style type="text/css">
    @import url("main.css");
    </style>
    </head>
    <body>
    <div id="content">
    <div id="container">
    <div id="leftColumn">
    <div id="filter">
    some data as filter
    </div>
    </div>
    <div id="rightColumn">
    <div id="grid">
    some data in the grid.
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    Here is the css code:
    #content {
    border: 3px solid black;
    }
    #container {
    border: 3px solid blue;
    }
    #leftColumn {
    border: 3px solid orange;
    }
    #rightColumn {
    border: 3px solid green;
    }
    #filter {
    border: 3px solid purple;
    }
    #grid {
    border: 3px solid red;
    }


    Has any one else experienced such frustration? How can I get the divs to stay within the widths of their containers?

    Thanks,

  2. #2
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    For starters, you're calculations will be using the broken box model period (regardless of browsers) because you're using an incomplete DOCTYPE. Append on the full DOCTYPE for HTML strict.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    Continuing, what are the widths of your content DIV's? Widths and borders must equate precisely to the same width or your layout will break.
    Last edited by ryanbutler; 06-19-2007 at 05:07 PM.

  3. #3
    Join Date
    Jun 2007
    Posts
    3

    I accidentally posted an incomplete version of css

    html {
    width: 100%;
    }
    body {
    width: 100%;
    }

    #content {
    border: 13px solid black;
    width: 60%;
    }
    #container {
    margin: 3px;
    border: 13px solid blue;
    width: 100%;
    }
    #leftColumn {
    width: 100%;
    border: 13px solid orange;
    }
    #rightColumn {
    width: 100%;
    border: 13px solid green;
    }
    #filter {
    width: 100%;
    border: 13px solid purple;
    }
    #grid {
    width: 100%;
    border: 13px solid red;
    }

    That specifies the widths. Sorry about that. I also changed the Doctype so that it was complete, but it didn't seem to help.

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    <!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" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title></title>
    <style type="text/css">
    * {border:0; padding:0; margin:0;}/* Set everything to "zero" */

    body {min-height:100%; height:101%;
    font:x-small Arial, Verdana, sans-serif;
    voice-family: "\"}\"";voice-family:inherit;
    font-size:small;/*for IE 5.5 */
    } html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */
    font-size: small; voice-family: "\"}\"";
    voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

    p {font-size: 90%; line-height:1.3em; margin:12px 0 2px 0;}
    h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;
    font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
    h1{font-size: 1.93em;}
    h2{font-size: 1.72em;}
    h3{font-size: 1.52em;}
    h4{font-size: 1.42em;}
    h5{font-size: 1.32em;}
    h6{font-size: 1.21em;}
    </style>

    <style>

    #content {
    border: 3px solid black;
    }
    #container {
    border: 3px solid white;
    }
    #leftColumn {
    border: 3px solid green;
    }
    #rightColumn {
    border: 3px solid green;
    }
    #filter {
    border: 3px solid red;
    }
    #grid {
    border: 3px solid red;
    }

    </style>

    <script type="text/javascript"><!--
    // -->
    </script>
    <link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
    </head>
    <body>

    <div id="content">
    <div id="container">
    <div id="leftColumn">
    <div id="filter">
    some data as filter
    </div>
    </div>
    <div id="rightColumn">
    <div id="grid">
    some data in the grid.
    </div>
    </div>
    </div>
    </div>

    </body>
    </html>
    I don't quite understand the problem, but "orange" isn't exactly a color normally used. It appears as if one box is larger than another, but if you swap the color names around so that they match, it's the same. Also noted that I stripped margins & padding to "zero". this gets you away from IE adding it's own values, and now it correctly uses all/any margins & padding that the <STYLE> assigns. (IE likes to add a pixel or three for some selectors).
    And also, a !doctype with a URL so as to 'check'.

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    <style>

    html {
    width: 100%;
    }
    body {
    width: 100%;
    }

    #content {
    border: 13px solid black;
    width: 60%;
    }
    #container {
    margin: 3px;
    border: 13px solid blue;
    width: auto;
    }
    #leftColumn {
    width: auto;
    border: 13px solid orange;
    }
    #rightColumn {
    width: auto;
    border: 13px solid green;
    }
    #filter {
    width: auto;
    border: 13px solid purple;
    }
    #grid {
    width: auto;
    border: 13px solid red;
    }

    </style>
    This works for IE and Firefox. "Width:100%" is "100% of the parent" and this is before adding the border-widths. "auto" compensates for this and it displays normally.

    p.s.:
    html {
    width: 100%;
    }
    body {
    width: 100%;
    }
    can be shortened to:
    html, body {
    width: 100%;
    }
    Last edited by WebJoel; 06-19-2007 at 06:56 PM.

  6. #6
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    IE 6 and 7 display it just the way I think it should be displayed, while firefox 2.0.0.4 and 3.0 beta screw it all up.
    IE is cheating. In IE, your #content box is not actually 60% wide. IE thinks you made a mistake in your CSS, and it's fudging one of your other CSS rules to accommodate what it thinks was your mistake. It's a bad idea to rely on IE's fudging. It's a much better idea to simply fix the CSS. In this case, all you need to do is remove all the "width: 100%" rules. A DIV will, by default, expand horizontally to fill the remaining space.

    Here is your new CSS:
    Code:
    #content { border: 13px solid black; width: 60% }
    #container { margin: 3px; border: 13px solid blue }
    #leftColumn { border: 13px solid orange }
    #rightColumn { border: 13px solid green }
    #filter { border: 13px solid purple }
    #grid { border: 13px solid red }
    When you refresh your browser with this code, both IE and FF will render the same, and in IE you will also see the #content box shorten to a true 60% width.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  7. #7
    Join Date
    Jun 2007
    Posts
    3

    You guys are truly awesome.

    What would I do without people like you--willing and able to help. I truly appreciate your time and responses. I hope to become as good as you in this regard.

    Thanks again guys,

    Nate

    PS Here's ultimately what I was trying to achieve, and was able to due to your responses.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
    <head>
    <title>TestDivs</title>
    <style type="text/css">
    @import url("main.css");
    </style>
    </head>
    <body>
       <div id="content">
          <div id="container">
             <div id="leftContain">
                <div id="leftColumn">
                   <div id="filter">
                      some data as filter
                   </div>
                </div>
             </div>
             <div id="rightContain">
                <div id="rightColumn">
                   <div id="grid">
                      some data in the grid.
                   </div>
                </div>
             </div>
            <div class="clear"/>
          </div>
       </div>
    </body>
    </html>
    and of course your css:
    HTML Code:
    #content { border: 13px solid black; width: 60%;}
    #container { margin: 3px; border: 13px solid blue;}
    #leftContain{border: 0px solid black; width:30%;float: left;}
    #leftColumn { border: 13px solid orange;}
    #rightContain{border: 0px solid black; width: 70%; float: right;}
    #rightColumn { border: 13px solid green;}
    #filter { border: 13px solid purple }
    #grid { border: 13px solid red }
    .clear {
    clear:both;
    overflow:hidden;
    }

    Thanks again for all help. I sure appreciate it.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles