Div Problem mit IE7 und Firefox 2

jack1987 · 16. November 2007

Hi

ich hab folgendes Problem mit der Darstellung der Page zwischen IE und FF...
(die verwendeten Bilder sind nur zum test und haben nichts mit dem Design zu tun)

folgt sieht es aus

beim Firefox ist oben ein Rand der weg muss und beim IE ist links ein Rand der weg soll...

hier der code vom css und layout

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"> 
<!-- 
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; 
	padding: 0;
	text-align: center; 
	color: #000000;
}
.twoColLiqLtHdr #container { 
	width: 1000px;  
	background: #FFFFFF;
	margin: 0 auto; 
	border: 1px solid #000000;
	text-align: left;
} 
.twoColLiqLtHdr #header {
	background: #DDDDDD;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
	height: 100px;
} 
.twoColLiqLtHdr #header h1 {
	margin: 0; 
	padding: 10px 0;
}

.twoColLiqLtHdr #sidebar1 {
	float: left;
	width: 185px; 
	background: #EBEBEB;
	padding-top: 15px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 0;
	height: 350px;
}
.twoColLiqLtHdr #sidebar1 h3, .twoColLiqLtHdr #sidebar1 p {
	margin-left: 10px; 
	margin-right: 10px;
}


.twoColLiqLtHdr #mainContent {
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 185px;
} 
.twoColLiqLtHdr #footer { 
	padding: 0 10px; 
	background:#DDDDDD;
} 
.twoColLiqLtHdr #footer p {
	margin: 0; 
	padding: 10px 0; 
}


.fltrt { 
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
--> 
</style>
<!--[if IE]>
<style type="text/css"> 
.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }
.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }
</style>
<![endif]--></head>

<body class="twoColLiqLtHdr">

<div id="container">

      <container id="1" name="Text" types="Content" default=""></container>

<div id="header" style="background:url(banner.jpg)">CMS_CONTAINER[2]
<!-- end #header --></div>
<div id="sidebar1"  style="background:url(menue.jpg)">CMS_CONTAINER[3]
<!-- end #sidebar1 -->
</div>
<div id="mainContent"  style="background:url(back.jpg)">CMS_CONTAINER[4]
</div>
<br class="clearfloat" />
<div id="footer">CMS_CONTAINER[5]
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

da ich leider noch Anfaänger bin was css und div Container angeht weiß ich nicht mehr so wirklich weiter

vielleicht kann mir ja jemand von euch helfen

schon mal danke ich voraus.
mit freundlich grüßen
Jack

Maik · 16. November 2007

Hi.

Lösung für den "3px-Gap-Bug" im IE:

Code:

.twoColLiqLtHdr #sidebar1 {
        float: left;
        width: 185px;
        background: #EBEBEB;
        padding-top: 15px;
        padding-right: 0;
        padding-bottom: 15px;
        padding-left: 0;
        height: 350px;
        margin-right:0 !important;
        margin-right:-3px;
}

.twoColLiqLtHdr #mainContent {
        margin-top: 0;
        margin-right: 0px;
        margin-bottom: 0;
        margin-left: 185px !important;
        margin-left:182px;
}

Lösung gegen das Verschieben des Elements #mainContent im Firefox:

Code:

.twoColLiqLtHdr #mainContent p {
margin:0;
padding:10px 0;
}

Falls hier beispielsweise zunächst ein Überschriftenelement 1.Ordnung notiert wird, lautet die Regel:

Code:

.twoColLiqLtHdr #mainContent h1 {
margin:0;
padding:10px 0;
}

jack1987 · 16. November 2007

hey,

danke, das das so schnell geht hät ich nicht erwartet ;-)

vielen Dank Maik.

freetz Jack

jack1987 · 16. November 2007

eine frage hätte ich noch

wenn ich dem main container ne feste höhe gebe wird das 1. vom IE ignoriert und im FF gehts aber der inhalt der box läuft weiter nach unten über alles andere drüber.

ich kann ich das machen das der background fest fixird bleibt und das man in der "Box" nach unten scrollen kann?

der main container soll genauso hoch sein wie das menü und bei bedarf so das der inhalt nur in dem container gescrollt werden kann

Maik · 16. November 2007

Ich häng dir mal den vollständigen Quellcode an

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body  {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        background: #666666;
        margin: 0;
        padding: 0;
        text-align: center;
        color: #000000;
}
.twoColLiqLtHdr #container {
        width: 1000px;
        background: #FFFFFF;
        margin: 0 auto;
        border: 1px solid #000000;
        text-align: left;
}
.twoColLiqLtHdr #header {
        background: #DDDDDD;
        padding-top: 0;
        padding-right: 10px;
        padding-bottom: 0;
        padding-left: 10px;
        height: 100px;
}
.twoColLiqLtHdr #header h1 {
        margin: 0;
        padding: 10px 0;
}

.twoColLiqLtHdr #sidebar1 {
        float: left;
        width: 185px;
        background: #EBEBEB;
        padding-top: 15px;
        padding-right: 0;
        padding-bottom: 15px;
        padding-left: 0;
        height: 350px;
        margin-right:0 !important;
        margin-right:-3px;
}

.twoColLiqLtHdr #sidebar1 h3, .twoColLiqLtHdr #sidebar1 p {
        margin-left: 10px;
        margin-right: 10px;
}

.twoColLiqLtHdr #mainContent {
        margin-top: 0;
        margin-right: 0px;
        margin-bottom: 0;
        margin-left:0 !important;
        margin-left:182px;
        padding:15px 0;
        height:350px;
        overflow:auto;
}

.twoColLiqLtHdr #mainContent p {
margin:0;
padding:10px 0;
}

.twoColLiqLtHdr #footer {
        padding: 0 10px;
        background:#DDDDDD;
}
.twoColLiqLtHdr #footer p {
        margin: 0;
        padding: 10px 0;
}

.fltrt {
        float: right;
        margin-left: 8px;
}
.fltlft {
        float: left;
        margin-right: 8px;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
-->
</style>
<!--[if IE]>
<style type="text/css">
.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }
</style>
<![endif]--></head>

<body class="twoColLiqLtHdr">

<div id="container" class="clearfix">

      <container id="1" name="Text" types="Content" default=""></container>

<div id="header" style="background: url(banner.jpg)">CMS_CONTAINER[2]
<!-- end #header --></div>
<div id="sidebar1"  style="background: url(menue.jpg)">CMS_CONTAINER[3]
<!-- end #sidebar1 -->
</div>
<div id="mainContent"  style="background: url(back.jpg) fixed"><p>CMS_CONTAINER[4]</p><p>CMS_CONTAINER[4]</p><p>CMS_CONTAINER[4]</p><p>CMS_CONTAINER[4]</p><p>CMS_CONTAINER[4]</p><p>CMS_CONTAINER[4]</p><p>CMS_CONTAINER[4]</p><p>CMS_CONTAINER[4]</p><p>CMS_CONTAINER[4]</p><p>CMS_CONTAINER[4]</p><p>CMS_CONTAINER[4]</p><p>CMS_CONTAINER[4]</p><p>CMS_CONTAINER[4]</p><p>CMS_CONTAINER[4]</p><p>CMS_CONTAINER[4]</p><p>CMS_CONTAINER[4]</p><p>CMS_CONTAINER[4]</p><p>CMS_CONTAINER[4]</p>
</div>
<div id="footer">CMS_CONTAINER[5]
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

jack1987 · 16. November 2007

hey danke das geht

aber noch ne letzte kurze frage.
warum steht jetzt 18 mal <p>CMS_CONTAINER[4]</p> hintereinenader?
war das absicht? hab ich einmal gelassen und geht ja auch oder hatte das nen sinn den ich noch nciht see?

greetz...

Maik · 16. November 2007

Den Absatz hab ich mehrfach dupliziert, damit es auch was zum Scrollen gibt

jack1987 · 16. November 2007

aso, danke noch mal^^

hab mich nur erst gewundert warum mein cms sagt das container 4 18 mal benutzt wird^^

damit ist das thema erstmla beendet^^

jack1987 · 16. November 2007

langsam wirds fast peinlich aber ich muss nochmal eine frage stellen

der quellcode ist der von Maik letzte erstellte

prob 1 ist das im IE noch 2 ränder sind die ich nicht wegbekomme und 2. ist das FF irgentwie 5-6 pixel ungefähr weniger von der grafik anzeigt wie der ie, also sieht aus als wenn die grafik verschoben ist ein kleines stück

und so sieht es aus

Maik · 16. November 2007

Das "verschobene" Hintergrundbild hängt mit dem Wert fixed zum Fixieren des Hintergrundbildes zusammen.

FF benötigt diesen Wert in dem Modell eigentlich überhaupt nicht, wie dieser Code beweist:

Code:

<div id="mainContent"  style="background: url(back.jpg);background-attachment:inherit !important;background-attachment:fixed;">...</div>

Die Ränder im IE könnten evtl. an dem Formularelement liegen, dessen Außenabstände hier zum Vorschein kommen. In diesem Fall könnte folgende Regel Abhilfe schaffen:

Code:

form {
margin:0;
padding:0;
}

Div Problem mit IE7 und Firefox 2

jack1987

Grünschnabel

Maik

jack1987

Grünschnabel

jack1987

Grünschnabel

Maik

jack1987

Grünschnabel

Maik

jack1987

Grünschnabel

jack1987

Grünschnabel

Maik

Neue Beiträge