zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Seite mit IE ok. Aber Mozilla haut mir andere Abstände rein

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.04.2004, 16:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.04.2004
Beiträge: 5
celeron befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.04.2004, 14:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

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 :(
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.04.2004, 15:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.04.2004
Beiträge: 5
celeron befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Andere Darstellung der Seite im Firefox Xsixpence CSS 2 12.04.2006 09:58
Kann mir jemand sagen, ob meine Seite WAI konform ist? mar123 Barrierefreiheit 10 10.10.2005 22:41
Seite bringt Mozilla zum absturz jensr CSS 12 10.06.2005 19:19
oper und anker im div Holger (HMR) CSS 25 18.01.2005 14:01
Seite in Mozilla total "schräg" Nina CSS 15 30.04.2004 21:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:30 Uhr.