SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question I thought IE6 was supposed to have "the correct box model"

    What am I doing wrong here?

    For some reason, I am having to adjust 135 pixels between Firefox and IE6. I though IE6 used the "correct box model", or am I missing something here?

    Is there a hack or fix for this?:

    my site


    The css:
    Code:
    body {
    	background-color: #FFFFFF;
    	background-image: url(/images/purple_paper_bg.jpg);
    	clear: none;
    	float: none;
    }
    .header {
    	height: 440px;
    	width: 680px;
    	background-image: url(/images/blur_bg3b.jpg);
    	background-repeat: no-repeat;
    	float: none;
    	clear: both;
    }
    .body_box {
    	height: 380px;
    	width: 680px;
    }
    .footer {
    	height: 0px;
    	width: 680px;
    	padding: 0px;
    	margin: 0px;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 0.65em;
    	clear: both;
    }
    .toolBAR {
    	float:left;
    	background:no-repeat left top;
    	font-size:x-small;
    	line-height:normal;
    	padding: 5px;
    	text-align: left;
    	margin: 13px 0px 0px;
    	height: 33px;
    	width: 400px;
    	vertical-align: bottom;
    }
    .toolBAR ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    	font-size: 12px;
    	font-family: "Futura Bk BT", Arial, Helvetica;
    	color: #CCCCCC;
    	text-align: center;
    	width: 680px;
    }
    .toolBAR li {
    	float:left;
    	margin:0;
    	padding:0;
    	background-image: url(../Images/Rtab2.jpg);
    	background-repeat: no-repeat;
    	background-position: right top;
    	line-height: 12px;
    	vertical-align: bottom;
    	width: 133px;
     }
    .toolBAR a {
    	display:block;
    	background-image: url(../images/Ltab.jpg);
    	background-repeat: no-repeat;
    	background-position: left top;
    	padding: 5px 15px;
     }
    h1 {
    	font-family: "Times New Roman", Times, serif;
    	font-size: 40px;
    	line-height: 40px;
    	font-style: normal;
    	font-weight: bolder;
    	font-variant: normal;
    	text-transform: capitalize;
    }
    .h1 {
    	font-family: "Times New Roman", Times, serif;
    	font-size: 40px;
    	line-height: 40px;
    	font-style: normal;
    	font-weight: bolder;
    	font-variant: normal;
    	text-transform: capitalize;
    }
    .body_copy {
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	line-height: 20px;
    	letter-spacing: 0.025em;
    	word-spacing: .025em;
    	white-space: normal;
    	display: block;
    	font-weight: normal;
    }
    .r_column {
    	margin: 70px 0px 5px 115px;
    	height: 293px;
    	width: 382px;
    	border: 0px none;
    	float: left;
    }
    .r_column2 {
    	margin: 75px 0px 5px 186px;
    	height: 293px;
    	width: 176px;
    	border: .25px solid #FF00FF;
    	background-color: #FFFF00;
    	padding: 0px;
    }
    .body_copy_bold {
    
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	line-height: 20px;
    	letter-spacing: 0.025em;
    	word-spacing: .025em;
    	white-space: normal;
    	display: block;
    	font-weight: bold;
    }
    .header_orders {
    	height: 440px;
    	width: 680px;
    	background-image: url(/images/web_bg_orders.jpg);
    	background-repeat: no-repeat;
    }
    .r_column_orders {
    	margin: 70px auto 5px;
    	width: 500px;
    	border: 0px none;
    	background-position: top;
    }
    .body_copy_orders {
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	line-height: 20px;
    	letter-spacing: 0.025em;
    	word-spacing: 0.025em;
    	white-space: normal;
    	display: inline;
    	font-weight: normal;
    }
    .headline_copy_orders {
    	font-family: humanist, sans-serif, arial;
    	font-size: 16px;
    	line-height: 20px;
    	letter-spacing: 0.025em;
    	word-spacing: 0.025em;
    	white-space: normal;
    	display: block;
    	font-weight: bolder;
    }
    .body_copy_orders_bold {
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	line-height: 20px;
    	letter-spacing: 0.025em;
    	word-spacing: .025em;
    	white-space: normal;
    	display: block;
    	font-weight: bold;
    }
    .body_copy_orders_bold2 {
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	line-height: 20px;
    	letter-spacing: 0.05em;
    	word-spacing: 0.05em;
    	white-space: normal;
    	display: block;
    	font-weight: bold;
    	text-align: center;
    }
    .form_center {
    	background-position: center;
    }

  2. #2
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,449
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    IE6 does use the correct box model in standards compliance mode. Not in quirks mode. But IE also has other bugs that may be causing this.

    (Please [ code][ /code] when posting code. Thank you).

  3. #3
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm too lazy to think about this but you have two significant errors in your html. Validate.

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I fail to see the 'significance' of those errors to this problem, but the site now validates xhtml transitional, and the problem remains.

  5. #5
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah i can see what you talkin about, i am sittin in front of xhtml 1.0 valid layout with apropriate doctype etc... and still IE6 is not rendering the way it should.. FF does of course renders it perfectly... i see contradictory info on that topic actually some says no problem with box model some says the opposite...!
    Code:
    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="eng">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=diso-8859-1" />
    
    ....
    <link rel="stylesheet" href="themes/SoulJointV2/style/styleNN.css" type="text/css" />
    
    </head>
    
    <body>
    
    <div id="global">
    <div id="header">En tete Logo</div>
    
    <div id="advertisement">google ads</div>
    
    <div id="mainmenu">Lorem ipsum dolor sit amet,
    consectetuer
    adipiscing elit. Mauris condimentum libero at eros. Fusce justo.
    Vivamus magna pede, laoreet et, mattis bibendum, congue ut, est. Morbi
    bibendum quam a purus. Sed sed mi. Donec quis pede at nisl congue
    euismod. Vivamus egestas cursus pede.</div>
    
    <div id="leftcol">
    <!-- [left-blocks] -->
    </div>
    <div id="maincol">
    <div>
    <div id="editorialblocks">
    <div>
    <div class="editorial"><!-- [area1-blocks] --></div>
    
    <div class="editorial"><!-- [area2-blocks] -->
    </div>
    
    <div class="editorial"><!-- [area3-blocks] -->
    </div>
    
    </div>
    
    <div id="bottomedit">
    <div class="editorial"><!-- [area4-blocks] --></div>
    
    <div class="editorial"><!-- [area5-blocks] -->
    </div>
    
    <div class="editorial"> <!-- [area6-blocks] -->
    </div>
    
    </div>
    
    </div>
    
    <div id="newsfeed"><!-- [right-blocks] -->
    </div>
    
    </div>
    
    <div id="communityblocks">
    <div class="community"><!-- [area7-blocks] --></div>
    
    <div class="community"><!-- [area8-blocks] -->
    </div>
    
    <div class="community">
    <!-- [area9-blocks] -->
    </div>
    
    </div>
    
    </div>
    
    <div id="storelounge">
    <div id="storeloungeleft"><!-- [area10-blocks] -->
    </div>
    
    <div id="storeloungeright"><!-- [area11-blocks] -->
    </div>
    
    </div>
    <hr class="separation" />
    <p id="footer"><!-- [modules] -->
    </p>
    <hr class="separation" />
    </div>
    
    </body>
    </html>
    Code:
    body {
    margin: 0;
    padding: 0;
    background-color: #516363;
    color: black;
    font-size: 10px;
    font-family: verdana, serif;
    }
    
    h2 {
    font-size: 12px;
    }
    
    h3,h4,h5,h6 {
    font-size: 11px;
    }
    
    a :link, active
    {color: #DA5D09;
     text-decoration: none;
     font-weight: bold;
    }
     
    a :hover
     {color: #308395;
     text-decoration: none
     font-weight: bold;
     }
    
    a :visited
     {color: #73971B;
     text-decoration: none;
     font-weight: bold;
     }
    
    #global { /* largeur général du document */
    width: 750px;
    background-color: #FFFFFF;
    margin: 0 auto;
    }
    
    #header {
    height: 50px;
    background-color: #99A1A3;
    color: white;
    margin: 0;
    }
    
    #header img {
    float: left;
    }
    
    #advertisement {
    background-color: #73971B;
    color: white;
    margin: 0;
    text-align: center;
    }
    
    #mainmenu {
    background-color: #DA5D09;
    color: white;
    margin: 0;
    }
    
    #leftcol {
    float: left;
    width: 130px;
    margin: 5px 10px 0px 10px;
    }
    
    
    .leftcoltitle {
    color: #FFFFFF;
    background-color: #73971B;
    border: 1px solid #73971B;
    padding: 5px 5px 5px 5px;
    margin: 0;
    }
    
    .leftcolcontent {
    border: 1px solid #73971B;
    padding: 5px;
    margin: 0;
    }
    
    #maincol {
    margin-left: 150px;
    background-color: #FFFFFF;
    }
    
    
    #editorialblocks {
    float: left;
    width: 460px;
    }
    
    .editorial {
    float: left;
    width: 143px;
    margin: 5px 10px 0px 0px;
    }
    
    #bottomedit {
    clear: both;
    }
    
    .edititle {
    color: #FFFFFF;
    background-color: #308395;
    border: 1px solid   #308395;
    padding: 5px 5px 5px 5px;
    margin: 0;
    }
    
    .editcontent {
    border: 1px solid   #308395;
    padding: 5px;
    margin: 0;
    }
    
    #newsfeed {
    float: right;
    width: 130px;
    margin: 5px 10px 0px 0px;
    }
    
    .newsfeedtitle {
    color: #FFFFFF;
    background-color: #DA5D09;
    border: 1px solid #DA5D09;
    padding: 5px 5px 5px 5px;
    margin: 0;
    }
    
    .newsfeedcontent {
    border: 1px solid #DA5D09;
    padding: 5px;
    margin: 0;
    }
    
    #communityblocks {
    clear: right;
    }
    
    .community {
    float: left;
    width: 190px;
    margin: 5px 10px 0px 0px;
    }
    
    .cmntytitle {
    color: #FFFFFF;
    background-color: #DA5D09;
    border: 1px solid #DA5D09;
    padding: 5px 5px 5px 5px;
    margin: 0;
    }
    
    .cmntycontent {
    border: 1px solid #DA5D09;
    padding: 5px;
    margin: 0;
    }
    
    #storelounge {
    clear: both;
    width: 750px;
    background-color: #308395;
    }
    
    #storeloungeleft {
    float: left;
    width: 360px;
    margin: 5px 10px 0 10px;
    }
    
    #storeloungeright {
    float: left;
    width: 360px;
    margin: 5px 10px 0 0;
    }
    
    .loungetitle {
    color: #FFFFFF;
    background-color: #308395;
    border: 1px solid #308395;
    padding: 5px 5px 5px 5px;
    margin: 0;
    }
    
    .loungecontent {
    border: 1px solid #308395;
    padding: 5px;
    }
    
    
    .separation {
    clear: both;
    visibility: hidden;
    }
    
    #footer {
    clear: both;
    width: 730px;
    margin: 5px 10px 5px 10px;
    background-color: #99A1A3;
    }
    
    .summarytitle {
    color: #FFFFFF;
    background-color: #308395;
    border: 1px Solid  #308395;
    margin: 0 10px 0 0;
    padding: 5px;
    }
     
    .summarycontent {
    border: 1px Solid  #308395;
    padding: 5px;
    margin: 0 10px 10px 0;
    
    }
    
    
    #articletitle {
    color: #FFFFFF;
    background-color: #308395;
    border: 1px Solid  #308395;
    margin: 5px 10px 0 0;
    padding: 5px;
    }
     
    #articlecontent {
    border: 1px Solid  #308395;
    font-size: 11px;
    margin: 0 10px 5px 0;
    padding: 5px;
    }
    On a PHP/Java/XML/Javascript/MySQL internship right now!


Bookmarks

Posting Permissions

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