hallo zusammen,
ich habe eine webseite in PHP unter verwendung von HTML und CSS geschrieben und diese dabei ständig unter dem IE6 verifiziert. nun bin ich damit fertig und möchte sie so umprogrammieren, daß sie für andere browser auch funktioniert, bestenfalls genau so aussieht. mein einziges problem sind die von mir verwendeten navigationselemente. ich habe unter anderem auf der hauptseite einige flächen verteilt. diese sind vom hintergrundbild etwas hervorgehoben und verändern ihre färbung, sobald man mit der maus darübergeht. realisiert habe ich dies mittels CSS, auf JavaScript möchte ich gänzlich verzichten.
hier der entsprechende HTML-code dieser seite, wie er von meinem PHP-script generiert wird:
<table align="center" border="0" cellspacing="0" cellpadding="0"
width="100%" height="100%">
<colgroup>
<col width="15px">
<col width="385px">
<col width="15px">
<col width="385px">
<col width="15px">
</colgroup>
<tr height="385px">
<td background="images/mainX0.jpg"> </td>
<td id="X1">
<a href="main.php?p=Page1&b=0" target="main">
Zu Page 1
</a>
</td>
<td background="images/mainX2.jpg"> </td>
<td id="X3">
<a href="main.php?p=Page2&b=0" target="main">
Zu Page 2
</a>
</td>
<td background="images/mainX4.jpg"> </td>
</tr>
</table>
oben drüber steht als CSS:
html body {
overflow:hidden;
}
a {
line-height:1.5em;
background-repeat: no-repeat;
font-family: arial;
font-size: 16px;
text-decoration: none;
text-align: left;
color: #000000;
cursor: hand;
overflow:visible;
padding-top: 5px;
padding-left:5px;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
min-width: 100%;
min-height: 100%;
}
#X1 a, #X1 a:link, #X1 a:active, #X1 a:focus, #X1 a:visited {
background: url(images/mainX1Link.jpg) top;
}
#X1 a:hover {
background: url(images/mainX1Hover.jpg) top;
}
#X3 a, #X3 a:link, #X3 a:active, #X3 a:focus, #X3 a:visited {
background: url(images/mainX3Link.jpg) top;
}
#X3 a:hover {
background: url(images/mainX3Hover.jpg) top;
}
soweit, so gut. unter dem IE6 funktioniert das wunderbar, aber unter Opera und Firefox erhält der jeweilige link nur die fläche, die der beinhaltende text benötigt. letzteres ist wohl auch korrekt nach HTML-standard, wie ich mittlerweile gelesen hab. deshalb hab ich bereits versucht dem link die größe des jeweiligen bildes zu geben, indem ich ihm anstatt dem text erst mal ein table mit einer zeile und mit genau einer zelle als inhalt gegeben hab, welche dann den text beinhaltete. den CSS-code habe ich entsprechend angepasst, also aus "#X1 a:hover" wurde dann "#X1 a:hover table tr td". das spielchen klappt soweit, daß mir damit Opera und Firefox die seite korrekt darstellen und alles korrekt funktioniert. im IE6 sieht ebenfalls alles korrekt aus, nur funktionieren die links nicht mehr. obwohl diese so generierten schaltflächen als link definiert wurden und sich, gemessen am hover-verhalten, auch so benehmen, kann man sie anklicken, was man will, es tut sich nichts (unter IE6, unter Opera und Firefox reagieren sie).
übrigends hatte ich ursprünglich anstatt für den normalen link und den gehoverten link jeweils ein bild zu verwenden, für beides ein und das selbe bild, welches doppelt so hoch war und beide zustände untereinander abbildete. anstatt im css das bild auszutauschen hatte ich die y-position verändert. das funktionierte im IE6 klasse, aber sonst halt nirgends, weshalb ich mich auf anderen seiten in deren quelltext kundig gemacht hab und festgestellt hab, daß ganz seriöse seiten, wie beispielsweise xing, diese lösung hier verwenden (obwohl ja in selfhtml extra davon abgeraten wird, da ja extra für den hover-effekt nachgeladen werden muss). xing hat aber leider keine solchen schaltflächen, sodaß ich mit deren quelltext auch nicht weiter kam, ausgenommen, daß ich nun weiß, daß ich mittels XHTML wohl unter den verwendeten browsern unterscheiden kann.
ich weiß, daß durch einfärben das alles wesentlich einfacher ginge, allerdings würde dies dann im aktuellen layout unmöglich aussehen. meine schaltflächen sind aktuell ausschnitte eines bildes, welches sich über die ganze seite erstreckt (also mainX0.jpg, mainX1Link.jpg, mainX2.jpg, usw. sind zusammen ein großes im nachhinein gesplittetes bild). die jeweiligen hover-varianten sind eingefärbte versionen der entsprechenden ausschnitte, also keine einfarbigen flächen.
ich habe ausserdem bereits versucht im CSS anstatt 100% pixelangaben zu verwenden, erfolglos. ausserdem versuchte ich bereits layer in den jeweiligen link einzubetten, was auch nicht funktioniert hat. buttons würden dem ganzen von der funktion her entsprechen, jedoch habe ich damit das problem, daß ich deren aussehen zu wenig beeinflussen kann (sagt mir, wenn ich mich hier irren sollte). zumindest denke ich, daß es mir nicht möglich ist, im mouseover-fall einem button beizubringen, ein anderes bild bzw. das gleiche bild mit anderem y-offset als darstellung seiner selbst zu verwenden, oder?
mittlerweile weiß ich gar nicht mehr, was ich machen soll, damit das browserübergreifend funktioniert und gleich aussieht, ohne daß ich JavaScript verwende oder XHTML und dann für jeden browser eine eigene seite bereit stelle oder mein gesamtes layout verwerfe und neu gestalte. deshalb hier die frage an euch, ob mir jemand nen tip geben kann, wie ich das mit HTML+CSS lösen kann.
vielen lieben dank
wayne