Kann Darstellungsunterschiede bei FF und IE nicht beheben

FaFoo

Moin, moin...

Ich habe Probleme mit der Umsetzung eines Designs.
Mit Photoshop habe ich folgendes Design erstellt:

[Blockierte Grafik: http://img105.imageshack.us/img105/816/designon1.jpg]

Bei meiner Umsetzung in HTML sieht das ganze in den beiden Browsern aber anders aus. Im Internet Explorer mehr, im Firefox etwas weniger.

Hier der Link zu der Seite

Und hier noch der Code:

index.php

HTML

<html>
<head>
<title>your-page.net - Willkommen</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body bgcolor="#757575">
<center>
<div id="container">


<div id="banner">
    [img]img/your-page.gif[/img]
</div>


<div id="login">
</div>


<div id="navi">
</div>


<div id="content">
</div>


</div>
</center>
</body>
</html>

Alles anzeigen

style.css

Code

#container {
width:802px;
}


#banner {
width:800px;
height:119px;
border:solid 1px #000000;
}


#login {
width:800px;
height:17px;
border:solid 1px #000000;
background-color:#FFFFFF;
margin-top:1px;
margin-bottom:1px;
}


#navi {
width:133px;
height:500px;
border:solid 1px #000000;
background-color:#FFFFFF;
margin-right:1px;
float:left;
}


#content {
width:664px;
height:500px;
border:solid 1px #000000;
background-color:#FFFFFF;

Alles anzeigen

Man könnte das zwar auch einfach anders lösen aber mich würde schon interessieren was hier falsch ist?
Würde mich freuen wenn sich jemand der Sache annimmt.
Mfg

Jan91

Warum soll was falsch sein. du hast halt bis jetzt nur das Grundgerüst gemacht. Das Bannerbild und die paar Tabellen. und der rest??
Da steht noch gar nichts in deiner PHP Datei drin! Die haupttabelle muss noch größer werden. Viel Glück.

Jan

FaFoo

Ok, der Inhalt und das Menü fehlen natürlich noch. Hätte ich schreiben sollen. Und PHP kommt später.
Es geht mir nur um die richtige Darstellung von den drei Boxen. Banner, Menü und Inhalt. Die müssten eigentlich schon so positioniert sein wie in der Grafik.
Ich formulier einfach mal die Fehler aus.

IE:
- zwischen dem Banner und seinem unteren Border sind ein paar pixel frei
- die weiße Leiste unter dem Banner müsste 2 Pixel breiter sein
- der Abstand zwischen der Menü-Box und der Inhalt-Box ist ein Pixel zu groß

FF:
- die Inhalt-Box ist einige Pixel zu schmal
- sie grenzt direkt an die Menü-Box an
- zwischen der Menü-Box und der Inhalt-Box ist nur ein Pixel Border

Das dürfte alles gar nicht so sein. Die Boxen müssten genau so sein wie in der Grafik.

FaFoo

Also ich hab das ganze jetzt mit einer Tabelle gelöst. Aber selbst damit habe ich Probleme, diese sind aber zum Glück in Firefox und Internet Explorer gleich.

Im Menü ist links zu viel freier Raum. Die gesamte Box ist 171 Pixel breit obwohl sie nur 133 Pixel breit sein sollte.

Außerdem bekomm ich es einfach nicht hin die rechte Box für den Inhalt auf 644 Pixel (wie in der Grafik oben) zu begrenzen.

Den HTML-Code könnt ihr euch ja im Browser angucken.
Hier die neue CSS-Datei:

Code

td {
border:				solid 1px #000000;
}


.eingabe {
width:				90px;
height:				15px;
border-top:			0px;
border-bottom:			0px;
border-left:			solid 1px #000000;
border-right:			solid 1px #000000;
font-family:			Microsoft Sans Serif;
font-size:			10px;
margin-left:			10px;
}


.button {
width:				40px;
height:				16px;
border:				solid 1px #000000;
font-family:			Microsoft Sans Serif;
font-size:			9px;
background-color:		#FFFFFF;
}


.link {
color:				#5094C4;
font-family:			Microsoft Sans Serif;
font-size:			12px;
text-decoration:			underline;
margin-left:			3px;
margin-right:			3px;
}


.menuename {
width:				70px;
font-family:			Tahoma;
font-size:			9px;
border-top:			solid 1px #000000;
border-bottom:			solid 1px #000000;
margin-top:			30px;
margin-bottom:			20px;
text-align:			right;
}


.menue a {
width:				133px;
color:				#FFFFFF;
font-family:			Tahoma;
font-size:			12px;
text-decoration:			none;
padding-left:			4px;
padding-right:			4px;
padding-top:			2px;
padding-bottom:			2px;
}


.menue a:hover {
text-decoration:			underline;
}


.menue li {
width:				131px;
border-top:			solid 1px #000000;
background-color:                #5094C4;
margin-top:			2px;
margin-bottom:			2px;
}

Alles anzeigen

Und hier nochmal der Link zur Seite

Ich hab schon einiges versucht und mach sowas eigentlich auch nicht zum ersten mal aber irgentwie bekomm ich nicht hin die Seite so aussehen zu lassen wie oben in der Grafik.

FaFoo

Habs geschafft, danke!

Tags