 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
LioGetz
Threadersteller
Dabei seit: 24.03.2003
Ort: Aachen
Alter: 44
Geschlecht: 
|
Verfasst Fr 27.01.2006 16:37
Titel [CSS] Problem - Darstellung IE / FF |
  |
|
Hola,
folgendes:
hab ne Startseite mit ner Tabelle. 4 Bilder als Links, Roll-Over per CSS (zumindest versucht  ). Zusätzlich noch Bilder um Schatten darzustellen (siehe Quelltext, die xxshadow.gif´s)
Im IE sieht alles Top aus, im FF hab ich nen Table-Versatz von ca. 2px. Oben und seitlich sieht man nen weißen Rand den man nicht sehen soll...Hab leider nicht soviel Plan von CSS, deswegen weiß ich auch nicht ob ich das mit den CSS-Formatierungen richtig gemacht habe. kam mir etwas kompliziert vor, aber der Mouse-Over klappt .
Hier mal ein Screenshot
Und hier der HTML und CSS-Text:
| Code: |
<body leftmargin="0" rightmargin="0" topmargin="0" bgcolor="#CBD5CC" marginheight="0" marginwidth="0">
<table valign="top" align="center" cellpadding="0" cellspacing="0" height="550" width="450" border="0">
<tr>
<td colspan="3" bgcolor="#CBD5CC" valign="top"><img src="gfx/leftshadow.gif" align="right" border="0"></td>
<td bgcolor="#FFFFFF" valign="top">
<table valign="top" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#FFFFFF" valign="top"><img src="gfx/topshadow.gif" alt="" width="400" height="50" border="0"></td>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<table cellpadding="0" cellspacing="0" height="450" width="400" border="0">
<tr>
<td class="spring"><a href="pages/spring.html" target="_self"><img src="gfx/main/blank.gif" width="400" height="118" border="0"></a></td>
</tr>
<tr>
<td class="summer"><a href="pages/summer.html" target="_self"><img src="gfx/main/blank.gif" width="400" height="107" border="0"></a></td>
</tr>
<tr>
<td class="autumn"><a href="pages/autumn.html" target="_self"><img src="gfx/main/blank.gif" width="400" height="107" border="0"></a></td>
</tr>
<tr>
<td class="winter"><a href="pages/winter.html" target="_self"><img src="gfx/main/blank.gif" width="400" height="118" border="0"></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" valign="top"><img src="gfx/bottomshadow.gif" alt="" width="400" height="50" border="0"></td>
</tr>
</table>
</td>
<td colspan="3" bgcolor="#FFFFFF" valign="top"><img src="gfx/rightshadow.gif" alt="" width="50" height="550" border="0"></td>
</tr>
</table>
</body>
|
und das CSS-File:
| Code: |
.spring a:link,.spring a:active,.spring a:visited {
display: block;
text-decoration: none;
width: 400px;
height: 118px;
background-image: url(gfx/main/spring_1.jpg);
background-repeat: no-repeat;
}
.spring a:hover {
display: block;
text-decoration: none;
width: 400px;
height: 118px;
background-image: url(gfx/main/spring_2.jpg);
background-repeat: no-repeat;
}
.spring {
display: block;
width: 400px;
height: 118px;
background-image: url(gfx/main/spring_1.jpg);
background-repeat: no-repeat;
}
.summer a:link,.summer a:active,.summer a:visited {
display: block;
text-decoration: none;
width: 400px;
height: 107px;
background-image: url(gfx/main/summer_1.jpg);
background-repeat: no-repeat;
}
.summer a:hover {
display: block;
text-decoration: none;
width:400px;
height: 107px;
background-image: url(gfx/main/summer_2.jpg);
background-repeat: no-repeat;
}
.summer {
display: block;
width: 400px;
height: 107px;
background-image: url(gfx/main/summer_1.jpg);
background-repeat: no-repeat;
}
.autumn a:link,.autumn a:active,.autumn a:visited {
display: block;
text-decoration: none;
width: 400px;
height: 107px;
background-image: url(gfx/main/autumn_1.jpg);
background-repeat: no-repeat;
}
.autumn a:hover {
display: block;
text-decoration: none;
width:400px;
height: 107px;
background-image: url(gfx/main/autumn_2.jpg);
background-repeat: no-repeat;
}
.autumn {
display: block;
width: 400px;
height: 107px;
background-image: url(gfx/main/autumn_1.jpg);
background-repeat: no-repeat;
}
.winter a:link,.winter a:active,.winter a:visited {
display: block;
text-decoration: none;
width: 400px;
height: 118px;
background-image: url(gfx/main/winter_1.jpg);
background-repeat: no-repeat;
}
.winter a:hover {
display: block;
text-decoration: none;
width:400px;
height: 118px;
background-image: url(gfx/main/winter_2.jpg);
background-repeat: no-repeat;
}
.winter {
display: block;
width: 400px;
height: 118px;
background-image: url(gfx/main/winter_1.jpg);
background-repeat: no-repeat;
}
|
Könnt ihr nen Fehler sehen oder wisst ihr von nem bekannten Prob was die FF/IE-Darstellung angeht. Wahrscheinlich hab ich irgend ne Angabe vergessen bzw. zu viel.
Danke im voraus
CU
Lio
P.S. Bevor das Blabla wieder losgeht: Ja, ich hab die Suche benutzt, und SelfHTML .
|
|
| |
   |
 |
13pixelchen
Account gelöscht
Ort: -
|
Verfasst Fr 27.01.2006 17:00
Titel
|
|
|
| Code: |
img {display: block} |
?
|
|
| |
|
|
|
Anzeige
|
|
|
LioGetz
Threadersteller
Dabei seit: 24.03.2003
Ort: Aachen
Alter: 44
Geschlecht:
|
Verfasst Fr 27.01.2006 17:21
Titel
|
|
|
Was willst du mir wohl damit sagen?
Naja, ich habs mal überall gelöscht...und es ist (fast) die Lösung des Problems. Der Versatz in der Table ist weg, es passt jetzt rein, ABER, die Bilder sind jetzt im unteren Teil abgeschnitten und wiederholen sich in der td. Seltsam, obwohl kein Repeat drin steht, und die Bilder von den px auch eigentlich genau in die <td>´s passen sollten.
Dafür auch ne Idee ?
Thx im voraus
CU
Lio
//edit: das "block"-Attribut hab ich mal irgendwo gelesen und dachte es müsste rein...nicht?
Zuletzt bearbeitet von LioGetz am Fr 27.01.2006 17:23, insgesamt 1-mal bearbeitet
|
|
| |
|
|
13pixelchen
Account gelöscht
Ort: -
|
Verfasst Fr 27.01.2006 17:41
Titel
|
|
|
|
Ja, ich wollte, dass Du es so mal reinmachst, aber nicht auf die DIVs, sondern auf die IMG, hab aber nicht exakt über deinen Post gelesen.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Problem mit Darstellung von Swf
Problem mit Darstellung im IE
[CSS Problem] Darstellung der Links
Problem mit der Darstellung im PHPMyAdmin
Kurioses Problem mit der Darstellung von .png
Problem mit der Darstellung von Umlauten
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
