Div float alignment problem with firefox [Archive]

bocahavoc

01-07-2009, 10:40 PM

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/

Schmoopy

01-07-2009, 11:30 PM

Here's my attempt at some Spanish -

En el futuro, si usa el botón que dice [code] es más facil leer.

Lo siento, pero no tengo la solución para tu problema.

Estoy seguro que alugien se ayudará a tu pronto.

Hope you understood that :p

bocahavoc

01-08-2009, 03:52 PM

I did understand. Wasn't necessary though. Lol.

I didn't see that code button, my apologies.

Thanks. I hope someone can help me though.

Schmoopy

01-08-2009, 06:42 PM

Yea I know I could have just typed it in English but I'm doing Spanish at A2 so it's good to practice :)