nicht angemeldet
Kleine Schwierigkeiten IE7, 6 u 5.5 mit FF konform zu bekommen
0 0 
Struppi
0
Kleine Schwierigkeiten IE7, 6 u 5.5 mit FF konform zu bekommen
Hallo,
hab mehrere kleinere Probleme mit der identischen Darstellung (soweit möglich) meines CSS-Codes auf verschiedenen Browsern:
Warscheinlich habe ich einfach ein Brett vor dem Kopf um die Lösung zu sehen!
Hier der Link:
http://www.richter-reichenbach.de/marv_battle/index2.html
Weil es 3 Fehler sind, habe ich nur die entscheidenen CSS-Abschnitte hier herein kopiert. Da sie derzeit noch alle mit im Quelltext stehen , kann die vollständige CSS auch über den Link angeschaut werden.
1. Fehler
Es geht um die Links links unten
FF stellt alles korrekt dar.
IE7 hovert ordnungsgemäß, auch sonst ist alles gut. Aktiviert man allerdings einen Link und kehrt man aber über die "zurück"-Funktion des Browsers zurück, verharrt der Link in der a:active-Form. Klickt man nun irgendwo in die Website, ist alles normal!
CSS dazu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...
a.logobutton, a.logobutton:visited {
vertical-align: center;
padding-left: 25px;
color: black;
text-decoration: none;
height: 18px;
width: auto;
background-image: url(link_inactive.gif);
background-position: left;
background-repeat: no-repeat;
}
a.logobutton:hover, a.logobutton.focus {
color: white;
text-decoration: none;
background-image: url(link_hover.gif);
}
a.logobutton:active {
color: #dd1740;
background-image: url(link_active.gif);
}
...
Warum kehrt er nicht automatisch zum Ausgangszustand zurück?
2. Problem:
Die halbtransparente Hintergrundbox basiert auf einer PNG.
Gut, das verstehen nur IE7 und FF
um dem IE6 und tiefer das aufzuzwingen, habe ich folgenden Hack verwendet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...
<style type="text/css">
...
#starterbox {
position: absolute;
top: 30px;
bottom: 30px;
left: 30px;
right: 30px;
background-image: url(2.png);
background-repeat: repeat;
font-family: Calibri, Verdana, san-serif;
color: #00473b;
padding: 20px;
...
</style>
<!--[if IE 6]>
<style type="text/css">
#starterbox {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='2.png', sizingMethod='scale');
background: none;
...
außerdem mußte ich noch die Eigenschaften der Box geändert werden:
...
width: 80%;
height: 80%;
top: 10%;
bottom: 10%;
left: 10%;
right: 10%;
</style>
Ergebnis:
Wunderbare Halbtransparenz, aber die Links funzen nicht mehr! Warum?
Frage 3 ergibt sich aus der letzten:
Außerdem ist es zwar verträglich positioniert, aber so perfekt mittig, wie im IE7 und FF isses nicht, was kann ich da noch besser machen?
Frage 4:
Gibt es irgendwo noch ein ausführlicheres Tutorial zu Browserweichen, als auf SELFHTML.org?
Ich hab jetzt schon so oft gesehen, daß gleich im Anfang einer CSS die ifIE6-Funktion steht, die dann gleich auf eine eigene CSS verweist. Gibt es eine Dokumentation, wie man so eine ergänzende CSS aufbaut, bzw, welche Sachen man da zwingend sollte.
Im Moment bin ich so am schleudern rauszufinden, was in welchem Browser geht, da wär ein büschen Hilfe nich schlecht!
Gruß Max
-
Hi Max,
deine Schwierigkeiten baust du dir selbst, z.b.
#starterbox { bottom:30px; left:30px; padding:20px; position:absolute; right:30px; top:30px; }Was sollte das bewirken, oder mal vom Sinn dieses abgesehen, warum legst du ein Bild über deine Seite?
Im IE 6 funktioniert die Navi z.b. nicht.<div id="linkstart"> <a class="logobutton" href="home.html">Startseite</a> <br/> <a class="logobutton" href="allgemeinmedin.html">Allgemeinmedizin</a> <br/> <a class="logobutton" href="diabetologie.html">Diabetologie</a> <br/> <a class="logobutton" href="endo.html">Endokrinologie</a> <br/> </div>Hier wäre eine Linkliste angebracht.
Für die Tabelle mit den Ärzten könntest du eine Definitionsliste definieren, würd zumindest im Quelltext schöner aussehen. ;-)
Bevor du dich jetzt auf die suche nach allmöglichen Browserweichen machst, würde ich dir
empfehlen, dich vorab ein wenig mit CSS zu beschäftigen, dann hat sich das nähmlich schon mit den Browserweichen.Grüße,
Engin
GYRO -
Hier der Link:
http://www.richter-reichenbach.de/marv_battle/index2.htmlDu solltest erstmal versuchen die Fehler zu beseitigen.
Frage 4:
Gibt es irgendwo noch ein ausführlicheres Tutorial zu Browserweichen, als auf SELFHTML.org?noch ausführlicher als das?
Da kenne ich keine.Struppi.
-
Hallo,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Da bisher keine Version des Internet Explorers XHTML unterstützt solltest du hier lieber noch mit HTML 4.01 arbeiten.
Gruß;
