Hallo!
Ich habe bisher zu dem Thema nichts gefunden und hoffe, ihr könnt mir helfen!
Wie ihr seht, habe ich einen sticky footer und an den Seiten einen box-shadow. In Firefox, Chrome, Safari und Opera läuft alles, bloß im IE ist der footer um die Schattenbreite nach links verschoben. Außerdem ist der Schatten auf Seiten mit kurzem Inhalt unterbrochen. Hier mal screenshots:
Und das ist der HTML-Code:
Und die CSS-Datei:
Was tun?
Danke schonmal und Gruß!
Ich habe bisher zu dem Thema nichts gefunden und hoffe, ihr könnt mir helfen!
Wie ihr seht, habe ich einen sticky footer und an den Seiten einen box-shadow. In Firefox, Chrome, Safari und Opera läuft alles, bloß im IE ist der footer um die Schattenbreite nach links verschoben. Außerdem ist der Schatten auf Seiten mit kurzem Inhalt unterbrochen. Hier mal screenshots:
Und das ist der HTML-Code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="menu">
<ul>
<li><a href="index.html">Über uns</a></li>
<li style="background-color: rgb(82, 103, 168);"><a>Leistungen</a></li>
<li><a href="sprechzeiten.html">Sprechzeiten</a></li>
<li><a href="anfahrt.html">Anfahrt</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</div>
<div id="content">
<p class="text_aufzaehlung">
Arbeitsrecht<br />
Familien- und Erbrecht<br />
Kaufrecht<br />
Mietrecht<br />
Notariat<br />
Ordnungswidrigkeiten<br />
Straßenverkehrsrecht<br />
Unterhaltsrecht<br />
Baurecht<br />
xxx<br />
xxx<br />
xxx<br />
xxx<br />
xxx<br />
xxx<br />
xxx<br />
xxx<br />
xxx<br />
xxx<br />
xxx<br />
xxx<br />
xxx<br />
</p>
</div>
</div>
<div id="footer"></div>
</body>
</html>Und die CSS-Datei:
Code:
* {
margin:0;
padding:0;
text-decoration: none;
}
html,body {
height:100%;
}
body {
text-align:center; /* nur für alte Browser */
font-family:Verdana, Helvetica, Arial, sans-serif;
font-size:13px;
overflow-y:scroll;
}
#wrapper {
position:relative;
width:800px;
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto -10px;
box-shadow: 3px 0 15px #aaa,
-3px 0 15px #aaa;
-moz-box-shadow: 3px 0 15px #aaa,
-3px 0 15px #aaa;
-webkit-box-shadow: 3px 0 15px #aaa,
-3px 0 15px #aaa;
/* Schatten für IE: */
zoom: 1;
filter:
progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=90, Strength=10)
progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=270, Strength=10);
}
#header {
background-color: #02154d;
width:800px;
height:152px;
margin: 0px auto;
}
#menu {
background-color:#02154d;
width: 800px;
margin: 0px auto;
height: 20px;
}
#menu ul {
list-style:none;
margin:0;
padding:0;
}
#menu li {
float: left;
width:133px;
height:20px;
font-size:13px;
text-align: center;
}
#menu a {
color:#FFF;
text-decoration:none;
}
#content {
width: 491px;
height:auto;
margin: 0px auto 0px;
padding:20px 143px 40px 166px;
background-color: #FFF;
}
#footer {
position:relative;
width:800px;
height:10px;
margin:0 auto 0;
background-color:#02154d;
}
.text_aufzaehlung {
text-align:left;
text-decoration: none;
line-height: 26px;
color:#02154d;
width:364px;
padding-bottom: 20px;
}Was tun?
Danke schonmal und Gruß!