White Text appears see through in IE8

[KeredDrahcir]

I have a list that displays over the text when a user hovers over it but in IE the white text appears as if has been cut out of the box so that you can see text behind the list through it.

I've tried finding a solutions for this and found only one other person getting this problem without any replies.

[Rabbit]

Can't help without seeing the code.

[KeredDrahcir]

This isn't a known issue then?

[Rabbit]

I'm sure someone out there knows the issue. Your best bet is to post the code so even if it isn't a known issue, someone can look at the code and help. And even if the person knows the issue, it could have multiple causes.

[KeredDrahcir]

Okay, I've managed to get the code together. This is the HTML:

<ul id="topnav">
  <li class="menufirst">
    <a></a>
  </li>
  <li >
    <a href="[I]path[/I]">Mobili da giardino</a>
    <div class="sub">
      <ul>
        <li >
          <h2 class="sub-head">
            <a href="[I]path[/I]">Mobili da giardino</a>
          </h2>
        </li>
        <li>
          <a href="[I]path[/I]">Panchina da giardino</a>
        </li>
        <li>
          <a href="[I]path[/I]">Romano Parasol</a>
        </li>
      </ul>
    </div>
  </li>
  <li >
    <a href="[I]path[/I]">Fontane ornamentali</a>
    <div class="sub">
      <ul>
        <li >
          <h2 class="sub-head">
            <a href="[I]path[/I]">Fontane ornamentali</a>
          </h2>
        </li>
        <li>
          <a href="[I]path[/I]">Testa di leone</a>
        </li>
      </ul>
    </div>
  </li>
  <li >
    <a href="[I]path[/I]">Vacanze in Italia</a>
    <div class="sub">
      <ul>
        <li >
          <h2 class="sub-head">
            <a href="[I]path[/I]">Vacanze in Italia</a>
          </h2>
        </li>
        <li>
          <a href="[I]path[/I]">Vacanze in Toscana</a>
        </li>
      </ul>
      <ul>
        <li >
          <h2 class="sub-head">
            <a href="[I]path[/I]">Città</a>
          </h2>
        </li>
        <li>
          <a href="[I]path[/I]">Citta Toscane</a>
        </li>
        <li>
          <a href="[I]path[/I]">Venezia</a>
        </li>
      </ul>
    </div>
  </li>
  <li class="menulast">
    <a></a>
  </li>
</ul>

Here is the css:

ul#topnav {
	margin: 0 0 10px;
	padding: 0;
	float:left;
	list-style: none;
	font-size: 1.1em;
	width:100%;
} 

ul#topnav li {
	background-color:#8c0000;
	float: left;
	margin: 0 1px 0 0; 
	padding: 0;
	position: relative; 
}
ul#topnav li:hover {
	background-color:#ab0000;
	float: left;
	margin: 0 1px 0 0; 
	padding: 0;
	position: relative; 
}

ul#topnav .menufirst {
	width:10px;
	background-color:#8C0000;
	float: left;
	margin: 0 1px 0 0 !important; 
	padding: 0;
	position: relative; 
	-moz-border-radius: 5px 0 0 5px;
	-khtml-border-radius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	 pointer-events: none;
	 cursor: default;
}
ul#topnav .menulast {
	width:10px;
	background-color:#8C0000;
	float: left;
	margin: 0 !important; 
	padding: 0;
	position: relative; 
	-moz-border-radius: 0 5px 5px 0;
	-khtml-border-radius: 0 5px 5px 0;
	-webkit-border-radius: 0 5px 5px 0;
	 pointer-events: none;
	 cursor: default;
}

ul#topnav li a {
	color:#ffffff;
	font-size:14px;
	font-weight:700;
	float: left;
	height: 28px;
	padding: 4px 10px;
}

ul#topnav li a:hover { 
	background-position: left bottom; 
	color:#ffffff;
	text-decoration:none;
	padding: 4px 10px;
} 

ul#topnav li .sub {
	border: 3px solid #ab0000;
	position: absolute;
	top: 35px; 
	left: 0;
	z-index: 99999;
	background-color: #ffffff !important;
	padding: 5px 5px 5px;
	float: left;
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	display: none; /*--Hidden for those with js turned off--*/
}

ul#topnav li .row {
	clear: both;
	float: left;
	width: 100%;
	margin-bottom: 10px;
}

ul#topnav li .sub ul{
	list-style: none;
	margin: 0; 
	padding: 0;
	width: 175px;
	float: left;
	background-color: #ffffff !important;
}

ul#topnav .sub ul li {
	background-color: #ffffff !important;
	width: 100%;
}

ul#topnav .sub ul li h2 {
	text-align:center;
	color:#e8e000;
	padding: 0;  
	margin: 0;
	background-color: #ffffff !important;
}

ul#topnav .sub-head {
	padding: 0;  
	margin: 0;
	font-size: 1.3em;
	font-weight: normal;
}

ul#topnav .sub-head a {
	padding: 5px 0;
	background-image: none;
	color: #e8e000;
}

ul#topnav .sub ul li h2 a {
	background-color:#dedede;
	font-size: 11px !important;
	font-weight: bold !important;
	padding: 5px 0;
	margin:2px 2px 1px 1px;
	background-image: none;
	color: #3f3f3f;
	-moz-border-radius: 5px 5px 5px 5px;
	-khtml-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
}

ul#topnav .sub ul li h2 a:hover {
	background-color:#ab0000;
	font-size: 11px !important;
	font-weight: bold !important;
	padding: 5px 0;
	margin:2px 2px 1px 1px;
	background-image: none;
	color: #ffffff !important;
	-moz-border-radius: 5px 5px 5px 5px;
	-khtml-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
}

ul#topnav .sub ul li a {
	color:#3f3f3f !important;
	font-size: 12px !important;
	font-weight:normal !important;
	float: none;
	text-indent: 0;
	height: auto;
	margin:2px 2px 1px 1px;
	padding: 1px 5px 0;
	display: block;
	text-decoration: none;
}

ul#topnav .sub ul li a:hover {
	background:#cccccc;
	color: #3f3f3f !important;
	background-position: 5px 12px;
	-moz-border-radius: 5px 5px 5px 5px;
	-khtml-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
}

[Rabbit]

I ran this in IE8 and I'm not seeing any extra text.

[KeredDrahcir]

Did you have any text behind it? When the drop down comes down, when I hover over the links that turn white, the text behind showed through.

[Rabbit]

I didn't see anything behind it. The only thing that changed was the background changed color slightly and the link was no longer underlined.

[KeredDrahcir]

That's wierd. There was one other person getting this problem when I tried to Google the solution before coming here but he hadn't had any replies. Maybe I should start from the orgional and change it gradually until I see where the problem is.

Thanks for trying. I'll let you know if I figure it out.

[webspectyler]

Had a similar issue in IE8 - resolved it by setting position:static on the text that was rendering as see-through (we have it in an anchor tag).