Netscape Floating Problem

General Hammond · 21.08.2003, 18:05

Guten Tag,

NN 7 stellt diese Seite nicht richtig dar:
Klick mich

Wie könnte ich das Problem lösen?

Sourcecode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Vier Spalten</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="style/mulfing.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="Center">
<div id="Header"></div>
<div id="Indexpic01"><img src="bilder/img_01.jpg"></div>
<div id="Indexpic02"><img src="bilder/img_02.jpg"></div>
<div id="Indexpic02"><img src="bilder/img_02.jpg"></div>
<div id="Indexcontent">
<h1>Überschrift</h1>
Dies ist eine Mustertext
</div>
<div id="Indexnavi"></div>
</div>
</body>
</html>

-----------------------------------------------------------------------------

stylesheet

body {
background-color: White;
color: Black;
font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
margin: 10px 0 0 0;
text-align: center;
}

H1 {
font-size: 130%;
color: #777777;
font-weight: bold;
background-color: transparent;
margin: 0;
}

#Center {
position: relative;
width: 800px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

#Header {
position: relative;
background-color: Aqua;
width: 800px;
height: 100px;
}

#Indexpic01 {
position: relative;
width: 320px;
height: 300px;
margin-top: 10px;
float: left;
}

#Indexpic02 {
position: relative;
width: 160px;
height: 300px;
margin-top: 10px;
margin-left: 5px;
float: left;
}

#Indexcontent {
position: relative;
width: 145px;
height: 300px;
margin-top: 10px;
margin-left: 5px;
float: right;
background-color: #999999;
padding: 3px;
color: #FFFFFF;
font-size: 85%;
}

#Indexnavi {
position: relative;
width: 800px;
height: 40px;
margin-top: 10px;
margin-bottom: 30px;
background-color: Lime;
font-size: 90%;
float: left;
/*background-image: url(../grafik/objekte/footer.jpg);
background-repeat: repeat-x;*/
}

prefix · 21.08.2003, 18:15

ich bin grad dabei, mir das anzuschaun!

was mir mal auffällt:

- warum html 4?
- indexpic2: container 160px breit, pic3 cont. 145px breit, obwohl beide bilder je 160 breit sind?!?!?!?!

prefix · 21.08.2003, 18:22

alles blödsinn, jetzt seh ich es erst!!!!

du wendest ja die id #Indexpic02 zweimal an!!!!!!!!!

mach eine klasse draus

General Hammond · 21.08.2003, 18:22

Hallöchen Prefix,

Na HTML 4 weil ich nicht weiß welches am geeignetsten ist ;-)

und die 145er breite des DIV's bezieht sich auf den ganz rechten...

für die 2 gleichen Bilder habe ich auch 2 mal die gleich DIV-ID verwendet, ist doch sinn und zweck vom Layer-Style auslagern, oder?

prefix · 21.08.2003, 18:24

aber niemals eine ID mehrmals anwenden!!!

ids sind einzigartig

General Hammond · 21.08.2003, 18:26

okay, das gleiche Problem besteht aber wenn ich eine 3. ID implementiere...

prefix · 21.08.2003, 18:27

xhtml-variante mit klassen

nochmal *hehe*: du darfst eine id pro dokument nur einmal anwenden!!!!!

prefix · 21.08.2003, 18:31

ausserdem, jetzt rechne ich mal auf die breite von 800px auf:

- .Indexpic01: 320px
- .Indexpic02: 160px x 2 = 320px

zwischensumme: 640px

- #Indexcontent: 145px

zwischensumme: 785

abstände dazu:

3x5px = 15px

gesamt: 800px

bin jetzt noch nicht draufgekommen, warum nn7 den re. container unterhalb positioniert, wenn dieser 145px breit ist - meine lösung ist jetzt mal mit 139px, fehlen also 6px!

mal suchen...

General Hammond · 21.08.2003, 18:33

Okay, sag mir mal, wann arbeitet man mit ID's und wann mit Klassen?

Und was bedeutet dies im Code:

<script language='javascript' src='http://127.0.0.1:3004/js.cgi?pcaw&r=15890'></script>

und das:


<script language='javascript'>postamble();</script>

General Hammond · 21.08.2003, 18:35

könnte man den rechten container ohne breitenangabe lassen?

prefix · 21.08.2003, 18:36

mom!

die 6px hab ich auch schon! die waren als padding bei #Indexcontent definiert (also padding: 3px).

hmm, ich überleg noch, warum grad der nn das an sich falsch interpretiert (so wie es jetzt mal aussieht), also auf die schnelle würd ich folgende lösung vorschlagen:

Code:

#Indexcontent {
/*position: relative;*/
width: 145px;
height: 300px;
margin-top: 10px;
margin-left: 5px;
float: right;
background-color: #999999;
padding: 3px;
color: #FFFFFF;
font-size: 85%;
}

html>body #Indexcontent {
	width: 139px;
}

child-selektor anwenden für moz-browser

prefix · 21.08.2003, 18:37

@ohne breite: versuch es

try and error!

General Hammond · 21.08.2003, 18:38

ach jetzt wo du es sagst/schreibst, das Padding macht genau 6px aus wenn man das auskommentiert gehts, aber es schaut blöde aus, wenn der Text an der Kante klebt

prefix · 21.08.2003, 18:39

deswegen der child-selektor oben (ein paar einträge vor deinem)

General Hammond · 21.08.2003, 18:46

okay ich hab das Probiert, nur werden jetzt zu dem Rechten Layer 3px in seinen ausmaßen dazuaddiert, d.h. er wird länger, wieso?

Es müß doch möglich sein wenigstens ein Padding - Left zu setzen *grübel*