nicht angemeldet
Safari verschluckt unteren Teil eines DIVs
Hallo zusammen,
ich raufe mir hier gerade die haare - ich habe bei einer Seite das Problem, dass Safari innerhalb eines DIVs den unteren Teil "verschluckt".
Bei Firefox (Mac+Win), Opera (Mac + Win) und IE 7 funktionert es, nur Safari zickt (2.0.4 419.3, MacOSX 10.4.8). Mit overflow: auto oder overflow: visible bin ich nicht weitergekommen. Aber schaut es Euch am besten selbst mal an. Hier die Beispielseite: http://www.hr-eng.de/offer/eintrag.php?id=9
Safari zeigt beim Scrollen den unteren Teil nicht komplett an.
Das Grundgerüst sieht folgendermaßen aus:
<?php echo"<?xml version="1.0" encoding="UTF-8"?>"; ?>
<!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>
<!--<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HR engineering hamburg</title>
<base href='http://<?php echo $_SERVER["SERVER_NAME"]; ?>'></base>
<meta name="generator" content="BBEdit 8.5" />
<link rel="stylesheet" rev="stylesheet" href="hreng1.css" media="all" />
</head>
<body>
<div class="fuss_container">
<div class="fuss"><img src="bilder/fuss.gif" alt="" width="1020" height="180" border="0" align="bottom" /></div>
</div>
<div class="kopf_container">
<div class="kopf_li"><img src="bilder/kopf_li.jpg" alt="" width="110" height="500" border="0" /></div><div class="kopf"><img src="bilder/kopf.jpg" alt="" width="800" height="225" border="0" align="top" /></div><div class="kopf_re"><img src="bilder/kopf_re.jpg" alt="" width="110" height="500" border="0" /></div>
</div>
<div class="rahmen_aussen_1">
<div class="rahmen_aussen_2">
<?php include("navi.inc.php"); ?>
<div class="rahmen_innen">
<div class="ro">
<div class="lo">
<div class="ru">
<div class="lu">
<div id="inhalt">
########## Hier wird der jeweilige Inhalt per include eingefügt ##########
</div>
</div>
</div>
</div>
</div>
</div>
<br /><br />
</div>
</div>
</body>
</html>
Das CSS dazu (auf das Relevante gekürzt):
html, body
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
body
{
background-color: black;
text-align: center;
}
.kopf_container
{
margin: auto;
padding: 0px;
background-color: black;
width: 100%;
min-width: 1020px;
position: absolute;
clear: both;
top: 0px;
}
.kopf, .kopf_li, .kopf_re
{
display: inline;
}
.kopf
{
top: 0px;
position: relative;
}
.fuss_container
{
margin: auto;
padding: 0px;
background-color: transparent;
width: 100%;
min-width: 1020px;
min-height: 180px;
position: fixed;
clear: both;
bottom: 0px;
z-index:1000;
}
.fuss
{
bottom: 0px;
position: relative;
}
.rahmen_aussen_1
{
margin: 0px;
padding: 0px;
width: 100%;
min-width: 1020px;
top: 163px;
position: relative;
}
.rahmen_aussen_2
{
margin: auto;
padding: 0px;
width: 800px;
}
.rahmen_innen
{
margin: 0px 0px 0px 0px;
padding: 40px 40px 50px 40px;
text-align: left;
}
.ro {
background:url("bilder/roundedbox_ro.gif") top right no-repeat;
margin:0;
padding:0;
}
.lo {
background:url("bilder/roundedbox_lo.gif") top left no-repeat;
margin:0;
padding:0;
}
.ru {
background:url("bilder/roundedbox_ru.gif") bottom right no-repeat;
margin:0;
padding:0;
}
.lu {
background:url("bilder/roundedbox_lu.gif") bottom left no-repeat;
margin:0;
padding:0;
}
div#inhalt
{
margin: 0;
padding: 2.5em 2.5em 3.5em 2.5em;
font-size: 0.7em;
}
Wo liegt der Haken?
Vielen Dank im voraus und Gruß,
Josch