Hallo zusammen!
ich hab mal wieder ne Frage an Euch:
Ich habe eine Website gebastelt, bei der ein zentrierter Container in der mitte steht. Das Hintergrundbild dieses Containers hat hinter der Textfläche einen weissen Streifen, der dynamisch bis zum Browserrand (links und rechts) reicht.
Da der Container 800px breit ist, hab ich das dann via BODY-Hintergrundbild realisiert und zwar indem ich den weissen Steifen genau abgemessen auf 195px vom Browserrand oben gesetzt. Nun ist es so, dass im IE alles bestens klappt, der FF jedoch schiebt den Container etwas nach oben sodass der weisse Streifen nicht mehr richtig übereinstimmt.
Normalerweis bin ich gewohnt, dass der IE faxen macht aber diesmal ist es leider anders...
Könnt ihr mir vielleicht sagen wie ich das hinbekomme?
anschauen könnt ihr die Seite
hier.
und noch der quelltext von der index.html:
HTML-Code:
<!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">
<head>
<title>Natursteine Ernst</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<br />
<br />
<br />
<br />
</td>
</tr>
<tr>
<td colspan="4"><table width="100%" style="height:463px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="contentTop"></td>
</tr>
<tr>
<td class="contentMenue"></td>
</tr>
<tr>
<td valign="top" class="contentMiddle"><br />
<h1><table id="Content" width="675" height="360" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="3"><iframe src="home.html" name="content" id="content" class="content" frameborder="0" width="660" height="360" marginwidth=0marginheight=0 hspace=0 vspace=0 scrolling="no"> </iframe></td>
<td>
<a href="#" onMouseover="scrollspeed=-4" onMouseout="scrollspeed=0">
<img src="http://www.traum-projekt.com/forum/images/scroll_up.jpg" alt="" width="15" height="15" border="0"></a></td>
</tr>
<tr>
<td>
<img src="http://www.traum-projekt.com/forum/images/scrollbar.jpg" width="15" height="330" alt=""></td>
</tr>
<tr>
<td>
<a href="#" onMouseover="scrollspeed=4" onMouseout="scrollspeed=0">
<img src="http://www.traum-projekt.com/forum/images/scroll_down.jpg" alt="" width="15" height="15" border="0"></a></td>
</tr>
</table></h1>
</tr>
<tr>
<td class="contentBottom">© 2007 Natursteine Ernst</td>
</tr>
</table></td>
</tr>
<tr>
<td>
<br />
<br />
<br />
<br />
</td>
</tr>
</table>
</body>
</html>
und noch von der css datei:
Code:
td img {
display: block;
}
body{
background-color:#343434;
background-image:url(images/body_bg.jpg);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
background-repeat: repeat-x;
}
a {
text-decoration: none;
}
a:link {
color: #A45038;
}
a:visited {
color: #6D2111;
}
a:hover {
color: #7F921C;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #819323;
}
a:active {
color: #FF6600;
}
p {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
margin-left:60px;
margin-right:60px;
color:#333300;
}
input {
font-size:12px;
color:#003300;
width:100px;
}
textarea {
font-size:12px;
color:#003300;
}
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;
margin-left:60px;
}
ul {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:13px;
color:#006633;
margin-left:60px;
padding-left:60px;
}
.border {
border: 1px solid #DDCB8D;
}
.form {
margin-left:20px;
padding-left:20px;
}
#welcomeDiv {
position:absolute;
left:610px;
top:170px;
width:330px;
height:389px;
z-index:1;
}
.contentTop {
background-image:url(images/content_top.jpg);
background-repeat:no-repeat;
height:135px;
}
.contentMenue {
background-image:url(images/content_menue.jpg);
background-repeat:no-repeat;
height:30px;
}
.contentMiddle {
background-image:url(images/content_middle.jpg);
background-repeat:repeat-y;
height:405px;
}
.contentBottom {
background-image:url(images/content_bottom2.jpg);
background-repeat:no-repeat;
height:30px;
font-size:11px;
vertical-align:middle;
text-align:center;
color:#FFFFFF;
}
