✔ CSS-Problem (margin-top) mit IE und Safari

M

MORE1970

Liebe Forengemeinschaft!
Ich habe große Probleme bei der Darstellung meiner Seite im IE und Safari. Im IE erscheint alles so wie es sein soll, bei Safari erhalte ich oben einen großen weißen Leerraum.

Nachstehend ein Auszug aus meinen CSS-Klassen:

<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
}

html {
background: #5670A1 url(../images/bg.png) 0 0 repeat-x;
}

tr, p, div {
font-family : verdana, Arial, Helvetica, sans-serif;
font-size : 13px;
color : #666666;
}

.clr {
clear : both;
}

#top_img {
width : 946px;
height : 8px;
margin : auto;
background : url(../images/top_img.jpg) no-repeat;
}

#center_img {
width : 946px;
margin : auto;
background : url(../images/center_img.jpg) repeat-y;
}

#bottom_img {
width : 946px;
height : 30px;
margin : auto;
background : url(../images/bottom_img.jpg) no-repeat;
}

#topmenu {
width : auto;
float : left;
margin-top : 218px;
margin-left:13px;
padding : 0px;
}

#header_container {
width : 926px;
height : 260px;
margin-top : -254px !important;
margin-top : 0px;
margin-left : 13px !important;
margin-left : 0px;
background : url(../images/logo.jpg) no-repeat;
clear : both;
}

-->
</style>

Kann mir jemand einen Tip geben, was ich hier falsch gemacht habe?
Vielen herzlichen Dank und
lG
Monika
 
Hallo Maik,
danke für Deine rasche Antwort.
Ich komme leider erst heute dazu, den Quelltext mitzuteilen:
Übrigens findest Du unter http://krone.foto-reiter.com/ die Seite in Echtzeit.
Herzlichen Dank für Deine Unterstützung!!
lG
Monika


<body>
<div id="top_img"></div>
<div id="search_outer">
</div>
<div id="center_img">
<div id="top_inner_img"></div>
<div id="center_inner_img">
<div id="main_container">
<div id="topmenu_inner">
<div id="topmenu_inner">
<div id="topmenu">
</div>
<div id="header_container">
<div id="header_left">
</div>
<div id="header_center"></div>
<div id="header_right">
</div>
</div>
<div id="header_bottom">
<div id="pathway">
</div>
</div>
<div id="content_container">
<table width="100%" cellpadding="2" cellspacing="0">
<tr valign="top">
<td width="100%">
<p>
<div class="clr"></div>
<table class="contentpaneopen">
<tr>
<td valign="top">
<p>&nbsp;</p>
<h2>Willkommen!&nbsp;
<p></p>
</h2>
<h1><em>Text</em></h1>
<p style="text-align: left;">Roger Caras</p>
</td>
</tr>
</table>
<span class="article_separator">&nbsp;</span>
</td>
</tr>
</table>
</div><!-- /content_container -->
<div id="footer">
© 2009</div>
</div><!-- /main_container -->
</div><!-- /center_inner_img -->
<div id="bottom_inner_img"></div>
</div><!-- /center_img -->
<div id="bottom_img"></div>
</body>
 
Hi,

setz mal im HTML-Code den Header und das Menü in die chronologische Reihenfolge, wie sie am Bildschirm auch erscheinen sollen, und ändere das CSS folgendermaßen:
CSS: 
#topmenu {
  width                 : auto;
  float                 : left;
  margin-top                : -45px; /* Menü nach oben verrücken */
margin-left:13px;
  padding               : 0px;
}

#header_container {
  width                 : 926px;
  height                : 260px;
  /*margin-top            : -254px !important;*/ /* auskommentiert = deaktiviert */
  margin-top            : 0px;
  margin-left            : 13px !important;
  margin-left    : 0px;
  background            : url(../images/logo.jpg) no-repeat;
  clear                 : both;
}

Die Lücke ergibt sich übrigens nicht nur in Safari, sondern auch in Firefox und Opera.

mfg Maik
 
Hallo Maike,
o, ja, tatsächlich. Jetzt hab' ich mal die CSS angepasst - das funktioniert.
Jetzt muss ich es nur noch schaffen, die DIV-Elemente richtig zu positionieren, weil ja jetzt das Menü ganz oben ist.
Vielen herzlichen Dank für die schnelle Unterstützung.
Es ist mir oft ein Rätsel, wie man in so langen Quelltexten so rasch einen Fehler findet ;-)

lG
Monika
 
Du brauchst lediglich im HTML-Code die Reihenfolge der Blöcke tauschen:
HTML: 
<div id="main_container">

    <div id="header_container">...</div>
    <div id="header_bottom">...</div>
    <div id="topmenu_inner">...</div>
     ...
</div>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück