Roland Deschain
Mitglied
Hallo! Ich bin was CSS angeht noch relativ unerfahren und komme gleich mit 2 Problem zu euch. Ich habe ein zweispaltiges Layout (links Menü, rechts Content mit variabler Breite) plus Header und Footer. Das Grundlayout war getestet und frei verfügbar auf einer anderen Seite. In meinem jugendlichen Leichtsinn dachte ich, es kann nicht so schwer sein, ein paar Dinge anzupassen, doch nun bin ich am verzweifeln.
Problem 1: Bei div#footer habe ich eine horizontale Linie als Trenner, diese Linie wird im Firefox 2 über
dem Content angezeigt, d.h. der Footer scheint komplett dahinter zu liegen. Der IEx 7 macht es hingegen richtig.
Problem 2: Beim IEx 6 springt das komplette Menü ein paar Pixel zur Seite, wenn man mit der Maus drüber fährt. Erst dann ist das Menü in der richtigen Position. Im FF und IEx 7 gibts keine Probleme. Verrückterweise macht der IEx 6 auch keine Probleme, wenn ich ein leeres Kommentar am Anfang der HTML-Datei einfüge und damit den Quirks-Modus einschalte. Aber den möchte ich bei einer neu entwickelten Seite natürlich vermeiden, vor allem, weil er alle Browser betrifft.
CSS:
HTML(-Template):
Für Hilfe jeder Art bin ich dankbar.
Ich weiß, es ist ne Menge Quelltext, aber ich wollte ihn komplett posten, weil ich nicht weiß, welche Formatierung welche beeinflusst, bzw. vermute dort einen Fehler...
Problem 1: Bei div#footer habe ich eine horizontale Linie als Trenner, diese Linie wird im Firefox 2 über
dem Content angezeigt, d.h. der Footer scheint komplett dahinter zu liegen. Der IEx 7 macht es hingegen richtig.Problem 2: Beim IEx 6 springt das komplette Menü ein paar Pixel zur Seite, wenn man mit der Maus drüber fährt. Erst dann ist das Menü in der richtigen Position. Im FF und IEx 7 gibts keine Probleme. Verrückterweise macht der IEx 6 auch keine Probleme, wenn ich ein leeres Kommentar am Anfang der HTML-Datei einfüge und damit den Quirks-Modus einschalte. Aber den möchte ich bei einer neu entwickelten Seite natürlich vermeiden, vor allem, weil er alle Browser betrifft.
CSS:
HTML:
a{font-weight: bold;text-decoration: none}
a:link{color: #005DED}
a:visited{color:#005DED}
a:hover{color: #F48400}
img{border:0}
.smalltext {
font-size: 76%;
}
/* Layout */
html{margin:0;padding:0;}
body{margin:3px 3px 0 3px;padding:0;font: 76% Verdana,Arial,Helvetica,sans-serif;background:#fff}
div#container {overflow:hidden}
p{margin:0;padding:0;}
div#header h1{margin:0;padding:0;height:91px;white-space:nowrap}
div#menubar{height:20px;padding-left:253px;background:#005DED url(../img/layout/logo_.gif) left no-repeat;width:auto}
div#innermenubar{height:auto;border-top:3px solid #85898B;width:auto}
div#content p{line-height:1.4;margin:0 10px 10px}
div#content h1{font-size:1.4em}
div#content h3{font-size:1em;color:#666;}
div#footer{font-size:76%;color:#666;border-top:1px solid #5D97F1}
div#footer p{margin:0;padding:5px 10px}
div#wrapper{float:left;width:100%}
div#content{margin-left:170px}
div#SidebarL{float:left;width:160px;margin-left:-100%;background-color:#005DED}
/* Menu */
div#menu{border-left:3px solid #666B6E}
div#SidebarL ul {
margin:0 0 4px 6px;
padding:0;
list-style-type:none;
width:auto;
}
div#SidebarL ul li{display:block;margin:0;background:#5D97F1 url(../img/layout/menubg.gif) repeat-y}
div#SidebarL ul li a{display:block;color:#4D4D4D;text-decoration:none;
padding:3px 10px 3px 10px;border-bottom:1px solid #5D97F1;border-top:1px solid #C9DEFF}
div#SidebarL ul li a:hover{background: url(../img/layout/menubg_active.gif) repeat-y}
div#SidebarL ul li.Mlevel2 a{padding:3px 20px 3px 20px}
div#SidebarL ul#forum li{background:#EECBCB url(../img/layout/menubgforum.gif) repeat-y}
div#msgbox{height:74px;width:160px;background:url(../img/layout/msgbox.gif) no-repeat}
div#msgbox p{padding:12px 16px 2px 16px;font-size:0.8em}HTML(-Template):
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title><?=$head_title ?></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<?=$head ?>
<link rel="STYLESHEET" type="text/css" href="templates/style.css" />
</head>
<body>
<div id="container">
<div id="header"><h1><a href="http://www.start.de" title="Zur Startseite"><img src="img/layout/logo.gif" width="253" height="91" alt="Zur Startseite"></a><img src="img/layout/banner.jpg" alt="" width="728" height="90" hspace="4"></h1><div id="menubar"><div id="innermenubar"><?=$menubar ?></div></div></div>
<div id="wrapper">
<div id="content">
<p>
<h1 class="title"><?=$title ?></h1>
<?=$content ?>
</p>
</div>
</div>
<div id="SidebarL"><div id="msgbox"><p><?=$msgbox ?></p></div><div id="menu"><ul><li><a href="">Links</a></li><li><a href="">Kontakt</a></li><li><a href="impressum.php">Impressum</a></li></ul></div></div>
<div id="footer">
<p><?=$footer_message ?></p>
</div>
</div>
</body>
</html>Für Hilfe jeder Art bin ich dankbar.
Ich weiß, es ist ne Menge Quelltext, aber ich wollte ihn komplett posten, weil ich nicht weiß, welche Formatierung welche beeinflusst, bzw. vermute dort einen Fehler...
Zuletzt bearbeitet:
