hover problem IE x

[jkocovski]

folgendes problem, ich habe ein bgimage mit h und v linien. darüber stehen textlinks. jedet text link ist mit einer v-line von der grafik getrennt. bei einem hover möchte ich nun die h-line rot haben. das funktioniert soweit auch im FF nur der IE zeigt es nicht an, und ich finde irgendwie nix was mir hilft... hoffe ihr habt eine kreative idee ;-)

HTML

<div id="corenavi">
<ul>
	<li>					
		<a href="index.php?id=1" class="topnav">HOME</a>
		<a href="index.php?id=2" class="topnav">GHETTO NEWS</a>
		<a href="index.php?id=11" class="topnav">STORY</a>
		<a href="index.php?id=3" class="topnav">ROSTER</a>
		<a href="index.php?id=4" class="topnav">MEDIA</a>
		<a href="index.php?id=5" class="topnav">GO FOR IT</a>
	</li>
</ul>	

CSS

#corenavi{
	position: relative;
	width:700px;
	height:70px;
	text-align:right;
	z-index:1;
	margin-bottom:0px;
	margin-top:0px;
	margin-left:0px;
	background-image:url(img/bg_nav_image.gif);
	background-repeat:no-repeat;
}

#corenavi ul{
	padding-top:35px;
	padding-right:5px;
	margin:0px;
}

#corenavi ul li{
	font-size:8px;
	font-family:Arial, Helvetica, sans-serif;
	display:inline;
	list-style:none;
	margin:0px;	
	padding:0px;
}

a.topnav {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: 16px;
	font-weight: normal;
	font-variant: normal;
	text-transform: uppercase;
	text-decoration: none;
	color: #FFFFFF;
	letter-spacing: 0.08em;
	word-spacing: normal;
	padding:10px;
	}

a.topnav:hover, a.topnav:focus, a.topnav:active {
	color:#666666;
	padding:10px;
	border-bottom:1px;	
	border-bottom-color:#FF0000;
	border-bottom-style:solid;	
	text-decoration: none;
}	

tausend dank vorab für eure hilfe!!!

[Sand*mann]

http://www.css4you.de/pseudoklproperty.html

Da steht bei so ziemlich jeder Pseudoklasse, dass der IE bis 6 die Dinger nur bei <a> Tags interpretieren kann. Dass heißt, im CSS muss etwas stehen wie:
a:hover {}
o.ä.

Außerdem musst du nicht jedem Link noch ne Klasse verpassen. Du hast doch schon dem übergeordneten Div-Tag eine ID gegeben, also kann man das CSS besser so aufbauen: (womit das Problem im IE eigentl auch gelöst sein müsste)

#corenavi{
    position: relative;
    width:700px;
    height:70px;
    text-align:right;
    z-index:1;
    margin-bottom:0px;
    margin-top:0px;
    margin-left:0px;
    background-image:url(img/bg_nav_image.gif);
    background-repeat:no-repeat;
}

#corenavi ul{
    padding-top:35px;
    padding-right:5px;
    margin:0px;
}

#corenavi ul li{
    font-size:8px;
    font-family:Arial, Helvetica, sans-serif;
    display:inline;
    list-style:none;
    margin:0px;    
    padding:0px;
}

#corenavi ul li a {
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    line-height: 16px;
    font-weight: normal;
    font-variant: normal;
    text-transform: uppercase;
    text-decoration: none;
    color: #FFFFFF;
    letter-spacing: 0.08em;
    word-spacing: normal;
    padding:10px;
    }

#corenavi ul li a:hover, #corenavi ul li a:focus, #corenavi ul li a:active {
    color:#666666;
    padding:10px;
    border-bottom:1px;    
    border-bottom-color:#FF0000;
    border-bottom-style:solid;    
    text-decoration: none;
} 

[jkocovski]

gelöst... ich hatte es schonmal probiet wie du es vorgeschlagen hattest, leider ohne erfolg... die summe der a classes ist das resultat meiner verzweiflung gewesen...

gelöst hab ich es jetzt wie folgt... durch geistige umnachtung habe ich padding:10px bei den a classes eingestellt... somit verschwand der rote border hinter einer grafik ;-) padding reduziert, grössen angepasst...fehler behoben ;-)

oh mann... ich sollte wieder das rauchen anfangen ;-)

danke nochmal...