• Willkommen im Linux Club - dem deutschsprachigen Supportforum für GNU/Linux. Registriere dich kostenlos, um alle Inhalte zu sehen und Fragen zu stellen.

css-layout Problem mit IE / FF

chees

Newbie
Hallo,
nachdem ich nun schon tagelang an meinem Layout 'rumcode, ist mein Blick mittlerweile wohl so vernagelt, dass ich nicht checke, warum ich folgendes Problem habe:

Mein Layout hat einen Kopf, eine Kopfnavigation und einen Footer. Dazwischen sollen nebeneinander die linke Navigation, der Content-Bereich und ein schmaler rechter Bereich erscheinen.

Im IE und Opera sieht es so aus, wie ich will, im FF nicht:
http://u0034893380.user.taurus.hosting-agency.de/index.php?id=1

Mein html-Code sieht so aus:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Projekt 1</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="fileadmin/templates/tpl1.css" type="text/css">
</head>
<body>

<div id="header">
###TRAILER###
</div>
<div id="headnavi">
###MENU_OBEN###
</div>
<div id="wrapper">
<div id="content">
###CONTENT###
</div>
</div>
<div id="navigation">
###MENU_LINKS###
</div>
<div id="extra">
###RECHTS###
</div>
<div id="footer">
</div>

</body>
</html>

und meine css so:

html,body{background:#E2F5E5;margin:0;padding:0}

div#header{height:86px;width:100%;margin:0;background:#E2F5E5}
div#headnavi{width:100%;margin:0;background:#478951;height:20px;font:small arial;color:#ffffff;text-align:right;text-indent:px}

div#navigation{background:#478951;float:left;width:150px;margin-top:1px;margin-left:-100%}

div#content{width:100%;margin:0 150px;padding:10px 10px}
div#wrapper{float:left;width:100%}

div#extra{float:left;background:#82BC8B;width:165px;margin-top:1px;margin-left:-165px;padding-top:10px}
div#footer{background:#333;color:#FFF;clear:left;width:100%;height:15px;font:11px arial;text-align:right;margin:0;padding-right:5px}

.linkWeiss{
font: 12px;
font-style: normal;
color: #ffffff;
}

Wenn ich nun für das content-Element die width-anweisung entferne, ist's im FF o.k., im IE aber nicht. Füge ich width:100% ein, ist's im IE o.k., im FF aber nicht (der Content beginnt dann neben der linken Navigation, geht aber "unter" dem rechten Block durch über den Bildschirmrand hinaus).

:?: Was habe ich falsch gemacht ? :?:

read you,
chees
 
OP
C

chees

Newbie
.. durch eine Änderung der Positionierung der div-layer:

div#navigation{position:absolute;z-index:1;top:110;left:0px;background:#478951;width: 150px;height:100%-106px}
div#content{position:absolute;z-index:2;top:110;left:151;right:165;height:100%-106px}
div#extra{position:absolute;z-index:3;top:110;right:0;background:#82BC8B;width:1 65px;height:100%-106px}
div#footer{position:absolute;z-index:4;bottom:0;left:0;background:#333;color:#FFF ;width:100%;height:15px;font:11px arial;text-align:right}

:-D
 
Oben