Rogue letter ‘s’ in IE6

[Anonymous]

First, congratulations on an awesome menu plugin. It has been easy to install and set up and (apart from this little error) works like a dream!

The error I get is this:

When I view my site in IE6 I get a letter S under the nav that pushes the rest of my the page down. You can’t initially see this as it is a white ‘S’ on a white background, but if you highlight the page you can see it.

I have checked the code (view source) and I can’t see where it is coming from. When I hover over the rogue ‘S’ then the ‘Contact Us’ nav item highlights. My ‘Contact’ link is a custom navigation item so I thought maybe it is related to the custom items?

So, I tried to change from ‘Custom Code 1’ to ‘Custom Code 2’ and the problem is still there. When I remove the custom nav item from my nav the ‘S’ disappears.

CSS
=======================

#suckerfishnav {
background:#94c889 url(/wp-content/themes/thisisio/images/background-nav.gif) repeat-x top left;
font-size:12px;
font-family:arial, helvetica,sans-serif;
font-weight:bold;
width: 772px;
margin: auto;
}

#suckerfishnav, #suckerfishnav ul {
float:left;
list-style:none;
padding:0;
line-height: 29px;
border:1px solid #ffffff;
margin: 24px 5px auto 5px;
}

#suckerfishnav a {
display:block;
color:#ffffff;
text-decoration:none;
padding:0px 10px;
}

#suckerfishnav li {
float:left;
padding:0;
}

#suckerfishnav ul {
position:absolute;
left:-999em;
height:auto;
width:151px;
font-weight:normal;
margin:0;
line-height:1;
border:0;
border-top:1px solid #ffffff;
}

#suckerfishnav li li {
width:149px;
border-bottom:1px solid #ffffff;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
font-weight:bold;
font-family:arial,helvetica,sans-serif;
}

#suckerfishnav li li a {
padding:4px 10px;
width:130px;
font-size:12px;
color:#ffffff;
}

#suckerfishnav li ul ul {
margin:-21px 0 0 150px;
}

#suckerfishnav li li:hover {
background:#73B765;
}

#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a  {
color:#ffffff;
}

#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
color:#ffffff;
}

#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
color:#ffffff;
}

#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul  {
left:-999em;
}

#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul  {
left:auto;
background:#539F43;
}

#suckerfishnav li:hover, #suckerfishnav li.sfhover {
background:#539F43;
}

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

CUSTOM  CODE 1
=================
<li><a href="/contact/" title="Contact us">Contact Us</a></li>

URL TO SITE:
==================
http://thisisio.races-multimedia.co.uk/

I am using IE6 on Windows XP SP2.

Stuart McAlpine

[Author]

Posts