Hallo,
ich bin grade dabei ne website in html zu schreiben. habe heute eine navigation gebastelt mit bildern und hover effekt. im ie wird mir alles so angezeigt, wie ich es auch haben möchte.
im ff leider nicht. die tabellen werden in verschiedenen stylen angezeigt, die in ner .css stehen. hier der html code. dreamweaver zeigt mir allerdings auch keinerlei probleme an.
http://www.zahn-praxis-berlin.de/cuba/
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CuBa Webdesign</title>
<link href="design.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div align="center">
<table width="800" border="1" cellpadding="0" cellspacing="0">
<tr>
<td class="maintable"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="bilder/banner.gif" width="800" height="126"/></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="oberbanner"> </td>
<td class="kontakt"> </td>
<td class="links"> </td>
<td class="obennavi"> </td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="home"> </td>
<td class="untennavi"> </td>
<td class="angebote"> </td>
<td class="untennavi"> </td>
<td class="referenzen"> </td>
<td class="unterbanner"> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="223" height="686"> </td>
<td class="main"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="267" height="39"> </td>
<td class="reiter"><div align="right"><br />
<br />
</div></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="inhalt"> </td>
</tr>
</table> </td>
<td width="48" height="686"> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="copy"><p> </p> </td>
</tr>
</table> </td>
</tr>
</table>
</div>
</body>
</html>
hier die .css
Code:
@charset "utf-8";
body {
background-color:#000000;
}
.maintable {
background-color : #000000;
vertical-align : top;
border:groove;
border
}
.navigation {
background-color : #ffffff;
vertical-align : top;
}
.home{
background-image:url(bilder/home_off.gif);
display:block;
background-repeat:no-repeat;
height:26px;
width:75px;
}
.home:hover, .home:focus{
background-image:url(bilder/home_on.gif);
background-repeat:no-repeat;
height:26px;
width:75px;
}
.angebote{
background-image:url(bilder/angebote_off.gif);
display:block;
background-repeat:no-repeat;
height:26px;
width:131px;
}
.angebote:hover, .angebote:focus{
background-image:url(bilder/angebote_on.gif);
background-repeat:no-repeat;
height:26px;
width:131px;
}
.referenzen{
background-image:url(bilder/referenzen_off.gif);
display:block;
background-repeat:no-repeat;
height:26px;
width:146px;
}
.referenzen:hover, .referenzen:focus{
background-image:url(bilder/referenzen_on.gif);
background-repeat:no-repeat;
height:26px;
width:146px;
}
.kontakt{
background-image:url(bilder/kontakt_off.gif);
display:block;
background-repeat:no-repeat;
height:26px;
width:134px;
}
.kontakt:hover, .kontakt:focus{
background-image:url(bilder/kontakt_on.gif);
background-repeat:no-repeat;
height:26px;
width:134px;
}
.links{
background-image:url(bilder/links_off.gif);
display:block;
background-repeat:no-repeat;
height:26px;
width:120px;
}
.links:hover, .links:focus{
background-image:url(bilder/links_on.gif);
background-repeat:no-repeat;
height:26px;
width:120px;
}
.oberbanner{
background-image:url(bilder/oberbanner.gif);
display:block;
background-repeat:no-repeat;
height:26px;
width:524px;
}
.unterbanner{
background-image:url(bilder/unterbanner.gif);
display:block;
background-repeat:no-repeat;
height:26px;
width:398px;
}
.obennavi{
background-image:url(bilder/obennavi.gif);
display:block;
background-repeat:repeat-x;
height:26px;
width:22px;
}
.untennavi{
background-image:url(bilder/untennavi.gif);
display:block;
background-repeat:repeat-x
height: 26px;
width: 25px;
}
.reiter{
background-image:url(bilder/reiter.gif);
display:block;
background-repeat:no-repeat;
height:39px;
width:262px;
}
.inhalt{
background-image:url(bilder/inhalt.gif);
display:block;
background-repeat:no-repeat;
height:607px;
width:529px;
}
.copy{
background-image:url(bilder/copy.gif);
display:block;
background-repeat:no-repeat;
height:36px;
width:800px;
}
.main{
background-image:url(bilder/main.gif);
vertical-align : top;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
width: 534px;
height: 440px;
}
.mainlinks {
background-image:url(bilder/mainlinks.gif);
background-repeat:no-repeat;
background-position:left;
}
.mainrechts {
background-image:url(bilder/mainrechts.gif);
background-repeat:no-repeat;
background-position: right;
}
.copyright {
background-image : url(bilder/copy.jpg);
background-repeat: no-repeat;
font-size:16px;
font-family:"Courier New", Courier, monospace;
color:#ffffff;
}
.copyright a:link, .copyright a:visited, .copyright a:active{
color:#ffffff;
text-decoration:none;
}
.copyright a:hover{
color:#CC0000;
text-decoration:none;
}
wundert mich halt das es im ie geht und im ff nicht. vielleicht hab ich ja eifnach nur ne anweisung vergessen, die der ff braucht.
mfg cubixt