problem mit div float und Firefox und IE

Status
Nicht offen für weitere Antworten.
maozetung

maozetung

Grünschnabel
Hallo liebe Gemeinde,
ich habe ein Problem mit meinem markup.

Ich weiss, das das thema schon mal besprochen wurde, aber ich habe gesucht und jetzt viel ausprobiert und komme nicht auf ein einheitliches Design und beiden Browsern. Im Firefox verschieben sich die Div-Container und werden falsch dargestellt. Der Explorer IE6 macht das schon genauer.

Hat jemand eine Idee, wo der Fehler sein kann? Hier die beiden Codes:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>

</title>
<link rel="STYLESHEET" type="text/css" href="css/style.css">
<!--[if IE]>
<style type="text/css">@import url(ie.css);</style>
<![endif]-->
</head>
<body>
<div id="position"><!-- Anfang -->
<div id="kastenform"><!-- Haupt-Kastenform -->

<div id="kasten1"><!-- kasten1 -->
<div class="box1_oben"><a href="#">
<img src="#" alt="logo" border="0"></img></a>
</div>
<div class="box2_oben"><a href="sites/aktuelles.html">
<img src="#" alt="uebericht" border="0"></img></a>
</div>
<div class="box3_oben"><a href="sites/projekte.html">
<img src="#" alt="projekte" border="0"></img></a>
</div>
<div class="box3_oben"><a href="#">
<img src="#" alt="kurse" border="0"></img></a>
</div>
</div><!-- Ende kasten1 -->


<div id="kasten_navi_mitte"><!-- kasten navi_mitte -->
<div class="box_nav2"><a href="#">
<img src="#" alt="workshops" border="0"></a>
</div>
<div class="box_nav3"><a href="#">
<img src="#" alt="wer" border="0"></a>
</div>
<div class="box_nav4"><a href="#">
<img src="#" alt="wo" border="0"></img></a>
</div>
<div class="box_nav5"><a href="sites/kontakt.html">
<img src="#" alt="kontakt" border="0"></img></a>
</div>
</div><!-- Ende navi_mitte -->


<div id="kasten_mitte"><!-- mitte CONTENT-->
<div class="box_seite">
<div id="content-texte">
<div id="content-texte-box2">
<p style="font-size:15px; font-weight:bold; margin-top:2em">beispiel</p>


</div>
</div>
</div>
<div class="box_content">


<div id="content-texte">
<div id="content-texte-box">
<h2>name</h2>


</div>
</div>

</div>
</div><!-- mitte -->


<div id="kasten-unten"><!-- unten -->
<div class="box_unten1">Kontakt
</div>
<div class="box_unten2">Impressum
</div>
<div class="box_unten3">Sitemap
</div>
</div><!-- unten -->

</div><!-- Kastenform -->
</div><!-- Ende -->

</body>
</html>

________________________________________________________
und
CSS:

*{
margin: 0;
padding: 0;
}
/*verhindert rahmen bei opera--s*/
a:link img, a:visited img,a:hover img, a:focus img, a:active img {
border: 0;
}

html,body{
background-color:#993333;

}

.img{
margin:0em;
padding: 0em;
}

body {
font-size: 12px;
font-weight:bold;
color:#000066;
font-family:Helvetica, Arial;

width: 100%;
height:100%;
padding: 0;
margin: 0;
}

#position{
position: absolute;
width: 89em;
height: 100%;
left: 0%;
top: 0%;
margin-left: -0em;
margin-top: -0em;
}


/*hauptkasten---------------------------------*/
#kastenform{
position: absolute;
width:86em;
margin-left: 1em;
margin-top: 1em;
margin-right: 1em;
border: 2px solid black;
margin-bottom: 0.3em;
padding:0.1em;
background-color:#CC3333;

}



/*Anordnung Kasten----------------------------*/
#kasten1{

width:85em;
height:10em;
border: 0px solid black;
border-style:thin;

padding:1em;

/* -moz-opacity:0.2; -khtml-opacity:0.2; opacity:0.2;
filter:alpha(opacity=75);*/
}

#kasten_navi_mitte{
width:85em;
height:7em;
border: 0px solid white;
border-style:thin;
padding:1em;
clear:left;
margin-left: 6em;
}

#kasten_mitte{

height:30em;
width:85em;
border: 0px solid white;
border-style:thin;
margin-left: 0.85em;
padding: 1em;

margin-top:-1em;


}

#content-texte{
padding:0.5em;
height:28em;
}

#text-style{
text-align: justify;
}

#content-texte-box2{
padding:1.5em;
height:100%;
margin:0;
background-color:#3399ff;
border:1px solid black;
border-style:thin;
}

#content-texte-box{
padding:1.5em;
height:100%;
margin:0;
background-color:#3399ff;
border:1px solid black;
border-style:thin;
}
#content-texte h2{
margin:0em;
font:bold 1.5em verdana, sans-serif;
}
#content-texte h3{
margin:10px;
font:bold 16px verdana, sans-serif;
}
#content-texte h4{
margin:10px;
font:bold 14px verdana, sans-serif;
}



#kasten_unten{

width:85em;
border:2px solid white;
border-style:thin;
padding: 0.5em;
margin-left:0.5em;
clear:left;
}


/*Anordnung boxen, mit Transparenz, Schrift ebenfalls*/
.box_seite{

float:left;
border:1px solid black;
border-style:thin;
width:21em;
padding:0.1em;
height:30em;
background:#ffffff;
/*
-moz-opacity:0.2; -khtml-opacity:0.2; opacity:0.2;
filter:alpha(opacity=10);*/

margin:0em 0em 0em 0em;
}

/*
<!-- nimmt die Div/Schrift aus DIV heraus und setzt die Farbe auf 100 nur IE-->
.box_seite font{
position:relative;
-moz-opacity:1; -khtml-opacity:1; opacity:1;
filter:alpha(opacity=100);
}*/

.box_content{

border:1px solid black;
border-style:thin;
width:auto;
height:30em;
background:white;
margin:0em 0em 0em 0em;
padding:0em;
margin-left:2em;
}

.box1_oben, .box2_oben, .box3_oben, .box4_oben{
float:left;
padding:0.1em;
padding-top:0.5em;
border:2px solid white;
border-style:thin;
width:19em;
height:7em;
margin:0em 0em 0em 0.5em;
}

.box_nav1, .box_nav2, .box_nav3, .box_nav4, .box_nav5{

padding-top:0.1em;
padding-left:0.8em;
float:left;
color:#000066;
border:2px solid white;
border-style:thin;
width:18.5%;
height:3em;
margin:-0.2em 0em 0em 0.5em;
padding:0.8em;

}

#box-inhalt{
padding-left:1em;
border:1px solid white;
}

.box_unten1, .box_unten2, .box_unten3{
float:left;
padding:0.2em;
border:1px solid white;
border-style:thin;
width:27em;
height:2em;
margin:0em 0em 0em 1em;

}

/*--------------------------------------------*/
.imagefloat {
float: right;
padding: 0em;
margin-right:1em;
border: 0px solid #9FA41D;
margin: 3em 0em 2em 0em;
}



/*Farben boxen----------------------------*/
.box1_oben{
/*background:#3399ff; #000099*/
padding-top:0.7em;
padding-left:1em;
}

.box2_oben{
/*background:#3399ff;*/
padding-top:2em;
padding-left:1em;
}

.box3_oben{
/*background:#3399ff;*/
padding-top:2em;
padding-left:1em;
}

.box4_oben{
/*background:#3399ff;*/
padding-top:2em;
padding-left:1em;
}


.box_nav1{
/*background:#3399ff;*/
padding-top:0.22em;
padding-left:0.1em;
}

.box_nav2{
/*background:#3399ff;*/
}

.box_nav3{
/*background:#3399ff;*/
}

.box_nav4{
/*background:#3399ff;*/
}
.box_nav5{
/*background:#3399ff;*/
}

.box_unten1{
background:#3399ff;
padding-top:0.22em;
padding-left:3em;
}

.box_unten2{
background:#3399ff;
padding-top:0.22em;
padding-left:3em;
}

.box_unten3{
background:#3399ff;
padding-top:0.22em;
padding-left:3em;
}


/*--------------------------------------------*/

_________________________________________________________


vielen Dank,
Gruß aus berlin
 
Zuletzt bearbeitet:
Hi,

soviel sei schon mal verraten: Wenn das Dokument im "Standardsmode" übergeben wird, stellt der IE das Layout ebenfalls verkehrt dar.
 
Wenn du Code postest, [ CODE]*Code hier rein*[/CODE ].
Das gleiche für HTML ([ HTML, [/HTML ]) und für PHP... etc.

Beschreib doch dein Problem mal ein bisschen genauer und mach ggf. einen Screenshot...
 
uafsc hat gesagt.:
Beschreib doch dein Problem mal ein bisschen genauer und mach ggf. einen Screenshot...
Zum Vergrößern anklicken....
Kopier dir doch einfach den gezeigten Quellcode und betrachte anschliessend die Seite in den beiden genannten Browsern.

@Topic: Vermutlich hast du es versäumt, die Innenabstände und Rahmenstärken von den Breiten-/Höhenangaben der einzelnen Elemente zu subtrahieren, da diese gemäß dem Boxmodell hinzuaddiert werden, und somit die "tatsächliche" Boxdimension ergeben.

Aus diesem Grund verschiebt sich auch alles im FF. Wenn das Dokument nicht im "Quirksmodus" übergeben wird, passiert im IE das gleiche.
 
Danke .

Das Problem habe ich nicht mit den beiden oberen Containern, sondern mit "kasten_mitte" und "kasten-unten".
Der Firefox floatet zwar die beiden "box_seite" und "box_content", gibt aber keinen richtigen Abstand und falsche Höhe, wenn ich diese mit Inhalt fülle. Zudem, die Weite nimmt er auch nicht richtig.
Der Explorer zeigt es weitesgehend so an, wie ich es haben möchte.

hm, ..
 
Den Browsers in den Quicks-Modus zu verstellen habe ich schon versucht, auch das ich die Elemente verkleinerte, gab nicht den Erfolg.

hat das was mit den float und clear zu tun und dem width=100 % in dem hauptkasten?

Danke für antworten
 
maozetung hat gesagt.:
Den Browsers in den Quicks-Modus zu verstellen habe ich schon versucht, auch das ich die Elemente verkleinerte, gab nicht den Erfolg.
Zum Vergrößern anklicken....
Das Dokument wird derzeit mit diesem Doctype

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
im "Quirksmode" übergeben.

Wenn du stattdessen z.B. diesen Doctype einsetzt:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
wird das Dokument im "Standardsmode" übergeben.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück