✔ text-decoration und Internet Explorer

[123arne]

Hallo,
bin mal wieder etwas IE-geplagt.
Ich habe ein etwas aufwendigeres Menü gestaltet, das beim hover-Effekt bestimmte Informationen zum Link liefert. Leider wird der Text im IE immer unterstrichen angezeigt, trotz text-decoration:none. Firefox arbeitet problemlos.
Ich denke im Quellcode wird das Problem deutlicher.

#box a {
    text-decoration:underline;
    display:block;
    width:200px;
    height:50px;
    border:1px solid black;
    margin: 2px 0 0 50px;
    text-align: right;
    font-weight:bold;
    padding:3px;
    color:black; /*#DEE6F7;*/
    background-color:transparent; /*#0099FF;*/
}

#box a:hover {
    color:black;
    background-color: #FFFFFF;
}

#box a span {
    display:none;
}


#box a:hover span {
position: absolute; top:80px; right:50px; z-index:3;
text-decoration:none;
text-align:left;
font-weight:normal;
display:block;
width:400px;
color:black;
background:none; 
padding:10px;
}

Eingebunden in HTML wird es dann so:

    <a href="#">Linktitel, der unterstrichen sein soll
        <span>
        <p>Dies sind die zusätzlichen Infos, deren Text meist länger und teilweise
 formatiert ist und NICHT unterstrichen werden soll....</p>
        </span>    </a>

Hoffe auf eure Hilfe und sage Danke
Arne

 

[Maik]

Hi,

wie es scheint, stört sich der IE an der Breiten- und Höhenangabe für den Link.

Vielleicht hilft dir dieses Modell weiter, das ich um ein weiteres span-Element erweitert habe, um für jedes den gewünschten text-decoration-Wert zu setzen.

#box a {
    text-decoration:none;
    display:block;
    width:200px;
    height:50px;
    border:1px solid black;
    margin: 2px 0 0 50px;
    text-align: right;
    font-weight:bold;
    padding:3px;
    color:black; /*#DEE6F7;*/
    background-color:transparent; /*#0099FF;*/
}

#box a:hover {
    color:black;
    background-color: #FFFFFF;
}

#box a span { text-decoration:underline; }
#box a span span { text-decoration:none; }

#box a span span {
    display:none;
}

#box a:hover span span {
position: absolute;
top:80px;
right:50px;
z-index:3;
text-align:left;
font-weight:normal;
display:block;
width:400px;
color:black;
background:none;
padding:10px;
}

<div id="box">
     <a href="#">
        <span>Linktitel, der unterstrichen sein soll
             <span>Dies sind die zusätzlichen Infos, deren Text meist länger und teilweise formatiert ist und NICHT unterstrichen werden soll....</span>
        </span>
     </a>
</div>

Übrigens, ein Block-Element, wie das von dir eingesetzte p-Element, darf nicht in einem Inline-Element enthalten sein - auch dann nicht, wenn das span-Element mit display:block ausgezeichnet ist.

 

[123arne]

wie es scheint, stört sich der IE an der Breiten- und Höhenangabe für den Link.

genau betrachtet war es das display:block

Übrigens, ein Block-Element, wie das von dir eingesetzte p-Element, darf nicht in einem Inline-Element enthalten sein - auch dann nicht, wenn das span-Element mit display:block ausgezeichnet ist.

werde ich berücksichtigen, auch wenn es keine Probleme macht.

Jedenfalls hat es die Lösung mit dem erweiterten span-Element gebracht.

Besten Dank
Arne