✔ Darstellungsprobleme mit dem Attribut padding im IE u. Firefox

Status
Nicht offen für weitere Antworten.
H

Html

Erfahrenes Mitglied
Hallo zusammen, bin langsam am verzweifeln... Habe eben eine Navigationsleiste mit css erstellt und musste erschreckend feststellen, das es im firefox anders aussieht als im ie. Das Problem ist ich arbeite mit dem Attribut padding und der firefox addiert mir dessen wert zu der Größe der Box hinzu, bzw. der IE macht es nicht. e Wie lässt sich dieses Problem beheben.

Meine Struktur ist folgende: Meine Box soll 113px breit und 22/20px hoch sein, die Hintergrundgrafik soll 2px vom linken Rand entfernt sein und der Text 13px vom linken Rand.

css-datei:

Code: 
a.navi{
	background: url(../bilder/design/Dot.gif) no-repeat 2px;
	width: 113px;
	height: 22px;
        cursor: hand;
	line-height: 22px;
	border-style: none none solid none;
	border-width: 0px 0px 1px 0px;
	border-color: White;
	z-index: 0;
	display: block;
	text-align: left;
	padding: 0 0 0 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	color: #FFFFFF;
	
}

a.navi:hover {
	background: url(../bilder/design/Dot_hover.gif) no-repeat 2px;
	text-align: left;
	vertical-align: bottom;
	padding: 0 0 0 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	color: White;
	cursor: hand;
	line-height: 22px;
	z-index: 0;
}


p.navi {
	display: block;
	background: #333333 url(../bilder/design/Dot.gif) no-repeat 2px;
	width: 113px;
	height: 20px;
	line-height: 20px;
	border-style: none none solid none;
	border-width: 0px 0px 1px 0px;
	border-color: black;
	cursor: default;
	z-index: 0;
	text-align: left;
	line-height: 20px;
	padding: 0 0 0 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	color: #FFFFFF;
	
}

meine navigationsmenü:

Code: 
<table width="115" height="100%" border="0" align="left" cellpadding="0" cellspacing="0" class="rahmen_links" >
  <tr>
    <td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="tabelle_navigation" align="left">
  
  <tr> 
  <td >
  
  <p class="navi">Navigation</p>

  </td>
  </tr>
  
 
  
  
  <tr> 
  <td >
<a href="startseite.html" target="mainFrame"  class="navi" >Startseite</a>

  </td>
  </tr>
  
  
  <tr> 
  <td ><a href="aktuelles.html" target="mainFrame" class="navi" >Aktuelles</a></td>
  </tr>
  
   ......usw.

Hoffe mir ist da jemand behilflich, Danke Olli
 
Soviel vorweg: im Firefox wird die Navigationsleiste korrekt angezeigt.

Damit der IE (6.0) das Boxmodell richtig interpretiert, solltest Du für das Dokument einen Doctype wählen, der den IE nicht in den Quirksmodus versetzt, wie beispielsweise diesen hier:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

Wenn die Box 113 Pixel breit dargestellt, und der Text mit einem linken Innenabstand von 13 Pixel eingerückt werden soll, dann beträgt die Breitenangabe für das Element 100 Pixel, da u.a. die padding-Eigenschaft zur Breiten- / Höhenangabe eine Elements hinzuaddiert wird.

Siehe hierzu auch den Workshop: Boxmodell / Abmessungen der Box.
 
Tut mir leid, aber der IE addiert die padding Werte immer noch nicht hinzu!

//edit

Ah es geht doch... Nur musste ich in meiner Tabelle die höhenangabe durch feste Werte angeben damit die Tabelle das ganze frame-fenster ausfüllt.Vorher hatte ich height:100% und die Tabelle ging bis unten hin.
 
Daß die Tabelle nun nicht mehr den ganzen Viewport in der Vertikalen einnimmt, liegt am verwendeten Doctype ;)

Erweiter daher das Stylesheet mit folgender Regel, damit die 100%-Höhe der Tabelle wieder funktioniert:

Code: 
html,body {
height: 100%;
margin: 0;
padding: 0;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück