# problem mit div float und Firefox und IE



## maozetung (6. September 2007)

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


----------



## Maik (6. September 2007)

Hi,

soviel sei schon mal verraten: Wenn das Dokument im "Standardsmode" übergeben wird, stellt der IE das Layout ebenfalls verkehrt dar.


----------



## uafsc (6. September 2007)

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...


----------



## Maik (6. September 2007)

uafsc hat gesagt.:


> Beschreib doch dein Problem mal ein bisschen genauer und mach ggf. einen Screenshot...


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.


----------



## maozetung (6. September 2007)

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, ..


----------



## maozetung (6. September 2007)

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


----------



## daheadcracker (6. September 2007)

lösch mal die"width:...px;" und "height:...px" angaben von den containern, dann dürfts klappen.

mfg ...


----------



## Maik (6. September 2007)

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.


Das Dokument wird derzeit mit diesem Doctype


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

Wenn du stattdessen z.B. diesen Doctype einsetzt:


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
```
wird das Dokument im "Standardsmode" übergeben.


----------

