Firefox Woes

Discussion in 'CSS' started by alohabeans, Dec 9, 2007.

  1. #1
    I have a site that I am doing and it works great in IE, but when I view it in Firefox, none of my divs line up correctly. Can someone look at this and tell me what they think will fix it. I thought it could be the z-index, so I removed all of those and then I thought maybe the HXW attributes, but now I am stumped.

    
    
    html,body,div,p,ul,ol,li,h1,h2,h3,h4,h5,pre,form,p,button,img {
      margin: 0 auto;
      padding: 0;
      border: 0;
    }
    
    ul,li { list-style-type: none; }
    a {outline: none;}
    button span,a span,li span {display: none;}
    
    table,tr,td {
      border: 0;
      border-collapse: collapse;
      vertical-align: top;
    }
    
    
    body{padding-top:5px;background: #FFF;
      font: 30% Arial,sans-serif;
      background-image: url("images/world_map1a.png"); background-position: center   center; background-attachment: fixed; background-repeat: no-repeat;
      margin:0 auto;
      margin-left:auto;
      margin-right:auto;
      text-align:left;
    
      }
    
    body.lineht {line-height:50%}
    
    h4 {
      width: 250px;
      height: 34px;
    }
    
    h4.topics {background: url(images/topics_head.png) 0 0 no-repeat; border:0;; width:250px;}
    h4.ccorner {background: url(images/ccorner_head.png) 0 0 no-repeat; border:0;}
    h4.content {background: url(images/content_events.png) 0 0 no-repeat; border:0; width:550;}
    h4 span {display: none;}
    
    h5 {
      font-size: 9px;
      color: #a57c4a;
      margin: 0 17px 0 17px;
      padding: 6px 0 0 0;
    }
    
    img.head  {position: absolute; top:50px}
    
    img#head {
    position:relative; top:5px; width:800px; height:100px; 
    margin:0 auto;}
    
    
    table.col {border-collapse:collapse; table-layout: auto}
    
    /* Minitabs Text Navbar courtesy of Dynamic Drive */
    
    ul#minitabs{list-style: none;margin: 0;padding: 7px 0;
      border-bottom: 1px solid #FFF;font-weight: bold;
      text-align: center;white-space: nowrap; font-size: 12px}
    ul#minitabs li{display: inline;margin: 0 2px}
    ul#minitabs a{text-decoration: none;padding: 0 0 3px;
      border-bottom: 4px solid #rgb(192,192,192);color: #999}
    ul#minitabs a#current{border-color: rgb(128,0,0);color: #06F}
    ul#minitabs a:hover{border-color: rgb(128,0,0);color: #06F} 
    
    hr#thin {size:0}
    
    /* Clearing div ---------------------------------- */
    
    div.clear {
    	position: relative;
    	clear: both;
      line-height: 1px;
      font-size: 1px;
      float:right;
    }
    
    /* Transparent Aircraft images ---------------------- */
    
    div.transbox
      {
      width: 150px;
      height: 100px;
      margin: 10px 10px;
      background-color: #ffffff;
      border: 1px solid black;
      /* for IE */
      filter:alpha(opacity=10);
      /* CSS3 standard */
      opacity:0.6;
      /* for Mozilla */
      -moz-opacity:0.1;
      }
    div.transbox p
      {
      margin: 15px 10px;
      font-weight: bold;
      color: #000000;
      }
    
    /* Left-hand column Divs ---------------------------- */
    
    #LHC {
      width: 250px;
      position: relative; 
      top: 10px; left: 25px;
      text-align:left;
    }
    
    #LHC .section {
      background: url(images/sidebar_back.png) 0 0 repeat-y;
    }
    
    #LHC .section_top {
      background: url(images/sidebar_head.png) 0 0 no-repeat;
      height:34px;
      font-size: 10px;
      line-height: 12px;
    }
    
    #LHC .section_bottom {
      background: url(images/sidebar_bottom.png) 0 0 no-repeat;
      margin: 0 0 0px 0;
      height: 22px;
    }
    
    #LHC p {
      font-size: 10px;
      line-height: 12px;
      margin: 10px 17px 0px 17px;
    
    }
    
    #LHC p.top {
      font-size: 10px;
      line-height: 10px;
      margin: 0 17px 0 17px;
      padding: 4px 0 0 0;
    
    }
    
    #LHC p span {color: #ae8f58;}
    
    #LHC p a,
    #LHC p a:visited {
    	color: #bc6125;
      background: none;
      border-bottom: 1px dotted #df996b;
    }
    
    #LHC p a:hover {
      color: #5d2a08;
      background: none;
    }
    
    /* Content Divs ------------------------- */
    
    #CONTENT {
      width: 530px;
      position: absolute; top: 30px; right: 0px;
      font-size: 10px;
      line-height: 10px;
      margin: 0px 0px 0px 0px;
      
    }
    
    #CONTENT .section {
      background: url(images/content_body.png) 0 0 repeat-y;
    }
    
    #CONTENT .section_top {
      background: url(images/content_top.png) 0 0 no-repeat;
      height:40px;
      font-size: 10px;
      line-height: 10px;
    }
    
    #CONTENT .section_bottom {
      background: url(images/content_bottom.png) 0 0 no-repeat;
      margin: 0 0 0px 0;
      height: 31px;
      right: 200;
    }
    
    #CONTENT p {
      font-size: 10px;
      line-height: 10px;
      margin: 5px 5px 0px 5px;
    
    }
    
    #CONTENT p.top {
      font-size: 10px;
      line-height: 10px;
      margin: 0 17px 0 17px;
      padding: 4px 0 0 0;
    }
    
    #CONTENT p span {color: #ae8f58;}
    
    #CONTENT p a,
    #CONTENT p a:visited {
    	color: #bc6125;
      background: none;
      border-bottom: 1px dotted #df996b;
    }
    
    #CONTENT p a:hover {
      color: #5d2a08;
      background: none;
    }
    
    /* Aircraft Section -------------------------------- */
    
    #ACFT {
      width: 540px;
      position: absolute; top:420px; right:0px;
      font-size: 10px;
      line-height: 12px;
      margin: 10px 11px 0px 17px;
    }
    
    #ACFT .section {
      background: url(images/content_body.png) 0 0 repeat-y;
    }
    
    #ACFT .section_top {
      background: url(images/content_top.png) 0 0 no-repeat;
      height:39px;
      font-size: 10px;
      line-height: 10px;
    }
    
    #ACFT .section_bottom {
      background: url(images/content_bottom.png) 0 0 no-repeat;
      margin: 0 0 0 0;
      height: 31px;
      right: 200;
    }
    
    #ACFT p {
      font-size: 10px;
      line-height: 10px;
      margin: 5px 15px 0px 5px;
      text-align:left;
    }
    
    #ACFT p.top {
      font-size: 10px;
      line-height: 10px;
      margin: 0 17px 0 17px;
      padding: 4px 0 0 0;
    }
    
    #ACFT p span {color: #ae8f58;}
    
    #ACFT p a,
    #ACFT p a:visited {
    	color: #bc6125;
      background: none;
      border-bottom: 1px dotted #df996b;
    }
    
    #ACFT p a:hover {
      color: #5d2a08;
      background: none;
    }
    
    /* Placemarker */
    
    #LAYOUT {
      width: 900px;
      position: relative; top:0px;
      margin:0 auto;
      text-align: left;
      
    }
    
    #LAYOUT .body {
      background: url(images/main_body.png) 0 0 repeat-y;
      text-align: left;
    }
    
    #LAYOUT .top {
      background: url(images/main_top.png) 0 0 no-repeat;
      height:21px;
      font-size: 10px;
      line-height: 12px;
    }
    
    #LAYOUT .bottom {
      background: url(images/main_bottom.png) 0 0 no-repeat;
      margin: 0px 0px 0px 0px;
      height: 22px;
    }    
    
    #CONTAINER {
      width:900px;
      position: relative;
      top:0px;
      text-align:left;
    }
    
    #FOOTER {
      width:900px;
      position: fixed;
      bottom: 10px;
      text-align:left;
    }
    
    #FOOTER .body {
      background: url(images/main_body.png) 0 0 repeat-y;
    }
    
    #FOOTER .top {
      background: url(images/main_top.png) 0 0 no-repeat;
      height:21px;
      font-size: 10px;
      line-height: 12px;
    }
    
    #FOOTER .bottom {
      background: url(images/main_bottom.png) 0 0 no-repeat;
      margin: 0px 0px 0px 0px;
      height: 22px;
    }    
    
    #GALLERY {
      position:relative;
      top: 10px;
      left:10px;
      width:900px;
      padding: 10px 0px 10px 10px;
      text-align:center;
    }
    
    #OPEN {
      position:relative;
      width: 450px;
      top:0;
      left:0;
      margin: 0 0 0 0;
      padding:5px 5px;
    }
    
    #OPEN .top {
      background: url(images/open_top.png) 0 0 no-repeat;
      width: 450px;
      height: 13px;
    }
    
    #OPEN .section {
      background: url(images/open_body.png) 0 0 repeat-y;
      width:450px;
      text-align: center;
    }
    
    #OPEN .bottom {
      background: url(images/open_bottom.png) 0 0 no-repeat;
      height: 14px;
      width:450px;
    }
    
    #OPEN p {
      text-align: center;
      font-size: 12px;
      line-height: 12px;
      margin: 0px 17px 0px 17px;
      font-family: arial, tahoma, default;
    }
    
    #OPEN p.em {
      font-size: 14px;
      font-weight: bold;
     }
    
    #OPEN p.base {
      text-align: right;
    }
    
    
    
    Code (markup):
    Any help will be greatly appreciated. Mahalo!
     
    alohabeans, Dec 9, 2007 IP
  2. creative4w3

    creative4w3 Active Member

    Messages:
    105
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    58
    #2
    Somewhere you have bad CSS... you'll just have to find it. I can't do anything without seeing the problem and seeing the HTML.
     
    creative4w3, Dec 9, 2007 IP
  3. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #3
    The problem is that you coded for a specific browser, and the worst (IE) at that. Start the whole thing over and avoid absolute positioning like you did with your content division. This time, unless you have time to read the html/css specs, code to a browser that supports them the most (Opera 9, Firefox 2, Safari 3).
     
    soulscratch, Dec 9, 2007 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    CSS train wreck.

    margin: 0 auto; - on EVERYTHING? Bad idea.

    on Body:
    margin:0 auto;
    margin-left:auto;
    margin-right:auto;
    redundant to the first declaration AND to itself.

    font: 30% Arial,sans-serif;
    Sweet heyzeus - WHY?!? 30% is so small as to be useless. No wonder everything else looks to be declared in PX.

    body.lineht {line-height:50%}
    Do I even want to KNOW?!?

    clearing DIV - probably not even NEEDED.

    #content - position:absolute - /FAIL/FAIL/FAIL/

    As mentioned though, we really can't help too much without the HTML, preferably a link to a copy of this live - though I have the feeling this is a DEFINATE chuck it and start over.
     
    deathshadow, Dec 9, 2007 IP