IE - Keine durchgängige Linkunterstreichung

Status
Nicht offen für weitere Antworten.
F

Fexxx

Mitglied
Hy, sobald eine Link über mehrere Zeilen geht, wird die Unterstreichung vom IE nicht korrekt dargestellt, aber seht selbst:

IE Link

Edit: ok liegt wohl an dem "border bottom", gibt es da einen Workaround oder Ähnliches?
 
Hi,

versuch es mal damit und mal dem border ein Pixel Strich oder so, wenn es sein muss.

HTML: 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
<title>Test</title>
<style type="text/css">
html, body {
font-family :Verdana, Helvetica, sans-serif;
font-size: 11px;
text-align:center;
margin: 0px;
padding-top: 3px;
}
#wallpaper{
line-height:12px;
font-size:9px;
margin-top: 0px;
color: #000000;
margin-left: 90px;
width:100px;
height:auto;
}
a.fliestext:link, a.fliestext:visited {
color : #821515;
text-decoration:none;
padding-bottom:2px;
background: url(images/css-dotted2.gif) repeat-x bottom;
}
 
a.fliestext:hover,{
color : #821515;
text-decoration:underline;
background: url(images/0.gif) no-repeat bottom;
}
a.fliestext:active,{
color : #821515;
text-decoration:none;
border-bottom: 1px solid #821515;
background: url(images/0.gif) no-repeat bottom;
}
 
 
</style>
</head>
<body>
<div id="wallpaper"><a class="fliestext" href="#">Warum unterstreicht der IE den Link nich von oben bis unten? </a></div>
 
</body>
</html>

gruß
feh
 
Fexxx hat gesagt.:
der gepunktete Unterstrich sollte eben ehalten beleiben. Scheint aber wohl aussichtslos?
Zum Vergrößern anklicken....
Dieser gepunktete Unterstrich ist doch die Grafik css-dotted2.gif ?

CSS-Code:
Code: 
.fliestext a:hover{
line-height:16px;
color:#821515;
text-decoration:underline;
background: url(images/css-dotted2.gif) repeat-x bottom;	
}
 
Warum unterstreicht der IE den Link nich von oben bis unten?
Zum Vergrößern anklicken....
Eines der vielen Mysterien des Internet Explorers. Versuch mal Folgendes:
Code: 
a:link,
a:visited {
	color:			#821515;
	text-decoration:	none;
	border-bottom:		thin dotted #821515;
}
a:link:hover,
a:visited:hover {
	border-bottom-style:	solid;
}
 
Ich hab's gerade ausprobier: Mal wieder eines der vielen Mysterien des Internet Explorers. Probier mal Folgendes:
HTML: 
<style type="text/css">
p {
	padding-bottom:		0.25em;
	width:			10em;
	line-height:		1.2;
	text-align:		center;
	background-color:	#eee;
}
a.fließtext:link,
a.fließtext:visited {
	color:			#821515;
	text-decoration:	none;
	border-bottom:		thin dotted #821515;
}
a.fließtext:link:hover,
a.fließtext:visited:hover {
	border-bottom-style:	solid;
}
</style>

<p><a class="fließtext" href="#">Warum unterstreicht der IE den Link nich von oben bis unten?</a></p>
 
Das Geheimnis:

text-decoration:none;
border-bottom:1px dotted #000000;

und das bei a:link, a:visited und auch bei a:active und a:hover. Dann bleibt die Punktlinie erhalten und wird nicht durch text-decoration überlagert.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück