IE7 positioniert falsch
kalle
- css
0 Beat0 kalle
0 Der Martin
Nabend,
das übliche Problem. FF, Opera, IE8 zeigen es richtig an, der IE7 macht irgendetwas anderes.
<body>
<div id="top">
<img id="logo" src="/images/logo.png" alt="Logo" />
<div id='main_navigation'><ul>
<li class='current'>Home</li>
<li><a href="/index.php">Produkte</a></li>
<li><a href="/index.php">Leistungen</a></li>
<li><a href="/index.php">Kontakt</a></li>
</ul></div> <!--end div main_navigation-->
</div><!--end div top-->
...
BODY{
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
background:#d1d1d1 url(/images/bgr.jpg) no-repeat 50% 0;
margin:30px auto;
width:720px;
height:720px;
}
#top{
height:82px;
background-color:#FFFFFF;
}
#main_navigation{
position:relative;
left:100px;
top:40px;
color:#4e5329;
text-transform:uppercase;
font-size:9pt;
}
Problem ist die Positionierung der Navigation. Im FF etc steht sie (wie gewünscht) 100px rechts vom Logo. Im IE7 steht "Home" noch IM Logo. Warum?
Danke :)
Problem ist die Positionierung der Navigation. Im FF etc steht sie (wie gewünscht) 100px rechts vom Logo. Im IE7 steht "Home" noch IM Logo. Warum?
Das wirst du uns verraten sobald du uns mehr von deinem CSS verrätst.
Falls das alles war, tippe ich auf Quälcode.
position:relative ist unabhängig davon meist keine geschickte Strategie.
mfg Beat
Hallo
Das wirst du uns verraten sobald du uns mehr von deinem CSS verrätst.
@charset "UTF-8";
/* CSS Document */
HTML{
}
IMG {border:none;}
BODY{
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
background:#d1d1d1 url(/images/bgr.jpg) no-repeat 50% 0;
margin:30px auto;
width:720px;
height:720px;
}
#top{
height:82px;
background-color:#FFFFFF;
}
#logo{
float:left;
}
#main_navigation{
position:relative;
left:100px;
top:40px;
color:#4e5329;
text-transform:uppercase;
font-size:9pt;
}
Falls das alles war, tippe ich auf Quälcode.
Was musst Du och wissen? Was meinst Du mit Quälcode?
position:relative ist unabhängig davon meist keine geschickte Strategie.
Ich dachte immer "absolute" sollte man vermeinde??
mfg Beat
danke soweit
kalle
Hallo,
<body>
<div id="top">
<img id="logo" src="/images/logo.png" alt="Logo" />
<div id='main_navigation'><ul>
<li class='current'>Home</li>
<li><a href="/index.php">Produkte</a></li><li><a href="/index.php">Leistungen</a></li>
<li><a href="/index.php">Kontakt</a></li>
</ul></div> <!--end div main_navigation-->
</div><!--end div top-->
...
bei der Struktur ist div#main\_navigation überflüssig. Es hat nur ein einziges Kindelement, nämlich ein ul, und es hat dieselben Abmessungen wie dieses. Die Formatierungen könntest du also ebensogut auf das ul-Element anwenden und das div entsorgen.
> BODY{
> font-family:Arial, Helvetica, sans-serif;
> font-size:10pt;
> background:#d1d1d1 url(/images/bgr.jpg) no-repeat 50% 0;
> margin:30px auto;
> width:720px;
> height:720px;
> }
Hat es einen Grund, dass du Elementnamen im CSS groß schreibst?
> #main\_navigation{
> position:relative;
> left:100px;
> top:40px;
> color:#4e5329;
> text-transform:uppercase;
> font-size:9pt;
> }
Hat es außerdem einen Grund, dass du eine entscheidende Information -nämlich dass das img-Element gefloatet ist- zunächst weglässt?
> #logo{
> float:left;
> }
> Problem ist die Positionierung der Navigation. Im FF etc steht sie (wie gewünscht) 100px rechts vom Logo.
Das ist aber nicht das, was dein CSS vorgibt. Deine Regeln für #main\_navigation sagen: Positioniere das Element 100px weiter rechts und 40px weiter unten, als es normalerweise sitzen würde. Das Bild ist durch das Floating aus dem normalen Elementfluss herausgelöst und beeinflusst die Positionen der übrigen Elemente daher nicht mehr.
Dass verschiedene IE-Versionen bei Floats oft seltsame Ergebnisse produzieren, ist eigentlich bekannt.
> Im IE7 steht "Home" noch IM Logo. Warum?
Woran es hier tatsächlich liegt, kann man anhand der Codeausschnitte nicht sagen. Ein Live-Beispiel wäre hilfreicher.
Ciao,
Martin
--
Abraham sprach zu Bebraham: Kann i mal dei Cebra ham?
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
Guten Abend
bei der Struktur ist div#main_navigation überflüssig.
ok, danke Für den Hinweis. Werde ich ändern.
Hat es einen Grund, dass du Elementnamen im CSS groß schreibst?
nö, eigentlich nict.
Hat es außerdem einen Grund, dass du eine entscheidende Information -nämlich dass das img-Element gefloatet ist- zunächst weglässt?
ja. Planlosigkeit! Sorry :)
#logo{
float:left;
}Problem ist die Positionierung der Navigation. Im FF etc steht sie (wie gewünscht) 100px rechts vom Logo.
Das ist aber nicht das, was dein CSS vorgibt. Deine Regeln für #main_navigation sagen: Positioniere das Element 100px weiter rechts und 40px weiter unten, als es normalerweise sitzen würde. Das Bild ist durch das Floating aus dem normalen Elementfluss herausgelöst und beeinflusst die Positionen der übrigen Elemente daher nicht mehr.
Im FF aber eben schon.
Ich will eigentlich nur Folgendes erreichen:
*********
* LOGO *
********* NAVIGATION
Dachte mit float_left im Logo und Abstand linksund oben bei der NAvi wäre der richtige Weg. Nicht?
Danke
Om nah hoo pez nyeetz, kalle!
*********
> * LOGO *
> ********* NAVIGATION
Für ein Logo bietet sich durchaus position: absolute; an. Float wäre dann vorzuziehen, wenn sich die Abmessungen des gefloateten Elementes ändern können. Dies sollte bei einem Logo nicht der Fall sein. Einen Artikel zu position kann ich noch empfehlen.
Matthias