Frage stellen
Ich habe mich vorhin endlich dazu durchgerungen vom Tabellendesign Abstand zu nehmen und mich darin versucht ein auf Div-Layern basierendes Design mittels CSS zu machen. Anfangs klappte es auch noch einwandfrei, aber dann wies der IE (mein Lieblingsbrowser in Sachen CSS, ich erinnere mich immer all zu gerne an diese Geschichte damals mit position:fixed - die kostete mich auch einiges an Nerven, bis ich gelesen habe, dass es ein bekannter 'Bug' ist) zwei riesige Freiräume im Design auf, die natürlich im Opera, FF, usw. nicht waren.
Sprich: Ich würde gerne wissen, wie ich das Design an den leider zum Großteil genutzten IE anpassen könnte.
=================================
Zunächst einmal die CSS Datei:
- Code: Alles auswählen
body {
margin: 0px;
padding: 0px; }
div#body {
width: 100%;
float: left; }
div#content {
float: left;
width: 690px;
padding-left: 20px;
padding-top: 20px; }
div#header {
float: left;
height: 235px;
width: 690px; }
div#mainheader {
float: left;
height: 191px;
width: 690px;
background-image: url(images/header.jpg);
background-repeat: none; }
div#subheader {
float: left;
height: 15px;
width: 690px;
background-image: url(images/sub_header.jpg);
background-repeat: none; }
div#navigation {
float: left;
height: 29px;
width: 690px; }
div#startseite {
float: left;
height: 29px;
width: 145px; }
div#ueber_uns {
float: left;
height: 29px;
width: 134px; }
div#angebot {
float: left;
height: 29px;
width: 134px; }
div#referenzen {
float: left;
height: 29px;
width: 133px; }
div#impressum {
float: left;
height: 29px;
width: 144px; }
div#seiteninhalt {
float: left;
height: 300px;
width: 690px;
background-image: url(images/bg_content.jpg);
background-repeat: none; }
div#seiteninhalt_innen {
float: left;
padding-top: 20px;
padding-left: 47px;
height: 250x;
width: 600px;
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #678BE3;}
div#footer {
float: left;
height: 85px;
width: 690px;
background-image: url(images/footer.jpg);
background-repeat: none; }
Dann noch die HTML Datei:
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>CSS-DIV Feldversuch</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="body">
<div id="content">
<!-- Header -->
<div id="header">
<div id="mainheader"></div>
<!-- Links -->
<div id="navigation">
<div id="startseite">
<a href="#" onmouseover="startseite.src='images/navi/rollover/startseite.jpg'" onmouseout="startseite.src='images/navi/startseite.jpg'"<img src="images/navi/startseite.jpg" style="border: 0px;" alt="Startseite" name="startseite" /></a>
</div>
<div id="ueber_uns">
<a href="#" onmouseover="ueber_uns.src='images/navi/rollover/ueber_uns.jpg'" onmouseout="ueber_uns.src='images/navi/ueber_uns.jpg'"><img src="images/navi/ueber_uns.jpg" border="0" alt="Über uns" name="ueber_uns" /></a>
</div>
<div id="angebot">
<a href="#" onmouseover="angebot.src='images/navi/rollover/angebot.jpg'" onmouseout="angebot.src='images/navi/angebot.jpg'"><img src="images/navi/angebot.jpg" border="0" alt="Angebot" name="angebot" /></a>
</div>
<div id="referenzen">
<a href="#" onmouseover="referenzen.src='images/navi/rollover/referenzen.jpg'" onmouseout="referenzen.src='images/navi/referenzen.jpg'"><img src="images/navi/referenzen.jpg" border="0" alt="Referenzen" name="referenzen" /></a>
</div>
<div id="impressum">
<a href="#" onmouseover="impressum.src='images/navi/rollover/impressum.jpg'" onmouseout="impressum.src='images/navi/impressum.jpg'"><img src="images/navi/impressum.jpg" border="0" alt="Impressum" name="impressum" /></a>
</div>
</div>
<!-- Links End -->
<div id="subheader"></div>
</div>
<!-- Header End -->
<div id="seiteninhalt">
<div id="seiteninhalt_innen">
CONTENT
</div>
</div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
Und zum Schluss noch ein Bild, wie es im IE aussieht und zum Vergleich im FF, wie es aussehen sollte:
Internet Explorer:
FireFox:
/edit: Es fehlt sogar ein Menüpunkt ("Startseite"), wie ich gerade bemerkt habe.
Des Weiteren schon mal vielen Dank im Voraus für euure Antworten (die mir hoffentlich weiterhelfen können
)
/edit²: Ich habe gerade bemerkt, dass ich aus Versehen bei einem <a>-Tag eine Klammer weggemacht hatte, deshalb ging der Startseiten Link nicht mehr auf dem Screenshot - es wird langsam Zeit fürs Bett...
