Div float alignment problem with firefox

Discussion in 'CSS' started by bocahavoc, Jan 7, 2009.

0
  1. #1
    I am designing a site using phatfusion's ImageMenu script.
    I am placing the div that contains Imagemenu floated left. The width of the is div 960px. The width of the maindiv container is also 960px, so that Imagemenu looks tightly aligned (I'll add some bleed later on).

    Now, the problem is that it looks aligned in IE (with NO bleed on the sides) but FF adds a bit of a margin of around 40px on the left.

    Here's the CSS code:

    body {
    width:100%;
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    font-size: 98%;
    border:none;
    color: #e8e5c0;
    margin: 0;
    padding: 0;
    }

    a img { border: none; }

    a {
    color:#FFF;
    text-decoration: underline;
    }

    a:hover {
    color:#0099FF;
    }

    #logocontainer{
    margin-left:auto;
    margin-right:auto;
    width:960px;
    overflow:hidden;
    height:80px;
    }
    #logo {
    background:url(../images/logos/logo_transparent_small.png) no-repeat left center;
    margin-top:10px;
    margin-left:20px;
    float:left;
    width:312px;
    height:60px;
    }
    /* Container */

    .mainmenu{
    float:left;
    margin-right:20px;
    height:150px;
    }

    /* Font styles */

    h1 {
    color:#FFF;
    font-size:1.5em;
    line-height:0.5pt;
    }

    .joblist {
    font-size:0.7em;
    overflow:hidden;
    }

    /* BUTTONS */

    a#home {
    display:block;
    float:right;
    width:100px;
    height:80px;
    text-indent:-9999px;
    background:url(../images/buttons/inicio.png) top left no-repeat;
    }
    a#home:hover {
    background-position: -100px;
    }

    a#diseno {
    display:block;
    float:right;
    width:100px;
    height:80px;
    text-indent:-9999px;
    background:url(../images/buttons/diseno.png) top left no-repeat;
    }
    a#diseno:hover {
    background-position: -100px;
    }

    a#impresiones {
    display:block;
    float:right;
    width:156px;
    height:80px;
    text-indent:-9999px;
    background:url(../images/buttons/impresiones.png) top left no-repeat;
    }
    a#impresiones:hover {
    background-position: -156px;
    }

    a#web {
    display:block;
    float:right;
    width:90px;
    height:80px;
    text-indent:-9999px;
    background:url(../images/buttons/web.png) top left no-repeat;
    }
    a#web:hover {
    background-position: -90px;
    }

    a#contacto {
    display:block;
    float:right;
    width:120px;
    height:80px;
    text-indent:-9999px;
    background:url(../images/buttons/contacto.png) top left no-repeat;
    }
    a#contacto:hover {
    background-position: -120px;
    }

    /* Image Menu */

    #maindiv {
    background:url(../images/core/page-bg.jpg) repeat-x;
    background-color:#91b422;
    width:960px;
    height:600px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
    }

    #imageMenu {
    margin-top:2%;
    width: 960px;
    height: 150px;
    overflow: hidden;
    }

    #imageMenu ul {
    list-style: none;
    margin: 0px;
    display:block;
    height: 150px;
    width: 1000px;
    }

    #imageMenu ul li {
    float: left;
    }

    #imageMenu ul li a {
    text-indent: -1000px;
    border-right: 2px solid #fff;
    cursor:pointer;
    display:block;
    overflow:hidden;
    width:320px;
    height: 150px;
    }

    #imageMenu ul li.print a {
    background: url(../images/slides/print.jpg) repeat scroll 0%;
    }

    #imageMenu ul li.diseno a {
    background: url(../images/slides/diseno.jpg) repeat scroll 0%;
    }

    #imageMenu ul li.web a {
    background: url(../images/slides/web.jpg) repeat scroll 0%;
    border:none;
    }

    .clear {
    clear: both;
    }

    ==============

    and here's the HTML for that area:

    </head>
    <body>
    <div id="maindiv">
    <div id="logocontainer"> <a href="index.html" id="logo"></a>
    <div><a href="#" id="contacto"></a></div>
    <div><a href="#" id="web"></a></div>
    <div><a href="#" id="impresiones"></a></div>
    <div><a href="#" id="diseno"></a></div>
    <div><a href="#" id="home"></a></div>
    </div>
    <div id="imageMenu">
    <ul>
    <li class="diseno"><a href="#"></a></li>
    <li class="print"><a href="#"></a></li>
    <li class="web"><a href="#"></a></li>
    </ul>
    </div>



    Any ideas? Plz help me. :)

    The URL is: http://israeluna.com/demo2/
     
    bocahavoc, Jan 7, 2009 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    IE and Opera indent lists with 40px left margin on ul. Firefox and Safari do it with 40px left padding on ul. You zeroed the margin, but not the padding.

    cheers,

    gary
     
    kk5st, Jan 7, 2009 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    IE and Opera indent lists with 40px left margin on ul. Firefox and Safari do it with 40px left padding on ul. You zeroed the margin, but not the padding.

    cheers,

    gary

    //edit: oops, double post. sorry --g
     
    kk5st, Jan 7, 2009 IP
  4. bocahavoc

    bocahavoc Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Awesome. That was it! Thank you. I was going nuts.

    :)
     
    bocahavoc, Jan 9, 2009 IP