MorphexX: div-basiertes Design im Firefox verschoben

Beitrag lesen

SELF-Forum

div-basiertes Design im Firefox verschoben

MorphexX Homepage des Autors
– Informationen zu den Bewertungsregeln

Naja, hört sich alles sehr komisch an. Habe zwei absolute DIVs: Navigation und Main:

http://test.supportbase.de/

Bei der Navigation funktioniert alles perfekt, obwohl der Firefox irgendwie immer irgendwelche Innenabstände herzaubert, die garkeinen Sinn machen und von mir durch den Quelltext eigentlich unterbunden sind.

Das beste BUeispiel ist da mal wieder eine meiner Kreationen.
Wie man dank Firefox sehen kann, trennt er im Main-DIV den Header vom Body durch einen dicken leeren Balken. Sehr hässlich! Ich bekomm das aber net hin.

Ich code solche DIVs immer gleich und habe keine Ahnung, wo mein Fehler liegt.

Hier meine HTML-Datei:

<html>

<head>
  <title>SupportBase :: Test-Area</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
 </head>

<body>

<div id="nav_div">
  <div id="nav_header">
   <div style="clear:both;"></div>
  </div>
  <div id="nav_body">
   <a href="www.supportbase.de">SupportBase.de</a>
  </div>
  <div id="nav_footer">
   <div style="clear:both;"></div>
  </div>
 </div>

<div id="main_div">
  <div id="main_header">
   <span class="location">SupportBase &raquo; Test-Area &raquo; Home</span>
  </div>
  <div id="main_body">
   <h3 class="main"> Willkommen</h3>
   <p class="main">
    Hier gibt finden Sie künftig alle aktuellen Bearbeitungen aus dem Hause SupportBase in den Bereichen <b>Design-Development</b> und <b>Script-Development</b>.
   </p>
  </div>
  <div id="main_footer">
   <div style="clear:both;"></div>
  </div>
 </div>

</body>

</html>

Und hier die CSS:

html, body
{
 background: #26499C;
 margin: 0px;
 padding: 0px;
}

h3.main
{
 font-family:sans-serif;
 font-weight:bold;
 padding: 0 0 0 5px;
 background:url(images/header_underline.jpg) bottom left no-repeat;
}

p.main
{
 font-family:sans-serif;
 padding: 0 0 0 5px;
}

.location
{
 font-family:sans-serif;
 font-size:12;
}

div#nav_div
{
 position:absolute;
 margin:5px 0 0 5px;
 padding:0 0 0 0;
 width:249px;
 overflow:hidden;
}

#nav_header
{
 position: relative;
 margin: 0 0 0 0;
 padding:0 0 0 0;
 width:249px;
 height:3px;
 overflow:hidden;
 background:url(images/bg_nav_top.gif) no-repeat;
}

#nav_body
{
 position:relative;
 margin:0 0 0 0;
 padding:0 0 0 30px;
 width:249px;
 height:100px;
 overflow:hidden;
 background:url(images/bg_nav_body.gif) repeat-y;
}

#nav_footer
{
 position:relative;
 margin:0 0 0 0;
 padding:0 0 0 0;
 width:249px;
 height:4px;
 overflow:hidden;
 background:url(images/bg_nav_bottom.gif) no-repeat;
}

div#main_div
{
 position:absolute;
 margin:5px 0 0 269px;
 padding:0 0 0 0;
 width:708px;
 overflow:hidden;
}

#main_header
{
 position: relative;
 margin: 0 0 0 0;
 padding:25px 0 0 75px;
 width:708px;
 height:51px;
 overflow:hidden;
 background:url(images/bg_main_top.gif) no-repeat;
}

#main_body
{
 position:relative;
 margin:0 0 0 0;
 padding:0 0 0 6px;
 width:708px;
 height:500px;
 overflow:hidden;
 background:url(images/bg_main_body.gif) top left repeat-y;
}

#main_footer
{
 position:relative;
 margin:0 0 0 0;
 padding:0 0 0 0;
 width:708px;
 height:5px;
 overflow:hidden;
 background:url(images/bg_main_bottom.gif) no-repeat;
}[/quote]

Ich hoffe ihr könnt mir helfen.

Beitrag melden
–
Informationen zu den Bewertungsregeln