1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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