# <p> innerhalb <a> nicht unterstreichen



## Transporter (13. Dezember 2012)

Hallo,

ich habe innerhalb eines <a> Links Text mit <p> eingefügt.

<A> hat

```
a:hover { text-decoration: underline }
```

<P> soll beim Hovern aber nicht unterstrichen werden. 

Im IE, Firefox, Chrome und opera funktioniert es einwandfrei. Im Maxthon und Safari wird der Text immer auch unterstrichen.


```
p { text-decoration: none }
```
funktioniert auch nicht!


----------



## Bacardi1539 (13. Dezember 2012)

Müsste nicht in der css a {text-decoration: none} stehen? dann würden die <a> tags immer normal sein und sobalt du hoverst werden sie unterstrichen..

```
also:
a {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}
```
So kenne ich das zumindest..


----------



## Bacardi1539 (13. Dezember 2012)

Achso und.. dreh das mal lieber um.. sodass der <a> tag innerhalb des <p> tags ist..

EDIT: Schau mal hier: http://www.mediaevent.de/xhtml/Xhtml-Block.html


----------



## Transporter (14. Dezember 2012)

Hallo,

daß wäre schön, geht aber leider nicht!
<P> wird nur angezeigt wenn <A> gehovert wird. Darum ist

```
a { text-decoration: none }
```

und

```
a:hover { text-decoration: underline }
```

aber dann leider der innere <p> auch unterstrichen.
Zumindest im  Maxthon und Sarafi!


----------



## chmee (14. Dezember 2012)

Nun, was soll's. *p darf nicht Kindelement von a sein*, das sagt nunmal die HTML-Referenz.
http://de.selfhtml.org/html/referenz/elemente.htm

Löse es mit Javascript.
mfg chmee

Auch, wenn ich mich gegen die Lösung sträube, funktioniert es wohl, wenn Du p als inline-block definierst.
http://jsfiddle.net/nXYMm/9/

mfg chmee


----------



## djheke (15. Dezember 2012)

```
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">	

span {
 float:right;
 margin-left:5px;
 color:#f00;
}

a  {
 text-decoration:none;
 padding:5px;
 background:#ddd;
 float:left;
}

a:hover {
 text-decoration:underline;
}
</style>
</head>
<body>
<p><a href="#">Linkziel<span>Linktext</span></a></p>
</body>
</html>
```
So geht's.


----------



## djheke (15. Dezember 2012)

Mist, geht doch nicht.


----------



## Jan-Frederik Stieler (15. Dezember 2012)

Hi,
mal die Frage warum benötgst du überhaupt einen Paragraphen innerhalb des Anchor-Elementes?

Nur mal so als Fussmarke, mit einem HTML 5-Doctype wäre das Blockelement auch im Inlinelement erlaubt.
Aber bitte nicht vergessen HTML 5 ist noch in der Entwicklung und nicht jeder Browser kann es vernünftig.

Viele Grüsse


----------



## threadi (16. Dezember 2012)

Es sollte gehen, wenn Du


```
a:hover span { text-decoration: none; }
```

ergänzt.


----------



## djheke (16. Dezember 2012)

threadi hat gesagt.:


> Es sollte gehen, wenn Du
> 
> 
> ```
> ...



Funtioniert leider auch nicht. Zumindestens im Arora (Safari) nicht. AAABER umgekehrt gehts.


```
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">	

p {
 float:left;
 padding:5px;
 background:#ddd;
}

span {
 float:right;
 margin-left:5px;
 color:#f00;
}

a  {
 text-decoration:none;
 background:#ddd;
 float:left;
}

a:hover span {
 text-decoration:underline;
}

a:active , a:active span {
 color:#000;
}


</style>
</head>
<body>
<p><a href="#">Text-decoration:none<span>text-decoration:underline</span></a></p>
</body>
</html>
```


----------



## hela (16. Dezember 2012)

Hallo,

wenn die Browser halt so reagieren, dann würde ich alles (also jeden Text) innerhalb des A-Elements in irgendwelche Tags verpacken.
Beispiel:

```
<!DOCTYPE html>
<title>Test</title>
<style type="text/css">
	p {
		margin: 0;
		padding: 0;
		color: black;
	}
	a {
		text-decoration: none;
	}
	a:hover * {
		text-decoration: underline;
	}
	a:hover p {
		text-decoration: none;
		color: red;
	}
</style>
<a href="#">
	<span>Linkziel</span>
	<p>Linktext</p>
</a>
```


----------

