Div float alignment problem with firefox
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;
cursorointer;
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/
CSS Codes
Reply With Quote
Bookmarks