problem mit div float und Firefox und IE @ tutorials.de: Tutorials, Forum & Hilfe

maozetung · 06.09.07 13:41

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

</head>
<body>
<div id="position">
<div id="kastenform">

<div id="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>

<div id="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>

<div id="kasten_mitte">
<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>

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

</div>
</div>

</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;
}

/*

.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 · 06.09.07 13:51

Hi,

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

uafsc · 06.09.07 13:55

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 · 06.09.07 13:58

Zitat von uafsc

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 · 06.09.07 14:20

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 · 06.09.07 15:01

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 · 06.09.07 18:44

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

mfg ...

Maik · 06.09.07 18:45

Zitat von maozetung

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

Code :

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

im "Quirksmode" übergeben.

Wenn du stattdessen z.B. diesen Doctype einsetzt:

Code :

1 2	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

wird das Dokument im "Standardsmode" übergeben.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Float-Fehler (nur) im Firefox 2

IE6 vs. IE7 vs. Firefox float Probleme

Problem bei float:left und float:right im FF

Firefox macht Probleme bei float

Problem in Firefox mit Css Float

E-Mail:

Abonnieren Abbestellen