XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Seite mit IE ok. Aber Mozilla haut mir andere Abstände rein (http://xhtmlforum.de/showthread.php?t=32487)

celeron 10.04.2004 16:14

Seite mit IE ok. Aber Mozilla haut mir andere Abstände rein
 
Hallo,

habe eine Seite www.lebach24.de mit CSS umgesetzt.

Einen kleinen Schönheitsfehler bekomme ich nicht weg.

Wenn die Seite mit dem neuen Mozilla 1.6 geöffnet wird, verschiebt sich der gesamte Inhalt nach unten.

Im IE wird die Seite korrekt angezeigt.

Habt Ihr vielleicht eine Ahnung ?

www.lebach24.de

Hier die style.css und das HTML Template.

TD {
FONT: 12px/15px Verdana, Arial, Helvetica, sans-serif; COLOR: #000000;}
P {
FONT: 12px/15px Verdana, Arial, Helvetica, sans-serif; COLOR: #000000
}
DIV {
FONT: 12px/15px Verdana, Arial, Helvetica, sans-serif; COLOR: #000000
}
INPUT {
FONT: 12px/15px Verdana, Arial, Helvetica, sans-serif; COLOR: #000000;
}
TEXTAREA {
FONT: 12px/15px Verdana, Arial, Helvetica, sans-serif; COLOR: #000000
}
FORM {
FONT: 12px/15px Verdana, Arial, Helvetica, sans-serif; COLOR: #000000
}

body
{
font-family:Verdana;
font-size:12px;
background-color:#ffffff;
text-align:center;
}



h1 {font-size:18px;color:#000000;margin-bottom:0px;}
h2 {font-size:16px;color:#000000;}
h3 {font-size:14px;color:#000000;}

a:link, a:visited, a:active
{
text-decoration:underline;
font-weight:normal;
color:#737994;
font-size:12px;
}

a:hover {
color:#000000;
}

#layout {
width:760px;margin:10 auto;text-align:left;
border:1px solid #000000;
background-color:#FDF1C1;

}

#header {
height:236px;
background-color:#FFFFFF;
background-image:url(header/header_start.jpg);
background-repeat:no-repeat;
background-position:top;

}

#left {
background-image:url(menu_back2.jpg);
width:183px;
float:left;
}


.powered {
margin-top:100px;
margin-left:32px;
}

#content {
background-color:#FDF1C1;
width:540px;
padding-right:10px;
padding-top:10px;
padding-bottom:20px;
float:right;
text-align:justify;
}

#impressum {
margin-top:-4px;
margin-right:2px;
float:right;
}

#impressum a {
text-decoration:none;
font-weight:normal;
color:#000000;
font-size:10px;
}

#impressum a:hover{
color:#000000;
}

#startseite {
margin-top:-4px;
margin-left:-10px;
float:left;
}

#startseite a {
text-decoration:none;
font-weight:normal;
color:#000000;
font-size:10px;
}

#startseite a:hover{
color:#000000;
}


#js-menu1 a{
display:block;
margin-left:40px;
margin-right:2px;
font-weight:bold;
color:#000000;
text-decoration:none;
}

#js-menu1 a:hover, a:active {
font-size:13px;
border-bottom:1px solid #EEEEEE;
border-top:1px solid #EEEEEE;
}

#js-menu1act a {
display:block;
margin-left:40px;
margin-right:2px;
font-weight:bold;
text-decoration:none;
color:#000000;
font-size:13px;
border-bottom:1px solid #EEEEEE;
border-top:1px solid #EEEEEE;
}

#js-menu1act a:active {
color:#000000;
}


#js-menu2 a{
display:block;

border-bottom:1px solid #EEEEEE;
margin-left:30px;
margin-right:2px;
padding-left:10px;

font-weight:bold;color:#000000;
font-size:12px;
text-decoration:none;
}

#js-menu2 a:hover{
color:#FFFFFF;
background-color:#FA8057;
}

#js-menu3 a{
display:block;

border-bottom:1px solid #EEEEEE;
margin-left:30px;
margin-right:2px;
padding-left:10px;

font-weight:bold;color:#000000;
font-size:12px;
text-decoration:none;
}

#js-menu3 a:hover{
color:#FFFFFF;
background-color:#F9AD59;
}

#js-menu4 a{
display:block;
background-color:#FF9900;
border-bottom:1px solid #EEEEEE;
margin-left:30px;
margin-right:2px;
padding-left:10px;

font-weight:bold;color:#000000;
font-size:12px;
text-decoration:none;
}

#js-menu4 a:hover{
color:#FFFFFF;
background-color:#F9AD59;
}


.suche {
margin-left:50px;
margin-top:80px;
}

.login {

}

#sitemaptitel{
PADDING-LEFT: 20px;
PADDING-TOP: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size : 12px; font-weight:bold;
vertical-align:top;
}



#newslist {
font-size: 9px;
}

#newssingle {
font-size: 12px;
text-align:justify;
}

#newsborder {
border-bottom:1px solid #000000;
border-left:1px solid #000000;
border-top:1px solid #000000;
}






<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lebach24</title>
</head>
<body>

<div id="layout">
<div id="header">
<div id="impressum">###IMPRESSUM### </div>
<div id="startseite">###STARTSEITE### </div>
<div class="suche"> ###SUCHE### </div>
<div class="menucontainer"> ###MENU1### </div>
</div>
<div id="left">
<div class="menucontainer"> ###MENU2### </div>
<div class="menucontainer"> ###MENU3### </div>
<div class="powered"> ###POWERED### </div>
</div>
<div id="content2"> ###INHALT2### </div>
<div id="content"> ###INHALT### </div>
<br style="clear:both;" />
</div>

</body>
</html>

Wäre für Eure Hilfe sehr Dankbar.

Gruß
celeron

RoToRa 11.04.2004 14:02

Ehrlich gesagt war es etwas Arbeit raus zu finden, was da kaputt ist, und genau was der *IE* da macht ist mir rätselhaft. Im Opera 7 sieht es genau so aus wie im Mozilla und da eine der Grundregeln beim CSS-Layout schreiben ist: "Wenn Opera und Mozilla dasselbe machen, und der IE was anderes, dann ist immer der IE falsch", muss ich daraus schließen, dass du nur den IE beim Einwicklen verwendet hast :(

Ich kann dir jetzt sagen, was da passiert - und es ist beileibe kein "Schönheitsfehler" - , aber ich denke, das wird dir nicht viel helfen, da im Prinzip das ganze Layout kaputt ist. Ich denke da wirst Du (zumindest teilweise) von vorne anfangen müssen...

As irgendeinem Grund denkt der IE (und offenbar auch du), dass der "suche"-DIV genau links oben sitzt (sozusagen als sei es absolute positioniert) und du hast versucht es mit margin-left und margin-top an die richtge Stelle zu rücken. Der DIV ist aber nicht dort und der Abstand den du dort siehst ist der Margin vom suche-DIV. (Der "left"-DIV hat übrigens ein ähnliches Problem).

Ein paar allgemeine Tips:
- CSS-Layouts (eigentlich HTML/CSS-Seiten im allgemeinen) nie nur in einem Browser entwickeln - insbesondere nicht im IE, da er so viele Fehler hat.
- Du versuchst eine offenbar pixelgenaue, pseudo-absolutes Layout zu erstellen. Abgesehen davon das dein Layout so wie es jetzt ist nicht funktioniert, ist allgemein pixelgenau-positioniertes Layout mit HTML/CSS nicht sinnvoll möglich.
- Das gilt insbesondere beim Versuch die Font-Größe in Pixel zu besimmen. Ich beispielsweise habe im Mozilla eine minimale Font-Größe eingestellt und das zerstört das Layout noch mehr.

Ich weiss dieses Posting hat Dir warscheinlich nicht viel geholten und die Aussage recht hart ist, aber leider sehe ich nicht wie dieses Layout noch zu retten ist. Dabei sage ich nicht, dass das was du willst nicht möglich ist - nur nicht so :(

celeron 11.04.2004 15:32

Vielen Dank für Deine ehrliche Meinung, dann werd ich wohl ganz von vorne Anfangen müssen. Ist aber nicht so schlimm. In Zukunft nutze ich als 1. Browser Mozilla, dann sollte soetwas nicht mehr vorkommen.

Gruß
Celeron


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:42 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023