Zeilenhöhe, line-height , wird im IE6 nicht dargestellt @ tutorials.de: Tutorials, Forum & Hilfe

Fix&Foxi · 05.11.09 11:26

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

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

http://www.mallorca-lifestyle.es/Res....Mallorca.html

HTML-Code:

  <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

awortmeier · 05.11.09 11:35

http://www.positioniseverything.net/...heightbug.html

Maik · 05.11.09 12:14

Hi,

die Zeilenhöhe lässt sich direkt auf die Links anwenden, und wird so auch vom IE6 korrekt interpretiert:

Code css:

#Mallorca_Lifestyle_cont_rubrik-Restaurantes a { 
display:block; 
line-height:20px; 
}

mfg Maik

Fix&Foxi · 05.11.09 12:41

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

http://www.mallorca-lifestyle.es/tes....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-Code:

  <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>

Maik · 05.11.09 12:43

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;
    [b][color=red]display: block;[/color][/b]
    overflow: auto;
    line-height: 20px;
    [B][COLOR="Red"]a: display:block; 
line-height:20px;[/COLOR][/B]
}

Sondern vielmehr so:

Code 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

Fix&Foxi · 05.11.09 13:13

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/tes....Mallorca.html

HTML-Code:

<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 />

Maik · 05.11.09 13:16

Du kannst die Zeile in ein <span> einbetten:

HTML-Code:

<span>- Sa Vinya Restaurante (Deiá)</span>

und erweiterst den Selektor folgendermaßen:

Code :

#Mallorca_Lifestyle_cont_rubrik-Restaurantes a[b], #Mallorca_Lifestyle_cont_rubrik-Restaurantes span[/b] {
    display: block;
    line-height: 20px;
}

mfg Maik

Fix&Foxi · 05.11.09 13:32

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 ?

Maik · 05.11.09 13:37

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:

Code 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

Fix&Foxi · 05.11.09 14:24

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

Maik · 05.11.09 14:35

Versuch es nochmal mit meinem Vorschlag, aber diesmal so:

Code 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;
    overflow: auto;
    /*line-height: 20px;*/ /* auskommentiert = deaktiviert */
}

mfg Maik

Fix&Foxi · 05.11.09 15:02

wenn ich line-height deaktiviere tut sich leider nix im FF

was mir aber noch auffällt , bei IE ist der letzte Restaurant Name abgeschnitten ( schon vor dem div ende) ohne das overflow: Auto; aktiviert wird...das ist natürlich bockmist für denn kunden.
Sollte ich da pedding-bottem auf 0 oder 10 px setzten?

http://www.mallorca-lifestyle.es/tes....Mallorca.html

Maik · 05.11.09 15:11

Mit meinen Vorschlägen stimmen bei mir lokal die vertikalen Abstände zwischen den Links browserübergreifend überein. Und im IE6 wird da auch nichts abgeschnitten.

mfg Maik

P.S. Dein Link ist verstümmelt und führt daher auf eine 404-Fehlerseite.

Fix&Foxi · 05.11.09 15:21

bei dem Link: http://www.mallorca-lifestyle.es/tes....Mallorca.html ?

Auch im FF zwischen der h1 und h3?

Du musst wissen IE schaue ich mir auf meine MAC über das zusatz Programm VMmare fusion über xp IE 6 an / evtl gibt es da unterschiede)

Wenn das jetzt aber bei ok aussieht , dann mache ich das in denn anderen rubriken auch so

Maik · 05.11.09 15:22

Zitat von Fix&Foxi

bei dem Link: http://www.mallorca-lifestyle.es/tes....Mallorca.html ?

Klick doch einfach drauf

Zitat von Fix&Foxi

Auch im FF zwischen der h1 und h3?

Setz mal zu Beginn des Stylesheets diese Regel ein:

Code css:

* {
margin:0;
padding:0;
}

... und definiere ggfs. dort einen Außen- und/oder Innenabstand, wo er tatsächlich erwünscht ist.

mfg Maik

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Unterschiedliche line-height Werte

IE ignoriert line-height?

height wird nicht richtig dargestellt

line-height verhalten im IE

Opera und line-height;

E-Mail:

Abonnieren Abbestellen