nicht angemeldet
Falsche Darstellung im Internet Explorer
0 
suit
0 0 suit
0 0 suit
0 0 0 
Der Martin
0
Falsche Darstellung im Internet Explorer
Hallo an alle,
ich hoffe, dass ihr mir helfen könnt, denn selbst nach stundenlangem Suchen im Internet komme ich hier nicht weiter.
Ich möchte eine horizintale Navigationsleiste im Browserfenster zentrieren.
Ich habe mich aus verschiedenen Gründen gegen "display: inline" entschieden und wählte "float: left".
Über den Außenabstand des linken Navigationsbuttons habe ich die Buttons zentriert.
Sowohl im Firefox als auch bei Opera wird alles perfekt angezeigt, so wie es mir Dreamweaver in der Vorschau auch zeigt.
Der Internet Explorer amcht mir aber Probleme: und zwar verrückt er die Navigationsleiste noch weiter nach rechts, sodass sie nicht mehr zentriert aussieht!
Wieso amcht er das? Ok, weil er falsch interpretiert, aber womit genau hat er ein Problem und wie löse ich das?
Anbei der vereinfacht Code...
Ich danke euch vielmals für eure Hilfe!!!!
Viele Grüße
Rene
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
@import 'stil.css';
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="navigation">
<ul>
<li id="home"><a href="#" class="home"></a></li>
<li id="aboutme"><a href="#" class="aboutme"></a></li>
<li id="gallery"><a href="#" class="gallery"></a></li>
<li id="guestbook"><a href="#" class="guestbook"></a></li>
<li id="links"><a href="#" class="links"></a></li>
</ul>
</div>
</div>
</body>
</html>
CSS:
@charset "utf-8";
* {
margin: 0 auto;
padding: 0;
background-repeat: no-repeat;
background-position: center center;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100,01%;
text-align: center;
}
#container {
width: 750px;
height: 750px;
margin-top: 25px;
text-align: left;
background-color: #FFF7F3;
}
#header {
background-color: #ff2244;
height: 120px;
width: 700px;
margin-top: 25px;
}
/*Navigation:*/
#navigation {
width: 700px;
height: 38px;
text-align: center;
margin-top: 25px;
}
#navigation ul {
width: auto;
height: 38px;
display: block;
list-style: none;
white-space: nowrap;
background-color: #FFFF11;
}
#navigation ul li {
float: left;
display: block;
width: 100px;
height: 38px;
}
#navigation ul li a{
width: 100px;
height: 38px;
}
#home {
margin-left: 80px; /* dieser Wert zentriert*/
margin-right: 5px;
}
#aboutme {
margin-left: 5px;
margin-right: 5px;
}
#gallery {
margin-left: 5px;
margin-right: 5px;
}
#guestbook {
margin-left: 5px;
margin-right: 5px;
}
#links {
margin-left: 5px;
}
/*Navigation: Anzeige der Hintergrundbilder in a*/
#navigation ul li a.home:link, #navigation ul li a.home:visited {
display: block;
background-color: #444444;
}
#navigation ul li a.home:hover, #navigation ul li a.home:focus, #navigation ul li a.home:active {
display: block;
background-color: #FF6666;
}
#navigation ul li a.aboutme:link, #navigation ul li a.aboutme:visited {
display: block;
background-color: #444444;
}
#navigation ul li a.aboutme:hover, #navigation ul li a.aboutme:focus, #navigation ul li a.aboutme:active {
display: block;
background-color: #FF6666;
}
#navigation ul li a.gallery:link, #navigation ul li a.gallery:visited {
display: block;
background-color: #444444;
}
#navigation ul li a.gallery:hover, #navigation ul li a.gallery:focus, #navigation ul li a.gallery:active {
display: block;
background-color: #FF6666;
}
#navigation ul li a.guestbook:link, #navigation ul li a.guestbook:visited {
display: block;
background-color: #444444;;
}
#navigation ul li a.guestbook:hover, #navigation ul li a.guestbook:focus, #navigation ul li a.guestbook:active {
display: block;
background-color: #FF6666;
}
#navigation ul li a.links:link, #navigation ul li a.links:visited {
display: block;
background-color: #444444;
}
#navigation ul li a.links:hover, #navigation ul li a.links:focus, #navigation ul li a.links:active {
display: block;
background-color: #FF6666;
}
[/CODE]
-
Wieso amcht er das? Ok, weil er falsch interpretiert, aber womit genau hat er ein Problem und wie löse ich das?
er interpretiert deine angaben richtig, hat aber einen bug, der ihn den linken margin verdoppeln lässt:
im übrigen versagt dein konzept, wenn sich die schriftgröße ändert
-
Ich danke dir und werde den Link gleich mal lesen!
im übrigen versagt dein konzept, wenn sich die schriftgröße ändert
Was meinst du? Wieso und was versagt?
DANKEEEEEEEEEEE
-
Was meinst du? Wieso und was versagt?
ändere die schriftgröße in deinem browser auf sagen wir das doppelte von dem was du jetzt eingestellt hast, nachdem die schrift sich vergrößert (und auch breiter wird), ändert sich das verhältnis zum absoluten abstand in pixel auf der linken oder rechten seite
-
achso, ok
Und wie kann ich das lösen?DANKE!
-
achso, ok
Und wie kann ich das lösen?indem du dich zb von deiner unbegründeten abneigung gegen display: inline; wehrst ;)
-
achso, ok
Und wie kann ich das lösen?indem du dich zb von deiner unbegründeten abneigung gegen display: inline; wehrst ;)
ok - Begründung:
Der Grund warum ich versuche display:inline zu vermeiden ist, dass ich meinen "li"s unbedingt feste Breiten zuordnen muss.
Auch wenn es umstritten ist bestehen meine "li"s aus optischen Gründen ausschließlich aus Hintergrundbildern.
Und damit diese Hintergrundbilder (Buttons mitspezieller Schrift) komplett angezeigt werden, muss ich für das li eben eine feste Größe angeben...Oder kennst du eine andere Möglichkeit wie ich das Hintergrundbild in meinem li trotz display:inline vollständig angezeigt bekomme?
DANKE
Gruß
Rene-
Yerf!
Oder kennst du eine andere Möglichkeit wie ich das Hintergrundbild in meinem li trotz display:inline vollständig angezeigt bekomme?
Du könntest es mit inline-block versuchen. Benötigt nur kleinere Feinheiten für IEs (eigentlich versteht er inline falsch) und einen Workaround für FireFox 2 (-moz-inline-stack, -moz-inline-box oder -moz-inline-block je nach dem was besser klappt). Mehr dazu gibts hier im Archiv.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]--> -
Hallo,
Der Grund warum ich versuche display:inline zu vermeiden ist, dass ich meinen "li"s unbedingt feste Breiten zuordnen muss.
Auch wenn es umstritten ist bestehen meine "li"s aus optischen Gründen ausschließlich aus Hintergrundbildern.
Und damit diese Hintergrundbilder (Buttons mitspezieller Schrift) komplett angezeigt werden, muss ich für das li eben eine feste Größe angeben...du hast selbst schon eingeräumt, dass das wohl suboptimal ist.
Aber wenn du schon unbedingt Grafiken als "Buttons" nehmen willst, sind diese Grafiken doch eindeutig Inhalt, nicht Verzierung. Also verwende die Bilder ganz normal als *Inhalt* der li-Elemente und nicht als deren Hintergrund (so haben sie auch noch ein alt-Attribut mit einem Ersatztext, und das Dokument bleibt auch ohne geladene Grafiken navigierbar). Dann haben sie, auch wenn sie "inline" sind, eine anhand des Inhalts festgelegte Größe.Oder kennst du eine andere Möglichkeit wie ich das Hintergrundbild in meinem li trotz display:inline vollständig angezeigt bekomme?
Sag ich doch: Indem man sie nicht als Hintergrund setzt ...
Ciao,
Martin--
Ein Snob ist ein Mensch, der sich auf ein Stachelschwein setzt, ohne eine Miene zu verziehen - nur weil ihm jemand gesagt hat, das sei ein Designersessel.
-
-
-
-
-
-
PERFEKT!
Das war die Lösung... vielen Dank!
-