✔ Zeilenhöhe, line-height , wird im IE6 nicht dargestellt

Status
Nicht offen für weitere Antworten.
F

Fix&Foxi

Mitglied
Moin Moin,

die - Zeilenhöhe- wird im IE6 anders dargestellt als im FF(ohne Line-hight angabe) .

Habe es probiert über Line-hight 20 px , in der CSS, aber da tut sich nix im IE :confused:

Habt ihr bitte ein Lösung, damit das nicht so gequetscht aussieht.

http://www.mallorca-lifestyle.es/Restaurants.Mallorca/1E.Restaurantes.Mallorca.html


HTML: 
  <div  id="Mallorca_Lifestyle_cont_rubrik-Restaurantes"> 
  
    <h1 class="rubrikCenter">Restaurants Mallorca </h1>
    <br /><br /><br />
    <h3>
<a href="http://www.laconcha.tv" target="_blank">- La Concha  (Puerto Portals)</a><br /><br />
<a href="#"  onclick="MM_openBrWindow('../_Kunde.PopUp/Ms.The.Cooking.Company.Paguera.Restaurante.Mallorca.www.cooking-company.es.html','','scrollbars=yes,resizable=yes,width=1030,height=700')"> - M´s Restaurant &amp; Catering (Paguera) </a><br /><br />
<a href="#"  onclick="MM_openBrWindow('../_Kunde.PopUp/Mirador.de Cabrera.Klausmann.Es.Pas.de.Vallgornerai. Restaurante.Mallorca.www.klausmann-cooking.es.html','','scrollbars=yes,resizable=yes,width=1030,height=700')"> - Mirador de Cabrera (Es Pas de Vallgornera) </a><br /><br />
<a href="http://www.moli34.es/" target="_blank">- Moli 34 (Campos)</a><br /><br />
<a href="#"  onclick="MM_openBrWindow('../_Kunde.PopUp/Pura.Vida.Cala.Figuera.Restaurante.Mallorca.www.pura-vida-mallorca.com.html','','scrollbars=yes,resizable=yes,width=1030,height=700')"> - Pura Vida (Cala Figuera)</a><br /><br />
<a href="#"  onclick="MM_openBrWindow('../_Kunde.PopUp/Sa.Llotja.Porto Colom.Restaurantes.Mallorca.www.restaurantsallotjaportocolom.com.html','','scrollbars=yes,resizable=yes,width=1030,height=700')"> - Sa Llotja (Porto Colom) </a><br /><br />
- Sa Vinya Restaurante (Deiá)<br /><br />
<a href="http://www.seapalma.com/" target="_blank">- sea restaurant (Palma)</a><br /><br />
<a href="#"  onclick="MM_openBrWindow('../_Kunde.PopUp/Simply.Fosh.Palma.Restaurante.Mallorca.www.simplyfosh.com.html','','scrollbars=yes,resizable=yes,width=1030,height=700')"> - Simply Fosh (Palma) </a><br /><br />
<a href="#"  onclick="MM_openBrWindow('../_Kunde.PopUp/Sol.y.Vida.Restaurante.Cala.Murada.Mallorca.www.restaurante-solyvida.com.html','','scrollbars=yes,resizable=yes,width=1030,height=700')"> - Sol y Vida (Cala Murada) </a><br /><br />
<a href="http://www.varadero-portopetro.com/" target="_blank">- Varadero (Porto Petro)</a>
</h3>
</div>



Code: 
#Mallorca_Lifestyle_cont_rubrik-Restaurantes {
	float: right;
	width: 415px;
	height: 452px;
	margin-top: 17px;
	margin-right: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #435052;
	padding-right: 10px;
	text-align: left;
	padding-left: 30px;
	letter-spacing: 1px;
	padding-top: 0px;
	border: 2px solid #EE7F01;
	background-image: url(../_images/Rubrik/Mallorca.Lifestyle.Restaurante.jpg);
	background-repeat: no-repeat;
	background-attachment: scroll;
	display: inline;
	overflow: auto;
	line-height: 20px;
}



Danke für jede Hilfe
 
Hi,

die Zeilenhöhe lässt sich direkt auf die Links anwenden, und wird so auch vom IE6 korrekt interpretiert:
CSS: 
#Mallorca_Lifestyle_cont_rubrik-Restaurantes a { 
display:block; 
line-height:20px; 
}

mfg Maik
 
Jetzt vertuschen wieder die div´s und in der zeilenhöhe tut sich auch nix :(

http://www.mallorca-lifestyle.es/test.1D.Restaurants.Mallorca.html


Code: 
#Mallorca_Lifestyle_cont_rubrik-Restaurantes-test {
	float: right;
	width: 415px;
	height: 452px;
	margin-top: 17px;
	margin-right: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #435052;
	padding-right: 10px;
	text-align: left;
	padding-left: 30px;
	letter-spacing: 1px;
	padding-top: 0px;
	border: 2px solid #EE7F01;
	background-image: url(../_images/Rubrik/Mallorca.Lifestyle.Restaurante.jpg);
	background-repeat: no-repeat;
	background-attachment: scroll;
	display: block;
	overflow: auto;
	line-height: 20px;
	a: display:block; 
line-height:20px;
}

HTML: 
  <div  id="Mallorca_Lifestyle_cont_rubrik-Restaurantes-test"> 
  
    <h1 class="rubrikCenter">Restaurants Mallorca </h1>
    <br /><br /><br />
    <h3>
<a href="http://www.laconcha.tv" target="_blank">- La Concha  (Puerto Portals)</a><br /><br />
<a href="#"  onclick="MM_openBrWindow('_Kunde.PopUp/Ms.The.Cooking.Company.Paguera.Restaurante.Mallorca.www.cooking-company.es.html','','scrollbars=yes,resizable=yes,width=1030,height=700')"> - M´s Restaurant &amp; Catering (Paguera) </a><br /><br />
<a href="#"  onclick="MM_openBrWindow('_Kunde.PopUp/Mirador.de Cabrera.Klausmann.Es.Pas.de.Vallgornerai. Restaurante.Mallorca.www.klausmann-cooking.es.html','','scrollbars=yes,resizable=yes,width=1030,height=700')"> - Mirador de Cabrera (Es Pas de Vallgornera) </a><br /><br />
<a href="http://www.moli34.es/" target="_blank">- Moli 34 (Campos)</a><br /><br />
<a href="#"  onclick="MM_openBrWindow('_Kunde.PopUp/Pura.Vida.Cala.Figuera.Restaurante.Mallorca.www.pura-vida-mallorca.com.html','','scrollbars=yes,resizable=yes,width=1030,height=700')"> - Pura Vida (Cala Figuera)</a><br /><br />
<a href="#"  onclick="MM_openBrWindow('_Kunde.PopUp/Sa.Llotja.Porto Colom.Restaurantes.Mallorca.www.restaurantsallotjaportocolom.com.html','','scrollbars=yes,resizable=yes,width=1030,height=700')"> - Sa Llotja (Porto Colom) </a><br /><br />
- Sa Vinya Restaurante (Deiá)<br /><br />
<a href="http://www.seapalma.com/" target="_blank">- sea restaurant (Palma)</a><br /><br />
<a href="#"  onclick="MM_openBrWindow('_Kunde.PopUp/Simply.Fosh.Palma.Restaurante.Mallorca.www.simplyfosh.com.html','','scrollbars=yes,resizable=yes,width=1030,height=700')"> - Simply Fosh (Palma) </a><br /><br />
<a href="#"  onclick="MM_openBrWindow('_Kunde.PopUp/Sol.y.Vida.Restaurante.Cala.Murada.Mallorca.www.restaurante-solyvida.com.html','','scrollbars=yes,resizable=yes,width=1030,height=700')"> - Sol y Vida (Cala Murada) </a><br /><br />
<a href="http://www.varadero-portopetro.com/" target="_blank">- Varadero (Porto Petro)</a>
</h3>
</div>
 
So hab ich das auch nicht vorgeschlagen:
Code: 
#Mallorca_Lifestyle_cont_rubrik-Restaurantes-test {
	float: right;
	width: 415px;
	height: 452px;
	margin-top: 17px;
	margin-right: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #435052;
	padding-right: 10px;
	text-align: left;
	padding-left: 30px;
	letter-spacing: 1px;
	padding-top: 0px;
	border: 2px solid #EE7F01;
	background-image: url(../_images/Rubrik/Mallorca.Lifestyle.Restaurante.jpg);
	background-repeat: no-repeat;
	background-attachment: scroll;
	display: block;
	overflow: auto;
	line-height: 20px;
	a: display:block; 
line-height:20px;
}


Sondern vielmehr so:
CSS: 
#Mallorca_Lifestyle_cont_rubrik-Restaurantes {
	float: right;
	width: 415px;
	height: 452px;
	margin-top: 17px;
	margin-right: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #435052;
	padding-right: 10px;
	text-align: left;
	padding-left: 30px;
	letter-spacing: 1px;
	padding-top: 0px;
	border: 2px solid #EE7F01;
	background-image: url(../_images/Rubrik/Mallorca.Lifestyle.Restaurante.jpg);
	background-repeat: no-repeat;
	background-attachment: scroll;
	display: inline; /* "Doubled Float-Margin-Bug"-Fix im IE6 */
	overflow: auto;
}
#Mallorca_Lifestyle_cont_rubrik-Restaurantes a {
    display: block;
    line-height: 20px;
}

mfg Maik
 
wunderbar...musste nur noch mal im div auf inline wechseln für das typische verrutschen

jetzt nur noch eine sache, da ich ein restaurant in der Liste hab die keine verlinkung hat, kann die ja nicht auf die neue CSS regel zugreifen....was soll ich da im html code eingeben?

vieleicht "#" bei hyperlinke? Finde ich aber nicht so dolle :(

schau mal selber :
http://www.mallorca-lifestyle.es/test.1D.Restaurants.Mallorca.html

HTML: 
<a href="#"  onclick="MM_openBrWindow('_Kunde.PopUp/Sa.Llotja.Porto Colom.Restaurantes.Mallorca.www.restaurantsallotjaportocolom.com.html','','scrollbars=yes,resizable=yes,width=1030,height=700')"> - Sa Llotja (Porto Colom) </a><br /><br />
- Sa Vinya Restaurante (Deiá)<br /><br />
<a href="http://www.seapalma.com/" target="_blank">- sea restaurant (Palma)</a><br /><br />
 
Du kannst die Zeile in ein <span> einbetten:
HTML: 
<span>- Sa Vinya Restaurante (Deiá)</span>
und erweiterst den Selektor folgendermaßen:
Code: 
#Mallorca_Lifestyle_cont_rubrik-Restaurantes a, #Mallorca_Lifestyle_cont_rubrik-Restaurantes span {
    display: block;
    line-height: 20px;
}


mfg Maik
 
Super klappt

Das die Zeilenhöhe bei IE am kleinsten ist, bei FF mittelgroß und im Safari am größten

Denke damit muß ich wohl leben ....oder gibt es da noch eine CSS regel ?
 
Das wird wohl mit den beiden <br />-Tags am Ende der Zeilen zusammenhängen.

Entferne diese mal, und nimm stattdessen diese Regel im CSS auf:
CSS: 
#Mallorca_Lifestyle_cont_rubrik-Restaurantes a, #Mallorca_Lifestyle_cont_rubrik-Restaurantes span {
    display: block;
    line-height: 20px;
    margin-top: 15px; /* Außenabstand nach oben - Wert ist von mir frei gewählt */
}

mfg Maik
 
komm der sache immer näher

Leider verkrößern sich die zeilenhöhe wenn ich die magin erhöhe, bin jetzt bei :

Code: 
#Mallorca_Lifestyle_cont_rubrik-Restaurantes-test a, #Mallorca_Lifestyle_cont_rubrik-Restaurantes-test span{
	display:block;
	line-height:0px;
	margin-top: 35px; /* Außenabstand nach oben - Wert ist von mir frei gewählt */
}

unter line-height:0px kann ich ja nicht gehen....ist aber ok

jetzt habe ich nach der h1 die zwei <br/> auch noch weg genommen, daraus ergibt sich, das Safari und IE gleich aussehen aber nun im FF ein großer abstand zwischen der h1 und h3


nah ja 100 mal besser als vorher

http://www.mallorca-lifestyle.es/tes....Mallorca.html
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück