Cross browser list Issue...

[bolty2uk]

Hello all, im just enquiring if anyone can offer me some inspiration or maybe have ideas of workarounds for a cross browser issue..

 

I have a html list which sits nicely beside an image.

this works ok and validates nice. But i do have one small problem.

 

In I.E and Opera the list will sit nicely aligned with the top of the image, yet in FireFox there is a gap at the top. Ive just got no idea what is pushing the list down in Firefox..

 

Anyway ive included code just in case anyone has ideas..

 

<div id="rotatingAndMenu">
<div id="menu">
<div id="navcontainer"> 
<ul id="navlist">
<li><a href="#" title="1">1</a></li>
<li><a href="#" title="2">2</a></li> 
<li><a href="#" title="3">3</a></li> 
<li><a href="#" title="4">4</a></li> 
<li><a href="#" title="5">5</a></li> 
<li><a href="#" title="6">6</a></li> 
<li><a href="#" title="7">7</a></li> 
<li><a href="#" title="8">8</a></li> 
</ul> 
</div> 
</div> 
<div id="rotating"><a href="#"><img src="#" name='SlideShow' alt=""></a> </div>
</div>

 

and css...

 

#navcontainer { 
width:203px;
vertical-align:top;
}

#navcontainer ul {
margin-left: 0;
padding-left: 0;
vertical-align:top;
list-style-type: none;
color:#FFF;
text-align:center;
text-decoration:none;
font-weight:700;
font-size:14px
}

#navcontainer a
{
display: block;
vertical-align:top;
padding: 7px;
width: 203px;
margin-bottom: 4px;
cursor:pointer;
background-color: #CE0000;
border:1px solid #fe0f60
}

#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #FFBFBF;
color: #fff;
}

#rotatingAndMenu {
width:100%;
height:291px;
vertical-align:top;
}

#rotatingAndMenu #menu {
float:left;
width:203px;
height:100%;
vertical-align:top;
text-align:center;
padding:0;
}

#rotatingAndMenu #rotating {
float:right;
width:597px;
}

 

Ive tried vertical-align but for some reason this is always pushed down??

 

Many Thanks for any replies this may generate..

 

[bronzemonkey]

I suspect you haven't reset the default margins/padding for all browsers. Try adding {margin:0; padding:0;} to the css for your list.

[pquery]

Here's your fix:

 

in your stylesheet change your #navcontainer to be the following:

 

#navcontainer { 
width:203px;
vertical-align:top;
margin-top:-12px;
}

 

then add this to your head tag:

  <!--[if IE]>
<style type="text/css" media="screen">
#navcontainer {
margin-top:0;
}
</style>
<![endif]-->