Abstandsprobleme

ollie75 · #1 (**permalink**) 13.11.2005, 20:22

Hallo,

auf meiner Homepage habe ich diverse Abstandsprobleme, die von IE sowie Firefox unterschiedlich interpretiert werden und kein angemessenes Resultat zeigen.
Auf meiner Test Domain:
http://www.culturetraders.de/praxis/css_test_praxis2/

Hier seht Ihr das Ganze mal LIVE.

Der Header soll wesentlich weiter oben erscheinen. (so wie in Firefox darstellt)
Der Wrapper soll nicht so am Menue dranhaengen sondern auch einen gewissen Abstand haben (Firefox stellt dies auch einigermassen dar)
Ausserdem soll der Wrapper wie im IE dargestellt, auch im Firefox erscheinen.

Hier mal der Code HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Gemeinschaftspraxis für Neurochirurgie Offenbach/Main</title>
<meta http-equiv="neurochirurgie" content="text/html; charset=iso-8859-1">
   <link rel="stylesheet" href="oldies.css" media="screen">
   <style type="text/css" media="screen">@import url("stylesheet.css");</style>
   <link rel="stylesheet" href="print.css" media="print">
<script type="text/javascript">
<!--
  function montre(id) {
     if (document.getElementById) {
        document.getElementById(id).style.display="block";
      } else if (document.all) {
        document.all[id].style.display="block";
      } else if (document.layers) {
        document.layers[id].display="block";
      } }

 function cache(id) {
     if (document.getElementById) {
        document.getElementById(id).style.display="none";
      } else if (document.all) {
        document.all[id].style.display="none";
      } else if (document.layers) {
        document.layers[id].display="none";
      } }
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<div id="wrapper">
<a name="top"> </a>
<div id="header" title="Gemeinschaftspraxis für Neurochirurgie"> </div>
<div class="menu">
<ul class="menu_oben">

<li class="eins">Home

<li class="zwei">Operative Leistungen
   <ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
   <li class="sub_zwei">OP an der HWS
   <li class="sub_zwei">OP an der LWS
   <li class="sub_zwei">OP an peripheren Nerven
   <li class="sub_zwei">Vertebroplastie[/list]

<li class="drei">Ärzte-Team
   <ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
   <li class="sub_drei">Dr. K. A. Müller
   <li class="sub_drei">Dr. V. Ritzel
   <li class="sub_drei">Dr. P. Wörner
   <li class="sub_drei">K. Werkmann
   <li class="sub_drei">Dr. F. Hübner
   <li class="sub_drei">Dr. P. Münster[/list]

<li class="vier">CT-Schmerztherapie

<li class="fuenf">Mitarbeiterinnen
   <ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
   <li class="sub_fuenf">Empfang
   <li class="sub_fuenf">OP-Bereich
   <li class="sub_fuenf">Bettenstation
   <li class="sub_fuenf">Sprechstunde[/list]

<li class="sechs">Räumlichkeiten
   <ul id="smenu6" onmouseover="montre('smenu6');" onmouseout="cache('smenu6');">
   <li class="sub_sechs">Empfangsbereich
   <li class="sub_sechs">Arztzimmer
   <li class="sub_sechs">OP-Bereich
   <li class="sub_sechs">Patientenzimmer
   <li class="sub_sechs">CT-Raum[/list]

   <li class="sieben">Kontakte
   
<li class="acht">Forum[/list]</div>
<div id="contents">
   <div id="blogentry">
   <h2>Herzlich Willkommen</h2>
   <h3>Dezember 2005</h3>
   

Sie befinden sich auf einer Testseite Sie befinden sich auf einer Testseite
        Sie befinden sich auf einer Testseite Sie befinden sich auf einer Testseite
        Sie befinden sich auf einer Testseite Sie befinden sich auf einer Testseite
        Sie befinden sich auf einer Testseite Sie befinden sich auf einer Testseite
        Sie befinden sich auf einer Testseite Sie befinden sich auf einer Testseite
        Sie befinden sich auf einer Testseite Sie befinden sich auf einer Testseite
        Sie befinden sich auf einer Testseite Sie befinden sich auf einer Testseite
        Sie befinden sich auf einer Testseite Sie befinden sich auf einer Testseite
        Sie befinden sich auf einer Testseite Sie befinden sich auf einer Testseite
        Sie befinden sich auf einer Testseite Sie befinden sich auf einer Testseite
        Sie befinden sich auf einer Testseite Sie befinden sich auf einer Testseite
        Sie befinden sich auf einer Testseite Sie befinden sich auf einer Testseite
        Sie befinden sich auf einer Testseite Sie befinden sich auf einer Testseite
        Sie befinden sich auf einer Testseite Sie befinden sich auf einer Testseite
        Sie befinden sich auf einer Testseite Sie befinden sich auf einer Testseite
        Sie befinden sich auf einer Testseite Sie befinden sich auf einer Testseite</p>
         

Sie befinden sich auf einer TestseiteSie befinden sich auf einer TestseiteSie
        befinden sich auf einer Testseite</p>
    <p class="rechts">Ärzte-Team (6)   Kooperierende Physiotherapeuten (4)</p>
       <p class="rechts">nach oben</p>
   </div>
   <div class="menu_unten">
   <h3>Aktuelles</h3>
   <ul class="menu_unten">[*]Dezember 2005[*]November 2005[*]Oktober 2005[*]September 2005[*]August 2005[/list]   </div>
<div id="mainframebreak"> </div>         
</div>
<div id="footer"><p class="footer">Copyright &copy; Gemeinschaftspraxis für Neurochirurgie Offenbach/Main - 2005</p></div>   
</div>
</body>
</html>

Hier mein stylesheet:

Code:

body {
margin: -55px 0;
padding: 0;
background:#ffffff;
font: 10px Verdana, Arial, Helvetica, sans-serif;
}

#wrapper {
margin: 8% auto;
width: 890px;
height: auto;
border: 0px solid #676767;
}

#header {
margin: 0 0;
padding: 0;
width: 890px;
height: 121px;
background-image: url(images/bilder/Homepage-Praxis_Entwurf01_2.jpg);
background-color: #AED5E8;
}

#menu_bg {
margin: 0px 0;
padding: 0;
width: 890px;
height: 47px;
background-image: url(images/bilder/Homepage-Praxis_Entwurf0-02.jpg);
background-color: #AED5E8;
}



/* ----------------Das obere Menu-----------------------*/

   div.menu {
   position: absolute;
   margin: 0 auto;
   width: 890px;
   height: 47px;
   background-image: url(images/bilder/Homepage-Praxis_Entwurf0-02.jpg);
   background-repeat: no-repeat;
   background-color: transparent;
   color: inherit;
   }
   
   ul.menu_oben {
   list-style-type: none;
   margin: 15px 15px;
   padding: 0;
   }
   
   div.menu li {
   float: left;
   }

   div.menu a {
   margin: 0 0;
   height: 16px;
   display: block;
   font: 10px Verdana, Arial, Helvetica, sans-serif;
   line-height: 15px;
   text-align: center;
   font-weight: bold;
   text-decoration: none;
   color: #000000;
   background: rgb(33,202,243);
   border: 0px solid #000;
   }

   div.menu a:hover {
   color: #000;
   background: #ffffff;
   }
   
   li.eins {
   width: 62px;
   }
   
   li.zwei {
   width: 168px;
   }
   
   li.sub_zwei {
   width: 168px;
   }
   
   li.drei {
   width: 94px;
   }
   
   li.sub_drei {
   width: 94px;
   }
   
   li.vier {
   width: 136px;
   }
   
   li.fuenf {
   width: 130px;
   }
   
   li.sub_fuenf {
   width: 130px;
   }
   
   li.sechs {
   width: 122px;
   }
   
   li.sub_sechs {
   width: 122px;
   }
   
   li.sieben {
   width: 80px;
   }
   
   li.acht {
   width: 66px;
   }
   
   #smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7, #smenu8       
   {
   display: none;
   float: left;
   font-size: 12px;
   list-style-type: none;
   margin: 0;
   padding: 0;
   }
   
   #smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a, #smenu6 a, #smenu7 a, #smenu8 a
   {
   font-weight: bold;
   }
   
/* -------------- Das untere Menu -----------------*/
   
div.menu_unten {
margin: 15px 20px;
width: 130px;
height: 98px;
background-image: url(xxx);
color: #5B5BFF;
padding: 23px 0;
float: left;
border-left: 2px solid #AED5E8;
}

ul.menu_unten {
margin: 10px 0;
padding: 5px;
list-style-type: none;
}

div.menu_unten a
{
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #000;
line-height: 20px;
}

div.menu_unten a:hover {
   color: #00F;
   background: #fff;
   }

/* -------------------------Der Rest der Seite ------------------*/

h1 {
margin: 0 0;
padding: 0;
width: 650px;
height: 20px;
font: 20px Verdana, Arial, Helvetica, sans-serif;
color: #000;
font-weight: bold;
}

h2 {
padding: 0;
text-align: left;
}

h3 {
margin: 15px 0;
font-size: 12px;
color: #000;
line-height: 0px;
font-weight: bold;
text-align: left;
}

#contents {
margin: 30px auto;
padding: 25px;
width: 870px;
background: #ffffff;
}

#blogentry {
margin: 1em 0;
padding: 10px;
width: 650px;
height: 100%;
background: #00AFFF;
float: left;
}

p {
margin-top: 10px;
font: 100%  Verdana, Arial, Helvetica, sans-serif;
text-align: left;
line-height: 15px;
background: transparent;
}

p.rechts {
margin-top: 10px;
font: 100%  Verdana, Arial, Helvetica, sans-serif;
text-align: right;
line-height: 15px;
background: transparent;
}

#mainframebreak {
clear: left;
}

#footer {
margin: 0px 0;
padding: 0;
width: 890px;
height: 47px;
background-image:url(images/bilder/Homepage-Praxis_Entwurf0-02.jpg);
background-repeat: no-repeat;
}

p.footer {
margin-top: 0;
padding: 15px;
font: 90%  Verdana, Arial, Helvetica, sans-serif;
text-align: right;
line-height: 15px;
background: transparent;
}

a:link {
color:#000;
}

a:visited {
color:#003080;
}

a:hover,a:active {
color:#00F;
background-color:#FFF;
}

Wuerde mich sehr freuen, wenn ich hier den ein oder anderen Loesungsansatz bekommen koennte.
Beginners aus diesem Forum war mir hier schon eine unendlich gute Hilfe!!

Danke und Gruss

OLLIE

mazzo · #2 (**permalink**) 14.11.2005, 10:10

der vermutlich meist genannte Codeschnipsel für Abstandsprobleme:

Code:

*{
margin: 0;
padding: 0;
}

Versuch es mal damit, dann sind global alle Innen- und Aussenabstände auf Null gesetzt und die unterscheidlichen Browserseitigen Defaulteinstellungen überschrieben.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Abstandsprobleme	fabske	CSS	3	29.12.2011 01:38
Abstandsprobleme im IE7	cabotine	CSS	3	14.08.2008 17:15
zwei Spalten layout, IE Abstandproblem	paramit	CSS	2	03.07.2008 13:05
ul li - Abstandsprobleme	franksauerdesign	CSS	7	08.02.2008 11:59