ul display:inline will nicht im Firefox
Axel
- css
Hi,
heute nervt mich mal der Firefox und nicht der IE...
hab folgenden Code, womit ich gerne ein einfaches Design folgendermaßen aufbauen möchte:
Der gesamte Kontent soll zentriert dargestellt werden;
ganz oben soll von ganz links nach ganz rechts background.png angezeigt werden.
In der Mitte davon, im obersten Bereich soll das Logo (Höhe 122px) erscheinen und direkt daneben das Navigationsmenü (90px hoch), wobei es sowohl am oberen Rand der Seite als auch direkt rechts neben dem Logo anliegen soll.
Im Internet Explorer klappt es bestens mit diesem Code. Der Firefox tut so, als hätte ich display:inline im #ulnavi vergessen :(
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>TITEL</title>
<style>
body
{
text-align:center;background:url(./background.png);background-repeat:repeat-x;margin:0;padding:0;
}
#divmain
{
margin:0 auto;text-align:left;width:800px;
}
#ulnavi
{
display:inline;
margin:0;
padding:0;
top:0;
height:90px;
width:300px;
border:1px solid red;
overflow:hidden;
}
#ulnavi li
{
display:inline;
width:100px;
border:1px solid white;
}
</style>
</head>
<body>
<div id="divmain">
<img alt="Looky-Look Logo" src="./logo.png" height="122" width="173" style=""/>
<ul id="ulnavi">
<li>
Navipunkt1
</li>
<li>
Navipunkt2
</li>
</ul>
</div>
</body>
</html>
PS: Im Prinzip ein ähnliches Layout wie www.redaxo.de mit dem Unterschied, dass das Logo bei mir links sein soll und zudem "Übergröße" hat, also höher ist als die <ul> Navigation...
Bitte um Hilfe
Hallo,
heute nervt mich mal der Firefox und nicht der IE...
Dann machst Du etwas falsch (ist fast immer so) - siehe unten.
hab folgenden Code, womit ich gerne ein einfaches Design folgendermaßen aufbauen möchte:
Im Internet Explorer klappt es bestens mit diesem Code. Der Firefox tut so, als hätte ich display:inline im #ulnavi vergessen :(
Wenn ich richtig verstehe, was Du willst, dann möchtest Du, das die <li> nebeneinander angezeigt werden. Dann solltest Du das dem Browser auch sagen, statt ihm zu sagen, dass die <ul> sich wie ein inline-Element verhalten soll... :-)
Viele Grüße,
Marc.
Hi Marc,
es sollen zum Einen die LIs nebeneinander, also inline sein. -> Soweit richtig; Das macht er ja auch.
ABER auch soll der Browser das gesamte <ul> nicht unter dem Logo, sondern auf selber Höhe wie das Logo, nämlich top:0 (wenn es absolute Positionen wären) und rechts neben dem Logo beginnend, aber eben in der selben Zeile...
Diesesmal verstehe ich wirklich nicht, was ich falsch gemacht haben soll.
Sonst würd ich Euch nicht fragen!
Hallo Axel,
es sollen zum Einen die LIs nebeneinander, also inline sein. -> Soweit richtig; Das macht er ja auch.
ABER auch soll der Browser das gesamte <ul> nicht unter dem Logo, sondern auf selber Höhe wie das Logo, nämlich top:0 (wenn es absolute Positionen wären) und rechts neben dem Logo beginnend, aber eben in der selben Zeile...
Hierfür wirst Du wahrscheinlich http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=floats benutzen müssen...
Diesesmal verstehe ich wirklich nicht, was ich falsch gemacht haben soll.
Sonst würd ich Euch nicht fragen!
Kein Problem, ich versuche ja herauszufinden, was Du willst und so langsam scheinen wir der Sache näher zu kommen. :-)
Viele Grüße,
Marc.
Hi,
Im Internet Explorer klappt es bestens mit diesem Code. Der Firefox tut so, als hätte ich display:inline im #ulnavi vergessen :(
ich kann zwischen IE 6 und Firefox 2 keine nennenswerten Unterschiede erkennen.
#ulnavi
{
display:inline;
height:90px;
width:300px;
Dass diese beiden Angaben bei Inline-Elementen keine Wirkung haben, ist Dir sicher bewusst ...
top:0;
... ebenso wie dass dies nur bei positionierten Elementen greift.
Cheatah