Webdesign ist ja mal so garnicht mein ding, daher gerate ich auch leicht in's Strudeln. Ich habe letztendlich nach einigen Tutorials und Artikeln endlich Navigation in Form von Tabs mittels einer ungeordneten Liste (inline) hinbekommen. Unter Internet Explorer geht das schonmal prinzipiell eh nicht, aber was mich zum verzweifeln bringt ist der Unterschied den der Firefox zwischen Linux und Windows produziert, obwohl ich auf beiden mit v1.0.1 getestet habe. Ursprünglich habe ich das ganze einfach auf meiner Linuxbox gebastelt, bis sich die ersten Windowsuser über das schlechte design beschwert haben. Nun habe ich es an die Windowsuser angepasst, frage mich aber warum das überhaupt sein muss. Zur Erklärung erstmal zwei Bilder:

http://wtf.pixel-house.net/css-bug-1.png
`Für Windows optimierte' auf Windows

http://wtf.pixel-house.net/css-bug-2.png
`Für Windows optimierte' auf Linux

Deutlich sieht man die Verschiebung um einen Pixel. Wenn man die `für Linux optimierte' Version unter Windows betrachtet ragt das aktuelle Tab dementsprechend einen Pixel in die Contentarea rein.

Der entsprechende CSS Code (ja, hässlich und so -- wie gesagt, Webdesign ist keine Stärle):
Quellcode:#navigation
{
    margin-bottom: 0px;
    padding-bottom: 1px;
    border-bottom: 1px solid black;
}

#navigation ul
{
    margin-left: 0px;
    padding-left: 6px;
    
    display: inline;
}

#navigation ul li
{
    margin-left: 0;
    
    padding: 1px 10px 2px;
    border: 1px solid #000;
    border-bottom: 0px solid #000;
    
    font-size: 8pt;
    
    list-style: none;
    display: inline;
}

#navigation ul #currenttab
{
    background-color: #E9E9E9;
    border-bottom: 1px solid #E9E9E9;
}

#navigation ul li.newsec
{
    margin-left: 23px;
} Der dazugehörige XHTML Teil:Quellcode:<div id="navigation">
    <ul>
        <li><a href="./?view=overview">Zukünftiges</a></li>
                    <li id="currenttab"><a href="./?view=history">Vergangenes</a></li>

        <li class="newsec"><a href="./?view=userlist">Mitgliederliste</a></li>                    
        <li><a href="./?view=admin">Admin</a></li>                    

        <li class="newsec"><a href="./?view=booked">Gebuchte Events</a></li>                                
        <li><a href="./?view=mydetails">Meine Details</a></li>

        <li class="newsec"><a href="./?view=logout">Logout</a></li>
    </ul>
</div> Um `zu optimieren' muss ich lediglich #navigation padding-bottom auf 1px (Linux) oder 2px (Windows) setzen. Meine Frage ist nun, wie ich so etwas einheitlich (ohne JavaScript) hinbekomme.

edit: Bilder als URL, sind doch etwas sehr groß.

mwcollect - mein Projekt | oxlog - mein blog | happyhardcore.com Stream - gute Musik

Nun ja, bevor ich den Code auseinandernehme poste ich dir gleich meinen, ist wirtschaftlicher.

XHTML Teil:

Quellcode:<div id="navcontainer">
    <ul id="navlist">

    <li><a href="./deinlink" id="current">Linktext</a></li>
    <li><a href="./deinlink" >Linktext</a></li>
    <li><a href="./deinlink" >Linktext</a></li>
    <li><a href="./deinlink" >Linktext</a></li>
    </ul>
</div>
Dazugehöriges CSS:

Zitat:

#navlist { padding: 3px 0; margin-left: 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif; }
#navlist li { list-style: none; margin: 0; display: inline; }
#navlist li a { padding: 3px 0.5em; margin-left: 5px; border: 1px solid #778; -moz-border-radius: 8px 8px 0 0; border-bottom: none;
background: #DDE; text-decoration: none; }
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover { color: #000; background: #AAE; border-color: #227; }
#navlist li a#current { background: white; border-bottom: 1px solid white; }

[edit]
Funktioniert bis auf den Radius sogar im IE

Rambo Engineer @ Drippy's 2fort - finest TFC 1.5 || Bild Upload || The world's most advanced open source database

Das ist ja schon nicht schlecht, das einzige was jetzt noch zur vollen IE Kompatibilität fehlt ist das Zentrieren von DIVs:

Quellcode:#pagearea
{
  margin: auto;
  ...
} Geht im Firefox wunderbar, gibt es da auch eine Möglichkeit für den Internet Explorer?

mwcollect - mein Projekt | oxlog - mein blog | happyhardcore.com Stream - gute Musik

Zitat:

0xFF postete
Das ist ja schon nicht schlecht, das einzige was jetzt noch zur vollen IE Kompatibilität fehlt ist das Zentrieren von DIVs:

Quellcode:#pagearea
{
  margin: auto;
  ...
} Geht im Firefox wunderbar, gibt es da auch eine Möglichkeit für den Internet Explorer?

Rambo Engineer @ Drippy's 2fort - finest TFC 1.5 || Bild Upload || The world's most advanced open source database

Nachträglich die versprochene Kritik an deinem CSS:

* Verwendung vom Attribut display:inline im <ul> Tag (gehört zum <li> Tag)
* Im <li> Tag wurden beim Padding Attribut nur 3 Werte angegeben - soll der Browser das vierte erraten? (padding: 1px 10px 2px;)
* margin-left im <li> Tag angegeben, was ist mit den anderen margins?

Kurz gesagt, du hast an den Attributen gespart.
Was du nicht klipp & klar definierst, kann der Browser auffassen wie er will...darum kann es dazu kommen, dass der eine Browser ein padding von anzeigt, wo eigentlich keins sein soll.

Speziell Punkt #2 würd ich korrigieren (die fehlende 4. padding) Angabe.

Rambo Engineer @ Drippy's 2fort - finest TFC 1.5 || Bild Upload || The world's most advanced open source database

http://de.selfhtml.org/css/eigenschaften/innenabstand.htm#padding

"Drei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts und links und die dritte den Abstand für unten."

Der Optimist glaubt, dass wir in der Besten aller Welten leben.
Der Pessimist fürchtet, dass dies stimmt.

Oha, danke für den Hinweis; war ne Wissenslücke meinerseits.

Rambo Engineer @ Drippy's 2fort - finest TFC 1.5 || Bild Upload || The world's most advanced open source database

Zitat:

K-Putt postete
Oha, danke für den Hinweis; war ne Wissenslücke meinerseits.

mwcollect - mein Projekt | oxlog - mein blog | happyhardcore.com Stream - gute Musik

Zitat:

0xFF postete

Zitat:

K-Putt postete
Oha, danke für den Hinweis; war ne Wissenslücke meinerseits.

Obwohl du es sogar im von dir gepostetem Code verwendet hast? :>

Die Methode mit 3 Angaben kannte ich nicht.

Rambo Engineer @ Drippy's 2fort - finest TFC 1.5 || Bild Upload || The world's most advanced open source database