nicht angemeldet
tabelle(navigation) im I.E richtig im FF verzerrt
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
-
Hi cubixt,
im ie wird mir alles so angezeigt, wie ich es auch haben möchte.
Das ist schonmal ein ganz schlechtes zeichen.
im ff leider nicht. die tabellen werden in verschiedenen stylen angezeigt, die in ner .css stehen.
Wenn du schon mit CSS arbeitest, warum nicht richtig? Pack deine Navi
in eine Liste, hier noch ein Paar beispiele für Listen.http://www.zahn-praxis-berlin.de/cuba/
Das sieht doch schon ganz gut aus, das könntest du auch ohne weiteres mit
CSS umsetzen.Grüße,
Engin
GYRO -
Mahlzeit,
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.
1. Dreamweaver ist kein Validator.
2. Tabellen sind nicht zum Layouten da. Insbesonders Tabellen mit jeweils nur einer Zeile, die auch nur eine Spalte enthält, in mehreren nebeneinander stehenden Tabellen, die in Tabellen mit nur jeweils einer Zeile, die auch nur eine Spalte enthält, sind absoluter MÜLL.
3. Wenn der IE alles wie gewünscht anzeigt, der Firefox (oder jeder andere vernünftige Browser) aber "zickt", liegt es in nahezu 99% aller Fälle daran, dass der HTML-Code unsauber ist und der IE einfach nur wieder zu oberflächlich und tolerant rendert.
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.
Ja. Valides und übersichtliches HTML wäre für den Anfang nicht schlecht. ;-)
Und tu dir selbst einen Gefallen: schmeiß das Tabellen-Layout weg und orientiere dich stattdessen lieber an <http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=CSS-basierten Layouts>.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
