I'm having a bizarre problem with my Son of Suckerfish menu. Here's what I know about it:

1) It works fine in every browser except IE6/IE7/maybe IE8
2) In IE6/7 the last two letters from the last item in the right-most dropdown list appear on the left side of the screen below the menu.
3) The letters remain in the same place if you delete top-level list items, if you remove individual items from the list or lengthen/shorten the list
4) All the content below the menu is pushed down 40px or so more than it should be in these two browsers
5) When I hover over the equivalent item in the menu, the text on the left-hand side also mirrors the hovered content.

I'm completely stumped; take a look for yourself at sevamandir.org/a30/aboutus.htm. I included all of the CSS in the html head, in a style tag. The CSS code is also below. If you're reading this could you at least verify you're having the same problem? Thanks very much, Kevin

body {
    text-align:center;
    background-color:white;
    font-size:62.5%;
    font:12px Verdana, sans-serif;
    /*border:1px solid #ccc;*/
}

hr {
    color:#ccc;
    background-color:#ccc;
}

#container{
    width:980px;
    text-align:left;
    margin:0 auto;
    /*padding:0 0 0 10px;*/
    /*border:1px solid #ccc;*/
    position:relative;
}

#maincontent {
    width:980px;
    text-align:left;
    padding:1px 0 0 0;
    min-height:400px;
    margin:0 auto;
    float:left;
}

#leftbar {
    width:200px;  
    float:left; 
    margin:5px;
}

#centerbar {
    width:490px; 
    min-height:400px; 
    margin:5px; 
    float:left; 
    overflow:hidden;
    text-align:justify;
}

#rightbar {
    width:255px; 
    min-height:400px; 
    margin:5px; 
    float:left; 
    overflow:hidden; 
    background-color:#FFFFFF;
}

#header{
    width:980px;
    margin:0 auto;

}

#header .logo {
    float:left;
    margin:5px 5px 5px 0px;
}

#header .toprightlogo {
    float:right;
    position:relative;
    overflow:hidden;
    color:#666666;
    font: 11px Verdana, Arial, Helvetica, sans-serif;
}

#header .catchphrase {
    float:left;
    height:27px;
    width:520px;
    margin:0px;
    font:16px Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#769841;
}

#footer {
    width:980px; float:left; text-align:left; margin:0 auto;
    padding-bottom:20px;
}

/*text*/

.text {
    font:12px Verdana, sans-serif;
    text-align:left;
    border-top:1px solid #ccc;
    padding:4px 0 5px 0;
}

.brownheadline {
    font:18px Arial, sans-serif;
    text-align:left;
    color:#b6791e;
    font-weight:bold;
    margin:0px 30px 0px 0px;
    padding:0 0px 3px 0px;

    border-bottom:1px solid #ccc;
}

.leftlist {
    font:12px Arial, sans-serif;
    color:#769841;
}

.leftlist a {
    font:13px Arial, sans-serif;
    color:#769841;
}

.leftlist ul {
    color:black;
    padding:6px 10px;
    margin:0px 10px;
}

.headline {
    font:16px Arial, sans-serif;
    width:490px;
    display:block;
    color:#769841;
    font-weight:bold;
    padding:5px 0 2px 0;
}

.subheader {
    font:15px Arial, sans-serif;
    width:490px;
    float:left;
    color:#b6791e;
    font-weight:bold;
    padding:0 0 2px 0;
}

.textbox {
    padding:4px 0 5px 0px;
    font:13px Arial, sans-serif;
    width:490px;
    border-top:1px solid #ccc;
    float:left;
    color:black;
}

.textbox a {
    float:right;
    padding:4px 0 5px 0;
    font-weight:bold;
    width:300px;
    text-align:right;
}

.textbox img {
    padding:0px 10px 10px 0px;
    float:left;
}

.boardname {
    float:left;
    font:14px Arial, sans-serif;
    color:#b6791e;
    font-weight:bold;
    padding:5px 0px 2px 0;
}

.boardtitle {
    float:right;
    font:14px Arial, sans-serif;
    color:#b6791e;
    font-weight:bold;
    padding:5px 0 2px 0;
}

.top {
    font:13px Arial, sans-serif;
    text-align:right;
    float:right;
    width:300px;
    padding:5px;
    font-weight:bold;

}

/*Link colors*/

a:link {
    color: #769841;
    text-decoration: none;
}

a:visited {
    color: #769841;
    text-decoration: none;
}

a:hover {
    color: #000000;
    text-decoration: none;
}

.search {
    height: expression( this.scrollHeight > 56 ? "56px" : "auto"); 
    /*border:1px solid #ccc;*/
    overflow:hidden; 
    width:400px;
    height:46px; 
    padding:10px 0px 0px 0px; 
    float:right;
}

.donate {
    margin:5px 0px 5px 5px;
    padding:0 0 5px 0;
    float:left; 
    width:245px; 
    border-bottom:1px solid #ccc;
    border:2px solid #ffe400;
}

.donateheadline {
    background-color:#FFE400; 
    float:left; 
    width:235px; 
    font:13px Verdana, Arial, Helvetica, sans-serif; 
    font-weight:bold; 
    text-align:center; 
    overflow:hidden; 
    padding:5px; 
    margin:0 0 5px 0;
}
.donateheadline {
    /width:245px;
    w/idth:235px;
}

.donate a {
    color:#769841; 
    font: 13px Arial, Helvetica, sans-serif; 
    font-weight:bold; 
    text-decoration:none; 
    line-height:130%;
}

.story {
    float:left; 
    padding:4px 5px 10px 5px; 
    margin:5px 0 0 0;
    border-top:1px solid #ccc;
}

.storytitle {
    float:left; 
    font:12px Verdana, sans-serif; 
    font-weight:bold; 
    padding:0px 5px 0 5px; 
    color:#b6791e; 
    line-height:150%;
    clear:right;
}

.sidebartext {
    float:left; 
    font:11px Verdana, sans-serif; 
    width:130px; 
    padding:0px 5px;
    clear:right;
}

.subscribe {
    margin:11px 5px; 
    padding:4px 0px;  
    border-top: 1px solid #ccc;
}

.sidebartext a{
    color:#000000;
}

.sidebartext a:hover{
    text-decoration:underline;
}

.invert {
    float:left; 
    font:12px Verdana, sans-serif;  
    padding:5px 0px 0px 5px; 
}

#subscribeform input {
    font:14px Verdana, sans-serif;
    margin-bottom:15px;
    padding:3px 0px;
    display:block;
}

#subscribeform {
    margin-bottom:10px;
    font:13px Verdana, sans-serif;
}

.asterisk {
    color:red;
    font-weight:bold;
    display:inline;
}


#nav, #nav ul {
    float: left;
    width: 980px;
    font:11px Verdana, sans-serif;
    list-style: none;
    line-height: 1;
    background: white;
    font-weight: bold;
    padding: 0;
    border: solid #769841;
    border-width: 0;
    margin: 0 0 1em 0;
    background:#b6791e;
}

#nav a {
    display: block;
    width: 10.5em;
    w\idth: 10em;
    color: #fff;
    background-color:#b6791e;
    text-decoration: none;
    padding: 0.5em 0 0.5em 0.5em;
}

#nav a:hover {
    color:#fff;
    background-color:#769841;
}

#nav a.daddy {
    background: url(rightarrow2.gif) center right no-repeat;
}

#nav li {
    float: left;
    padding: 0;
    width: 10.5em;
    color: #fff;
    background-color:#b6791e;
}

#nav li li a:hover, #nav li:hover li a:hover{
    color:#fff;             /*controls link color on dropdowns*/
    background-color:#769841;
}

#nav li ul {
    position: absolute;
    left: -999em;
    height: auto;
    width: 13em;
    w\idth: 13em;
    border-width: 2px;
    margin: 0;
    font-weight:bold;
}

#nav li li {
    width: 13em;
}

#nav li ul a {
    width: 13em;
    w\idth: 12.5em;
}

#nav li ul ul {
    margin: -1.75em 0 0 14em;
}

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

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
}

#nav li:hover, #nav li.sfHover:hover{  /*controls area outside href when hovering over link, top row*/
    background: #769841;       
    color:#fff;
}

#nav li:hover a, #nav li.sfHover a {
    background: #769841;
    color:#fff;
}

#nav li li, #nav li li a, #nav li:hover li a, #nav li.sfHover a { /*controls background color on dropdown with no hover*/
    color:#769841;
    background-color:#fff;
}

#nav li li:hover, #nav  li.sfHover:hover li:hover {     /*controls area outside href when hovering over link, dropdown*/    
    background: #769841;       
    color:#fff;
}

1 answer

0
points
This was chosen as the best answer

This is a little known rendering bug caused by html comments between floated elements

remove any of these:

</div><!-- end header -->

type comments (put them inside the div if essential)

and your problem should go away!

or try the fix here: http://www.toastedweb.si/docs/ie_ghost_text_bug_fix.html

Answered almost 9 years ago by Tony Crockford
  • You are a legend. Next time I am in Sheffield let me buy you a beer Kevin Burke almost 9 years ago