5 CSS buttons ungleich hoch im IE8

3dstyler

3dstyler

Mitglied
Hallo Kollegen,

im link könnt ihr das momentane ergebnis meiner CSS Seite sehen, doch leider ist im IE 8 der letzte Menu button *KONTAKT* total verrutscht. Ich suche schon seit zwei Tagen herumzu fitzeln und nach einer Lösung im Web usw. aber ich komm nicht drauf.
Bitte helft mir, denn ich werde schon bald wahninnig; möchte dieses Problem ja so gerne mit CSS lösen. Übrigens, ich arbeite mit dem Kompozer NVU.

http://www.3dstyler.com/2spalten.html

hier mal der HTML:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<link rel="stylesheet" type="text/css"
 href="styler.css"><meta
 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><title></title></head><body>
<div id="root">das ist der seiteneinrichter "root"
<div id="head">head bereich für banner</div>
<div class="navigationx">Navigation buttons usw...<br></div>
<div class="navigation"><ul
 style="font-family: Verdana,Arial,sans-serif;"> <li
 style="text-align: center;" class="current_page_item"><a
 href="index.html">HOME</a></li>
<li style="text-align: center;"><a href="firma.html">FIRMA</a></li>
<li style="text-align: center;"><a href="page.html">LEISTUNGEN</a></li>
<li style="text-align: center;"><a href="archives.html">REFERENZEN</a></li>
<li style="text-align: center;"><a href="empty.html">KONTAKT</a></li>
</ul></div><div class="navi_left">Navigation<br>&nbsp;links<br>a<br>b<br>c<br>d<br></div>
<div class="content_right">Inhalt rechts<br>hier
sollte etwas stehen</div>
<div class="clear"></div><div id="footer">footer
unten</div>
</div></body></html>

und der CSS aus der Datei:
Code: 
body
{
    text-align: center;
    font-size: 1.5em;
    font-family: courier;
}

#root
{
    width:850px;

    border: 1px solid blue;
    margin: 0 auto;
    text-align: left;
    color: blue;
    background-color: yellow;
}

#root a
{
    color: #000000;
    text-decoration: none;
    font-weight: bold;
}
#root a:hover
{
    color: #FF0000;
}

#head
{
    border: 0px solid #000000;
    height:100px;
    margin: 0px;
background-color: #dcdcdc;
}

.navigationx
{
    width: 850px;
    float: left;
    background: orange;
    border: 0px solid green;
    padding: 0px;
}

.navi_left
{
    width: 250px;
    float: left;
    background: grey;
    border: 0px solid green;
    padding: 0px;
}

.content_left
{
    width: 250px;
    float: left;
    border: 1px solid #FF0000;
    padding: 10px;
    margin-left: 10px;
}


.content_right
{
    width: 600px;
    float: right;
background: red;
    border: 0px solid blue;
    padding: 0px;
}


#footer
{
with: 850px;
background: green;
border: 0px solid yellow ;
}

.clear 
{
clear: both;
}


/* --------------------------------
NAVIGATION: ist die leiste mit menüs nebeneinander!
----------------------------------- */

.navigation {
	background: green;
	border-top: 0px solid white;
	border-bottom: 0px solid white;
	font-size: 1.0em;
}

.navigation ul {display: inline;}

.navigation ul li 
{
	border-right: 0px solid white;
	float: left;
	list-style: none;
	width: 170px;
}

.navigation a {
	color: white;
	display: block;
	font: 0.5em verdana, arial;
	padding: 10px 0px 10px 0px;
	text-decoration: none;
}

.navigation a:hover 
{
	background: #dcdcdc;
	color: green;
	text-decoration: none;
}


.current_page_item a {
	background: white;
	color: grey;
}
 
Das liegt wohl am width der li's (width: 170px;)
Du könntest etwas weniger Breite einegeben, dann würde es beim IE inordnung ausehen.
Falls du aber die ganze Weite haben möchtest, kannst du versuchen dem IE mit * width: 160px; eine andere Breite der li's zuzuweisen. Ansonsten schau mal was Google zu "css horizotal menu full width" sagt.
 
Hallo,

m.E. liegt die unterschiedliche Darstellung der Browser in der unterschiedlichen initialen Formatierung der ungeordneten Listen. Ich würde die margin- und auch die padding-Eigenschaft sowohl im UL- als auch im LI-Element auf den Wert Null zurücksetzen. Zudem halte ich das Einhüllen des UL-Elements in den DIV-Block mit dem Klassenattribut "navigation" für unnötig und die Formatierung des UL-Elements zum Inline-Element ist vermutlich aus Verzweiflung geschehen.

Versuch es mal so:
HTML: 
<ul class="navigation">
  <li class="current_page_item"><a href="index.html">HOME</a></li>
  <li><a href="firma.html">FIRMA</a></li>
  <li><a href="page.html">LEISTUNGEN</a></li>
  <li><a href="archives.html">REFERENZEN</a></li>
  <li><a href="empty.html">KONTAKT</a></li>
</ul>
... und die zugehörige Formatierung in der CSS-Datei "styler.css":
CSS: 
ul.navigation {
  margin: 0;
  padding: 0;
  background: green;
  font-size: 1.0em;
  font-family: Verdana,Arial,sans-serif;
  text-align: center;
}

ul.navigation li
{
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
  width: 170px;
}
 
Guten Morgen @ all,

erstmal vielen Dank für eure Antworten, ist ja echt super hier, dass Experten sich so schnell und ausführlich melden! *großes Lob*

und nun zu euren Meldungen, dass auch andere User hier den Sinn eines Forums nutzen können:

@hoctar:
Das mit der kleineren Breite der einzelnen Buttons habe ich auch schon versucht, das hat auch wunderbar funtkioniert, trotzdem wollte ich umbedingt alle Buttons in der Menuleiste über die gesamte Breite haben.


@hela: - du bist mein Held! :)
danke für deine ausführliche Hilfe!
Es lag genau daran, dass ich den Div classes ul.navigation und ul.navigation li explizit die Werte margin und padding auf 0px setzte, wobei ich nun glaube, dass es vor allem der Wert padding = 0px ausmachte...!

Und nebenbei noch, danke für deinen Tip mit den überflüssigen Divs, ich habe hier wirklich zwei Divs zuviel verschachtelt, nun sieht der Code wirklich sauberer und besser aus! ;)


Wie immer tolles Forum und tolle Leute hier - THXs @ all
greetz 3dstyler
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück