[GastForen Web allgemein HTML und CSS / Stylesheets Rätselhafte Zeilenabstände

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Rätselhafte Zeilenabstände

chucke
Beiträge gesamt: 32

6. Feb 2007, 23:03
Beitrag # 1 von 7
Bewertung:
(2361 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Liebes Forum,

ich habe ein Problem auf der Website, die ich gerade erstelle, und komme einfach nicht darauf woran es liegt.

Ich habe verschiedene Links untereinander aufgelistet, das habe ich mit eine Liste gelöst. Nun sind am PC (ich arbeite am Mac, da tritt das Problem in keinem Browser auf) im IE (bei den anderen Browsern weiß ich es nicht genau) ganz sonderbar unterschiedliche Zeilenabstände zwischen manchen Zeilen, die ich mir einfach nicht erklären kann.

Kann sich mal jemand die Seite (am PC!) angucken unter http://www.marginalie.de/test2/staebau.html und mir vielleicht einen Tipp geben?

Der relevante Teil vom Stylesheet sieht so aus:

Code
html, body, ul, ol, li, p, h1, h2 { 
margin: 0px;
padding: 0px;
border: 0px;
}

body {
background-color: #C0C099;
color: #C9D1C9;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: small;
line-height: 1.8em;
text-align: center;
letter-spacing: 0,5px;
}

* html body {
font-size: x-small; /* nur für IE5/WIN */
f\ont-size: small; /* für andere Versionen IE */
}

h1 {
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 130%;
color: #990000;
background-color: inherit;
padding-top: 9px;
padding-left: 400px;
font-weight: 600;
letter-spacing: 2px;
}

h2 {
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 100%;
color: #D5D58E;
background-color: inherit;
line-height: 1.8em;
font-weight: normal;
letter-spacing: 3px;
}

a {
color: #D5D58E;
text-decoration: none;
}

#kopf {
margin: 0 auto 0 auto;
width: 750px;
height: 2.5em;
background-color: #D5D58E;
}

#menu {
margin: 0 auto 0 auto;
width: 750px;
height: 9em;
background-color: #C9D1C9;
text-align: left;
}

#wrapper {
margin: 0 auto 0 auto;
width: 750px;
height: 27.6em;
text-align: left;
background-color: inherit;
color: #C9D1C9;
border: 1px;
}

#rechts {
position: absolute;
margin: 0 auto 0 auto;
padding: 0.5em 10px 1em 290px;
width: 450px;
height: 40em;
background-color: #550000;
}

#rechts_2 {
position: absolute;
margin: 0 auto 0 auto;
padding: 0.5em 10px 1em 290px;
width: 450px;
height: 26.1em;
background-color: #274550;
}

#rechts ul li {
float: none;
width: auto;
background-color: #550000;
color: #C9D1C9;
}

#rechts ul li a {
padding: 0;
background-color: inherit;
color: #C9D1C9;
}

#rechts ul li a:hover {
background-color: #550000;
color: #D5D58E;
}


Wäre super wenn jemand eine Idee hat!

Vielen Dank schonmal!

Christina
X

Rätselhafte Zeilenabstände

SabineP
Beiträge gesamt: 7586

7. Feb 2007, 00:22
Beitrag # 2 von 7
Beitrag ID: #274756
Bewertung:
(2356 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Christina,

es liegt am em, die Browser interpretieren diese Einheit recht unterschiedlich.
line-height: 1.8em;


Und halbe Pixel gibts natürlich nicht. :-)
letter-spacing: 0,5px;

Gruß Sabine


als Antwort auf: [#274748]

Rätselhafte Zeilenabstände

GwenDragon
Beiträge gesamt:

7. Feb 2007, 12:03
Beitrag # 3 von 7
Beitrag ID: #274864
Bewertung:
(2343 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Antwort auf [ SabineP ] Hallo Christina,

Und halbe Pixel gibts natürlich nicht. :-)
letter-spacing: 0,5px;

Sollte wohl ein Halbes en oder em sein, oder?
Und das , bei Einheiten schon gar nicht. Es mus ein . sein.

Zitat * html body {
font-size: x-small; /* nur für IE5/WIN */
f\ont-size: small; /* für andere Versionen IE */
}

Du solltest lieber Conditional Comments für den IE verwenden und keine solchen Konstrukte wie f\ont, das ist kein gültiges CSS.


als Antwort auf: [#274756]
(Dieser Beitrag wurde von GwenDragon am 7. Feb 2007, 12:08 geändert)

Rätselhafte Zeilenabstände

chucke
Beiträge gesamt: 32

7. Feb 2007, 12:41
Beitrag # 4 von 7
Beitrag ID: #274880
Bewertung:
(2333 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Ohh, ich danke Euch, peinlich, das halbe Pixel :-)

Ich probier mal ob die ems das Problem sind, ich dachte das sei immer ein fester Wert abhängig von der Schriftgröße...

Komisch finde ich daß dieses Probem nur auf dieser einen Seite auftaucht, die anderen Listen (z.B. auf der Seite .../hochbau.html), die ja mit den gleichen Stylesheets arbeiten, fumktionieren ganz normal. Der einzige Unterscheid sind die h2 Headlines, aber der faslche Abstand ist ja gar nicht direkt unter der h2!

Ich teste es heute abend (bin jetzt bei der Arbeit und habe kein Dreamweaver) und melde Euch dann den Erfolg!

Christina


als Antwort auf: [#274864]

Rätselhafte Zeilenabstände

GwenDragon
Beiträge gesamt:

7. Feb 2007, 13:22
Beitrag # 5 von 7
Beitrag ID: #274900
Bewertung:
(2326 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Antwort auf [ chucke ] Ich probier mal ob die ems das Problem sind, ich dachte das sei immer ein fester Wert abhängig von der Schriftgröße...

Zitat Ein em ist definiert als die Breite des Großbuchstabens M in der dargestellten Schriftart und Schriftgröße.

Quelle: http://de.wikipedia.org/wiki/Em_(Schriftsatz)#Definition

em sind kein Problem. Das sind relative Größen.


als Antwort auf: [#274880]

Rätselhafte Zeilenabstände

chucke
Beiträge gesamt: 32

7. Feb 2007, 16:20
Beitrag # 6 von 7
Beitrag ID: #274974
Bewertung:
(2316 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo GwenDragon,

meinst Du denn diese "f/ont" Geschichten können das Zeilenabstands-Problem verursachen, wenn es nicht an den ems liegt? Oder war das nur eine grundsätzliche Anregung? (Ich lese mir Deinen Link zu den Conditional Comments jedenfalls mal durch und versuche es damit).

Ich glaube ich muß noch mal richtig umbauen...

Danke für Eure Hilfe!

Christina


als Antwort auf: [#274900]

Rätselhafte Zeilenabstände

chucke
Beiträge gesamt: 32

7. Feb 2007, 21:43
Beitrag # 7 von 7
Beitrag ID: #275060
Bewertung:
(2303 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
So, ich habe das Problem nach viel erfolglosem Rumprobieren jetzt dadurch gelöst, daß ich die Liste auf der Seite ganz neu aufgebaut habe.

Ich weiß zwar nicht wieso, aber jetzt stimmen die Abstände – wahrscheinlich war ein winziger Fehler im Code irgendwo...

Danke für Eure Unterstützung!

Christina


als Antwort auf: [#274974]
X