zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Padding Problem im Firefox

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.09.2007, 07:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.06.2007
Beiträge: 5
kissnet befindet sich auf einem aufstrebenden Ast
Standard 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&uuml;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&auml;ge</a></div>
  <div class="tabbutton-disable"><a href="#" class="tabbutton-txt-disable">Funktion&auml;re</a></div>
</div>
</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.09.2007, 08:55
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 06.06.2006
Beiträge: 188
hubert17 befindet sich auf einem aufstrebenden Ast
Standard

Code:
#TabButtons {
  position: relative;
  width: 955px;
  line-height: 20px;
  border-bottom: 1px solid #000000;
  background-color: #FFFFFF;
  visibility: visible;
  z-index: 2;
}
aber FAQ Punkt 2 nicht vergessen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.09.2007, 09:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.06.2007
Beiträge: 5
kissnet befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Jetzt habe ich nur noch ein Problem, das die untere Linie im IE genau um 1 Pixel darunter liegt.
Mit Zitat antworten
  #4 (permalink)  
Alt 20.09.2007, 10:58
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 06.06.2006
Beiträge: 188
hubert17 befindet sich auf einem aufstrebenden Ast
Standard

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.
das ist der border von #TabButtons. jedoch macht es der ie falsch. im ff ist dieser border ganz oben, weil du nach dem float kein clear eingesetzt hast. das meite ich mit FAQ Punkt 2.

nimm doch einfach bei .tabbutton, .tabbutton-active, .tabbutton-disable den border-bottom weg.
Mit Zitat antworten
  #5 (permalink)  
Alt 20.09.2007, 11:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.06.2007
Beiträge: 5
kissnet befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #6 (permalink)  
Alt 20.09.2007, 11:52
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 06.06.2006
Beiträge: 188
hubert17 befindet sich auf einem aufstrebenden Ast
Standard

und wie sieht es im ff aus?
Mit Zitat antworten
  #7 (permalink)  
Alt 20.09.2007, 12:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.06.2007
Beiträge: 5
kissnet befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 21.09.2007, 00:17
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Hallo kissnet,

ich kann mir wirklich nicht vorstellen, wozu das gut sein kann, was Du da machst. Ein Moment dachte ich, es könnte ein Menü für ein CMS – Template sein, was ich allerdings nicht kenne. Aber ich denke, Du willst eher bloß bisschen rumspielen. Da spiele ich gerne mit.

Hier mein Zug:

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;
 x 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;
}
#clearFloat { clear: both; width: 900px; height: 0; margin-bottom: -1px; }
-->
</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&uuml;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&auml;ge</a></div>
  <div class="tabbutton-disable"><a href="#" class="tabbutton-txt-disable">Funktion&auml;re</a></div>
  <div id="clearFloat"></div>
</div>
</body>
</html>
Übrigens auch im FF funktioniert Dein- nennen wie es vorläufig- Menü nicht. Also nicht bei jeder Auflösung. Und spätestens dann nicht, wenn man die Schriftgröße ändert. Wie das bei meinem „Menü“ ausschaut, kannst Du dich selbst überzeugen.

Ich hoffe, Du verstehst Spaß und bis mir nicht böse deswegen.

Grüße: Emil
Mit Zitat antworten
  #9 (permalink)  
Alt 21.09.2007, 11:46
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 06.06.2006
Beiträge: 188
hubert17 befindet sich auf einem aufstrebenden Ast
Standard

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>
wie du den einen pixel beim ie wegbekommst, da steh ich momentan auf dem schlauch! aber vielleicht hat ein anderer ne lösung für dich.
ansonsten auch mal bei Stu Nicholls | CSSplay | CSS only menus vorbeischauen, da gib's viele beispiele und lösungen.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 21.09.2007, 12:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.06.2007
Beiträge: 5
kissnet befindet sich auf einem aufstrebenden Ast
Daumen hoch

Hallo Zusammen,

die Lösung von etux funktioniert bei mir einwandfrei. Vielen Dank für die schnelle Hilfe.
__________________
S-Verein die Online Vereinsverwaltung
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:11 Uhr.