Zur Navigation

Mozilla ignoriert height-Wert

1 Domenika

Hallo

Der Mozilla treibt mich gerade in den Wahnsinn! (Mozilla 2.0.0.6 auf PC)

Ich habe ein div mit einem background-image (height:27px). Obwohl ich im css explizit die height:27px angebe, schneidet er das div ab, auf die Höhe des Textes. Somit ist nur das halbe Bild zu sehen. Egal, wie groß ich die Höhe einstelle, der Mozilla ignoriert diesen Wert.

Hier mal der Code im HTML:


<div id="aufklapper1" class="klasse1">
<a href="javascript:aufklappen('aufklapp1','aufklapper1','klasse1','klasse2');">Lesen Sie hier weiter...</a>
</div>
<br>
								
<div id="aufklapp1" style="display:none;" class="aufklapptext">... weiter</div>


CSS

.klasse1 {
	margin-top:5px;
	font-family:verdana;
	font-size:11px;
	font-weight:bold;
	height:27px;
	line-height:27px;
}
.klasse1 a, a.klasse1:hover, a.klasse1:visited {
	height:27px;
	line-height:27px;
	padding-left:30px;
	text-decoration:underline;
	background-image:url(/Graphics/allgemein/buttons/pfeil_unten_change.gif);
	background-repeat:no-repeat;
}
.klasse1 a {
	color:#3131CE;
	background-position:0px 0px;
	font-weight:bold;
	height:27px;
	line-height:27px;
}
.klasse1 a:hover {
	color:#FF6600;
	background-position:0px -27px;
	height:27px;
	line-height:27px;
}
.klasse2 {
	margin-top:5px;
	height:27px;
	line-height:27px;
	font-family:verdana;
	font-size:11px;
	font-weight:bold;
}
.klasse2 a,.klasse2 a:hover {
	height:27px;
	line-height:27px;
	padding-left:30px;
	text-decoration:underline;
	background-image:url(/Graphics/allgemein/buttons/pfeil_oben_change.gif);
	background-repeat:no-repeat;
}
.klasse2 a {
	color:#3131CE;
	background-position:0px 0px;
	height:27px;
	line-height:27px;
}
.klasse2 a:hover {
	color:#FF6600;
	background-position:0px -27px;
	height:27px;
	line-height:27px;
}


Der Vollständigkeit halber, to whom it may concern:

<script type="text/javascript" language="javascript">
<!--
function aufklappen(aufklapp_id,aufklapper_id,klasse1,klasse2) {
	if (document.getElementById(aufklapp_id).style.display=="none") {
		document.getElementById(aufklapp_id).style.display="block";
		document.getElementById(aufklapper_id).className=klasse2;
	} else {
		document.getElementById(aufklapp_id).style.display="none";
		document.getElementById(aufklapper_id).className=klasse1;
	}
}
//-->
</script>

Fällt jemanden was dazu ein?

Danke :)

Domenika

04.09.2007 10:57

2 Jörg

Hallo Domenika,

Inline-Elemente sind nur so hoch wie ihr Inhalt. Wenn du den Link mit display:block zu einem Blockelement machst, wird dessen eigene Höhe angezeigt

.klasse1 a, a.klasse1:hover, a.klasse1:visited {
display:block;
height:27px;
line-height:27px;
padding-left:30px;
text-decoration:underline;
background-image:url(/Graphics/allgemein/buttons/pfeil_unten_change.gif);
background-repeat:no-repeat;
}

04.09.2007 11:24 | geändert: 04.09.2007 11:29

3 Domenika

NEIN! Das kann doch nicht sein?! Es funktioniert :)
Das hatte ich auch im Original-Code, bis ich dran rumgestylt hatte... da muss es irgendwie rausgeflogen sein. Sehr schlau Domenika ;)

Danke Dir mal wieder für die schnelle, effektive Hilfe!

04.09.2007 11:37

Beitrag schreiben (als Gast)





[BBCode-Hilfe]