✔ problem in Firefox mit display block

luci · 24. Oktober 2006

Hallo Ihr,
kann mir jemand sagen warum in firefox die gesamte navi um ca. 2cm verschoben ist wenn ich display block benutzte? Im IE sieht alles ok aus.
Programmierung sieht so aus:
Html:

HTML:

<body>
<TABLE height=680 cellSpacing=0 cellPadding=0 width=983 border=0 class=centern>
  <TBODY>
<TR> 
      <TD width=174 bgColor=#FFFFFF height=296 rowSpan=3 border="#000000"> 

 <!----------------------------------NAVI---------------------------------------------------------->

      <DIV class=inhalt_navi> 
          <A class=link_home href="home.htm">Home</A> 
          <A class=link href="start_2.htm">Hallo</A> 
          <A class=link href="erste.htm">Erste</A> 
          <A class=link href="zweite.htm">zweite</A> 
          <A class=link href="material.htm">Material</A> 
          <A class=link href="kontakt.htm">Kontakt</A> 
          <A class=link href="impress.htm">Impressum</A> 
          <A class=link_links href="links.htm">Links</A> 
        </DIV>
    </TD>

      <!----------------------------------NAVI-Ende---------------------------------------------------------->

      <TD width=1 height=40> <IMG src="h1_Bilder/spacer.gif" width="1" height="1">
     </TD>
</TR>
<TR>
     <TD width=1 height=242><IMG src="h1_Bilder/spacer.gif" width="1" height="1">
     </TD>
</TR>
  </TBODY>
</TABLE>
</body>

Und das CSS dazu:

Code:

div.inhalt_navi{
	top: 112px;
	left: 8px;
	width: 174px;
	height: 272px;
	display: block;
	padding: 8px 0px 0px 30px;
	border-right-color:#000000;
	border-right-style:solid;
	border-right-width:2px;
	position: absolute;
	z-index: 6;
}
/* -----------------------navi--rollover--------------------------------------*/

a.link {
	display: block;
	height:30px;
	width: 174px;
	background: #DCF3A0 url(Bilder/punktnavi.gif) no-repeat 11px 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none; 
	color: #000;
	padding: 8px 0px 0px 30px;
	text-align: left;
	border-top: 1px solid #B6E636;
	border-bottom:1px solid #B6E636;
}
a.link_a {
	display: block;
	height:30px;
	width: 174px;
	background: #CCEE73 url(Bilder/punktnaviaktiv.gif) no-repeat 11px 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration: none; 
	color: #FFF;
	padding: 8px 0px 0px 30px;
	text-align: left;
	border-top: 1px solid #B6E636;
	border-bottom:1px solid #B6E636;
}
a.link:hover {
	background: #B6E636 url(Bilder/punktnaviaktiv.gif) no-repeat 11px 10px;
	color: #000;
	padding: 8px 0px 0px 30px;
	border-top: 1px solid #B6E636;
	border-bottom:1px solid #B6E636;
}

Ich hoffe mir kann jemand helfen.
LG

Gumbo · 24. Oktober 2006

Das Problem wird die unterschiedliche Interpretation des Box-Modells sein. Denn der Internet Explorer interpretiert es anders als in der Spezifikation festgelegt.

Maik · 24. Oktober 2006

Ohne jetzt den kompletten HTML-Quelltext , insbesondere die Doctype-Deklaration für das Dokument gesehen zu haben, vermute ich, daß der IE im Quirksmodus läuft und daher die Angabe zum linken Innenabstand (= 30px) nicht zur Elementbreite hinzuaddiert.

Ergo: Firefox interpretiert das Stylesheet richtig, und der IE eben nicht.

luci · 24. Oktober 2006

Danke für die Antwort, aber ich verstehe das immer noch nicht. IE zeigt ja alles korrekt an, nur in firefox ist die navi breiter und versetzt. Wie kann ich das ändern?

Maik · 24. Oktober 2006

Und nochmal, der Firefox führt den CSS-Code korrekt aus, indem er - gemäß dem Boxmodell - den linken Innenabstand zur Breitenangabe hinzuaddiert, und sich somit eine Gesamtbreite von 204 Pixel ergibt (174px + 30px = 204px).

Du kannst ja mal folgenden Dokumenttyp für das Dokument deklarieren und anschliessend die Seite nochmal im IE überprüfen:

HTML:

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

Wenn das Menü 174 Pixel breit dargestellt werden und einen linken Innenabstand von 30 Pixel besitzen soll, dann beträgt die Breitenangabe "nur" 144 Pixel (144px + 30px = 174px).

luci · 24. Oktober 2006

Also ich habe jetzt die Breite überall auf 144px reduziert und den code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
in den HTML code eingefügt. Es ändert sich nur die breite, die jetzt jedoch zu kurz ist. Und das ganze liegt immer noch versetzt.
Was mache ich denn falsch?

Maik · 24. Oktober 2006

Probier es mal mit diesem Quellcode:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
div.inhalt_navi{
        margin-top: 112px;
        margin-left: 8px;
        width: 174px;
        height: 272px;
        border-right-color:#000000;
        border-right-style:solid;
        border-right-width:2px;
}
/* -----------------------navi--rollover-------------------------------------- */

a.link:link,a.link:visited {
        display: block;
        height:30px;
        width: 144px;
        background: #DCF3A0 url(Bilder/punktnavi.gif) no-repeat 11px 10px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        text-decoration: none;
        color: #000;
        padding: 8px 0px 0px 30px;
        text-align: left;
        border-top: 1px solid #B6E636;
        border-bottom:1px solid #B6E636;
}
a.link:hover {
        background: #B6E636 url(Bilder/punktnaviaktiv.gif) no-repeat 11px 10px;
        color: #000;
        padding: 8px 0px 0px 30px;
        border-top: 1px solid #B6E636;
        border-bottom:1px solid #B6E636;
}
a.link_a {
        display: block;
        height:30px;
        width: 144px;
        background: #CCEE73 url(Bilder/punktnaviaktiv.gif) no-repeat 11px 10px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        text-decoration: none;
        color: #FFF;
        padding: 8px 0px 0px 30px;
        text-align: left;
        border-top: 1px solid #B6E636;
        border-bottom:1px solid #B6E636;
}
-->
</style>

</head>
<body>

<TABLE height="680" cellspacing="0" cellpadding="0" width="983" border="0" class="centern">
<TR>
      <TD width="174" height="296" rowspan="3">

 <!-- --------------------------------NAVI-------------------------------------------------------- -->

      <DIV class="inhalt_navi">
          <A class="link_home" href="home.htm">Home</A>
          <A class="link" href="start_2.htm">Hallo</A>
          <A class="link" href="erste.htm">Erste</A>
          <A class="link" href="zweite.htm">zweite</A>
          <A class="link" href="material.htm">Material</A>
          <A class="link" href="kontakt.htm">Kontakt</A>
          <A class="link" href="impress.htm">Impressum</A>
          <A class="link_links" href="links.htm">Links</A>
        </DIV>
    </TD>

      <!-- --------------------------------NAVI-Ende-------------------------------------------------------- -->

    <TD width="1" height="40"><IMG src="h1_Bilder/spacer.gif" width="1" height="1"></TD>
</TR>
<TR>
     <TD width="1" height="242"><IMG src="h1_Bilder/spacer.gif" width="1" height="1"></TD>
</TR>
</TABLE>

</body>
</html>

luci · 25. Oktober 2006

ok jetzt habe ich das css wie empfohlen geändert. Jetzt sitzt es richtig, nur leider hängt die navi nun zu tief. Selbst wenn ich margin-top auf 0 setzte bleibt die navi links unten. Wie kann ich das jetzt ändern? Zuvor hatte ich top 112px und left 8px, und diese Position sollte die Navi auch haben.
Kann mir nochmal jemand helfen?.

Maik · 25. Oktober 2006

Das sollte sich mit dem valign-Attribut beheben lassen:

Code:

<td width="174" height="296" rowspan="3" valign="top">

luci · 25. Oktober 2006

Leider hängt dann alles on top, und nicht bei 112px.
Vielleicht noch eine andere idee?
LG

✔ problem in Firefox mit display block

luci

Grünschnabel

Gumbo

Erfahrenes Mitglied

Maik

luci

Grünschnabel

Maik

luci

Grünschnabel

Maik

luci

Grünschnabel

Maik

luci

Grünschnabel

Neue Beiträge