Falsche Listenformatierung

D

DeDome

Grünschnabel
Hi,

ich versuche eine ordentlich sortierte horizontale Liste darzustellen. Im ff wird sie auch weitestgehend in Ordnung angezeigt. Im IE 6 - 8 jedoch absolut schlecht.
Im Anhang ein Screenshot:
Hier noch die css
CSS: 
.underlinemenu{
font-weight: bold;
width: 100%;
font-family:Verdana,Helvetica,sans-serif; 
font-size:12px;

}

.underlinemenu ul{

text-align: center; 

}

.underlinemenu ul li{
float: left;
display: block;
margin: 0px;
width:110px;
min-height: 20x;
color: #003d8f;
padding: 6px 3px 0px 3px; 
/*margin-right: 20px; /*spacing between each menu link*/
margin: 10px;
margin-bottom: 0;
margin-top: 0;
}


.underlinemenu ul li a{
color: #003d8f;
padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;

}


und hier das menü
HTML: 
<ul>
  <li><a href="index.php?galerie=reception">Reception</a></li>
  <li><a href="index.php?galerie=zimmer">Zimmer</li>
  <li><a href="index.php?galerie=fruehstuecksraum">Fr&uuml;hst&uuml;cksraum</a></li>
  <li><a href="index.php?page=preise">Preise</a></li>
  <li><a href="index.php?galerie=hotelbar">Hotelbar</a></li>
  <li><a href="index.php?galerie=restaurant">Restaurant</a></li>
  <li><a href="index.php?galerie=parkplaetze">Parkpl&auml;tze</a></li>
  <li><a href="index.php?galerie=tourismus">Tourismus</a></li>
  <li><a href="index.php?galerie=kosmetikstudio">Beauty & Wellness</a></li>
  <li><a href="index.php?galerie=tagungsraume">Tagungen & Veranstaltungen</a></li>
  <li><a href="index.php?galerie=provencalischer_garten">provencalischer Garten</a></li>
  <li><a href="index.php?galerie=kleine_gaeste">Kleine G&auml;ste</a></li>
</ul>

Danke schon mal für eure Mühen!
 

Anhänge

  • screenshot_ie8.jpg
    screenshot_ie8.jpg
    51 KB · Aufrufe: 15
Hi,

versuch's mal hiermit:
CSS: 
.underlinemenu ul{
margin:0;
padding:0;
text-align: center;

}

.underlinemenu ul li{
display:inline;
margin: 0px;
width:110px;
min-height: 20x;
color: #003d8f;
padding: 6px 3px 0px 3px;
/*margin-right: 20px; /*spacing between each menu link*/
margin: 10px;
margin-bottom: 0;
margin-top: 0;
}


.underlinemenu ul li a{  
float:left;
color: #003d8f;
padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;

}

mfg Maik
 
Hi,

erst mal danke, habs gerade ausprobiert. Im Anhang 2 Screenshots :)
 

Anhänge

  • screenshot2_ff.jpg
    screenshot2_ff.jpg
    62,4 KB · Aufrufe: 11
  • screenshot2_ie8.jpg
    screenshot2_ie8.jpg
    43,7 KB · Aufrufe: 11
Ich behaupte jetzt mal, dass du dein HTML-Dokument ohne, oder mit einer falschen Doctype-Deklaration den Browsern nicht im standardkonformen Modus übergibst, womit sie alle in den proprietären "Quirks Mode" schalten, und IE8, wie auch IE7 sich in diesem Darstellungsmodus wie der IE6 aus dem letzten Jahrhundert verhalten, und in der Floatumgebung bei den horizontalen margin-Regeln den "Doubled Float-Margin-Bug" produzieren.

Deinen Schnappschuß kann ich nämlich mit meiner Testseite im IE8 nicht reproduzieren, es sei denn, ich entferne den Doctype vor dem <html>-Tag:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">


mfg Maik
 
Hi,

es war die falsche Doctype-Deklaration. Mit deiner klappt es jetzt mal im IE. Hatte mir die Anordnung zwar etwas anders vorgestellt, aber ich bin froh, dass es überhaupt mal ordentlich angezeigt wird.
Allerdings führt es im ff weiterhin zu einer unsauberen Darstellung. Hier mal der Link zur Seite
http://crystal.public-port.de
 
Ich schätze, da wirst du die einzelnen padding- und margin-Werte der <li>- und <a>-Elemente noch ein wenig nachjustieren müssen, damit die Links sauber in eine Zeile passen, und nicht zuvor nach unten umbrechen.

mfg Maik
 
Übrigens brechen die Links weitaus extremer um, wie es jetzt im FF der Fall ist, und zuvor im IE der Fall war, wenn im Browser der Schriftgrad vergrößert wird.

Es soll ja schließlich Menschen geben, die wegen ihrer Sehschwäche im Browser die Schrift größer eingestellt haben, als du es in der Seite vorsiehst.

mfg Maik
 
Versuch mal die li-Elemente oder die Links in der Liste auf padding: 0; zu setzten.
Also z.B. ganz unten ins Stylesheet hinzufügen.
CSS: 
.underlinemenu ul li, .underlinemenu ul li a {
  padding:0; 
}
 
Maik hat gesagt.:
Ich schätze, da wirst du die einzelnen padding- und margin-Werte der <li>- und <a>-Elemente noch ein wenig nachjustieren müssen, damit die Links sauber in eine Zeile passen, und nicht zuvor nach unten umbrechen.
Zum Vergrößern anklicken....

Eagle-PsyX- hat gesagt.:
Versuch mal die li-Elemente oder die Links in der Liste auf padding: 0; zu setzten.
Also z.B. ganz unten ins Stylesheet hinzufügen.
CSS: 
.underlinemenu ul li, .underlinemenu ul li a {
  padding:0; 
}
Zum Vergrößern anklicken....
Deine beiden gruppierten Selektoren wären die "Not-/Holzhammer"-Methode, falls sich da nichts rührt ;-)

Und mit welcher Begründung nimmst du hier die vertikalen Innenabstände (padding-top, padding-bottom) raus?

Die frühzeitigen Umbrüche beruhen auf den horizontalen Dimensionen.

mfg Maik
 
Hi,
nein ich meinte ich sehe die verschachtelten Padding-Elemente als Problem.
Entweder <li> oder das Kindelement <a> aber doch nicht beides?

P.S.: Bin am anderen Gerät ohne meine Benutzerdaten online...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück