SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot Fiska's Avatar
    Join Date
    Jul 2004
    Location
    Dardania - Ancient Illyria
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy not compatible with firefox, can anyone help me fix this?

    Hi,
    I'm still facing problems with the bottom part of the site, the thing is that the firefox is not displaying it as it should, meanwhile IE is doing ok but the blocks are not merging for better explanation please check the snapshots as attached.
    here is the code:
    HTML:
    ========================
    <div class="bott_div"></div>
    <!-- bottom--><div id="bottom">
    <div class="bott_left"> 2004 The Forum</div><div class="bott_right"></div>
    </div><!-- end bottom-->

    CSS:
    ========================
    #bottom {
    width: 650px;
    border-color: #ffffff;
    border-width: 5px;
    border-style: solid;
    }
    * html #bottom {width:660px;w\idth:650px}/* box model hack assuming standards mode (e.g. full doctype with uri)*/
    .bott_left {
    height : 18px;
    width : 125px;
    background-color : #C0C0C0;
    color : #000000;
    padding-left : 11px;
    float:left;
    }
    * html .bott_left {width:137px;w\idth:120px}/* box model hack assuming standards mode (e.g. full doctype with uri)*/
    .bott_right {
    height : 18px;
    width : 514px;
    background-color : #FF0000;
    float:right;
    }
    * html .bott_right {width:513px;w\idth:496px}/* box model hack assuming standards mode (e.g. full doctype with uri)*/
    ===================================================

    Thank you
    fiska
    Attached Images Attached Images

  2. #2
    SitePoint Zealot Fiska's Avatar
    Join Date
    Jul 2004
    Location
    Dardania - Ancient Illyria
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think i found the problem iwth the border line that didn't work with firefox, I should just have just specifed the hieght that I didn't previously,
    but the problem is still reamaining with these to blocks at the bottom (RED and Gray) while IE is not displaying em merged, firefox this time is doing OK.

    fiska

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    You changed all the sizes but didn't change the corresponding box model properties for ie!!

    Remember that padding and borders are added to the element in the correct box model and are subtracted from it in ie's broken box model.

    Heres the code again:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #bottom {
    width: 650px;
    border-color: #ffffff;
    border-width: 5px;
    border-style: solid;
    }
    * html #bottom {width:660px;w\idth:650px}/* box model hack assuming standards mode (e.g. full doctype with uri)*/
    .bott_left {
    height : 18px;
    width : 125px;
    background-color : #C0C0C0;
    color : #000000;
    padding-left : 11px;
    float:left;
    }
    * html .bott_left {width:136px;w\idth:125px}/* box model hack assuming standards mode (e.g. full doctype with uri)*/
    .bott_right {
    height : 18px;
    width : 514px;
    background-color : #FF0000;
    float:right;
    }
    </style>
    </head>
    <body>
    <div class="bott_div"></div>
    <!-- bottom--><div id="bottom">
    <div class="bott_left"> 2004 The Forum</div><div class="bott_right"></div>
    </div><!-- end bottom-->
    </body>
    </html>
    If you change any sizes or padding then you must follow through into the star selector hack for ie also.

    I suggest you read thouroughly the sticky faq on the broken box model in ie otherwise you will continue to make the same mistakes

    Paul


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
  •