|
|||
Padding Problem im Firefox
Hallo Zusammen,
ich habe ein Problem mit Padding im Firefox. Der Innenabstand der Buttons ist im Firefox viel größer als im Internet Explorer. Kann mir da jemand helfen? Hier der Beispiel Code: Code:
<!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> <title>Unbenanntes Dokument</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- /* Style for Menu Level 3 or Tab Buttons*/ #TabButtons { position: relative; width: 955px; height: 20px; border-bottom: 1px solid #000000; background-color: #FFFFFF; visibility: visible; z-index: 2; } .tabbutton { background-color: #EFF8EB; text-decoration: none; margin-left: 0px; margin-right: 9px; margin-top: 0px; margin-bottom: 0px; padding: 3px; border-top: 1px solid #000000; border-bottom: 1px solid #000000; float: left; /*line-height: 14px;*/ display: inline; } .tabbutton-active { background-color: #EFF8EB; text-decoration: none; margin-left: 0px; margin-right: 9px; margin-top: 0px; margin-bottom: 0px; padding: 3px; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #EFF8EB; float: left; /*line-height: 14px;*/ display: inline; } .tabbutton-disable { background-color: #F6F6F6; text-decoration: none; margin-left: 0px; margin-right: 9px; margin-top: 0px; margin-bottom: 0px; padding: 3px; border-top: 1px solid #000000; border-bottom: 1px solid #000000; float: left; /*line-height: 14px;*/ display: inline; } .tabbutton-txt { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; white-space : nowrap; text-decoration: none; } .tabbutton-txt-active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #000000; white-space : nowrap; text-decoration: none; } .tabbutton-txt-disable { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #404040; white-space : nowrap; text-decoration: none; } --> </style> </head> <body> <div id="TabButtons" style="left:10px; top:0px;"> <div class="tabbutton"><a href="#" class="tabbutton-txt">Vereinsdaten</a></div> <div class="tabbutton"><a href="#" class="tabbutton-txt">Finanzen</a></div> <div class="tabbutton-active"><a href="#" class="tabbutton-txt-active">Kontenübersicht</a></div> <div class="tabbutton-active"><a href="#" class="tabbutton-txt-active">Abteilungen</a></div> <div class="tabbutton-disable"><a href="#" class="tabbutton-txt-disable">Beiträge</a></div> <div class="tabbutton-disable"><a href="#" class="tabbutton-txt-disable">Funktionäre</a></div> </div> </body> </html> |
Sponsored Links |
|
|||
Code:
#TabButtons { position: relative; width: 955px; line-height: 20px; border-bottom: 1px solid #000000; background-color: #FFFFFF; visibility: visible; z-index: 2; } |
Sponsored Links |
|
|||
Hallo hubert17,
danke für die schnelle Antwort, aber so funktioniert es nicht. Ich muss line-height und height angeben. Beispiel: Code:
#TabButtons { position: relative; width: 955px; height: 28px; line-height: 20px; border-bottom: 1px solid #000000; background-color: #FFFFFF; visibility: visible; z-index: 2; } |
|
|||
bei mir sieht es in beiden browsern gleich aus!
Code:
Jetzt habe ich nur noch ein Problem, das die untere Linie im IE genau um 1 Pixel darunter liegt. nimm doch einfach bei .tabbutton, .tabbutton-active, .tabbutton-disable den border-bottom weg. |
|
|||
Hmm...
also bei mir sieht das in den Browsern IE 6, IE 7 und FF unterschiedlich aus. Den border-bottom kann ich nicht löschen, da sonst die Darstellung nich korrekt ist (siehe Bild). Hilfe, hilfe. Hat denn niemand ne Idee?
__________________
S-Verein die Online Vereinsverwaltung Geändert von kissnet (20.09.2007 um 11:41 Uhr) |
|
|||
Beispiel Firefox:
Beispiel Internet Explorer 7: Im Firefox wäre es so richtig, nur im Internet Explorer wird der border-bottom von #TabButtons 1 Pixel weiter unten angezeigt.
__________________
S-Verein die Online Vereinsverwaltung |
|
|||
da der ff es richtig anzeigt, kannst du uns ja nicht den ganzen relevanten code gezeigt haben. etux's leerer cleardiv ist da auch keine gute lösung.
mir ist das gestern erst garnicht aufgefallen, aber deine navigation hast du ja nur in <div>´s gepackt. richtigerweise sollte es aber als liste folgendermaßen dargestellt werden: Code:
<ul> <li><a href="#">Vereinsdaten</a></li> <li><a href="#">Finanzen</a></li> <li><a href="#">Kontenübersicht</a></li> <li><a href="#">Abteilungen</a></li> <li><a href="#">Beiträge</a></li> <li><a href="#">Funktionäre</a></li> </ul> ansonsten auch mal bei Stu Nicholls | CSSplay | CSS only menus vorbeischauen, da gib's viele beispiele und lösungen. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten | mazzo | CSS | 10 | 05.04.2012 18:32 |
Einbindung von frei erhältlichen Scripten - CSS Problem | DonL | CSS | 1 | 22.01.2011 17:09 |
Problem mit CSS in Joomla 1.5 | noobilicius | CSS | 6 | 25.09.2008 21:24 |
DIV immer ganze Breite - normal?!?!? | csski | CSS | 3 | 02.07.2008 13:20 |
Probleme mit IE6 | marthe | CSS | 22 | 24.09.2007 18:07 |