Alpha-Filter im IE7 streikt
Apropos
- css
Hi,
ich habe ein ziemlich nerviges Problem mit dem Alpha-Filter im IE7.
Folgender Code sollte dabei relevant sein:
#tabs,
#entryTabs {
position: absolute;
left: 170px;
bottom: 0px;
padding-top: 5px;
}
#tabs *,
#entryTabs * {
color: #000;
font-size: 1em;
font-weight: normal;
padding: 5px 13px 0px 13px;
background: #d2ca9f url('./gfx/shade_below.png') center bottom repeat-x;
margin: 0px 5px;
}
#tabs strike,
#entryTabs strike {
text-decoration: none;
opacity: 0.33;
filter: alpha(opacity=33);
}
<div id="tabs">
<a href="?dir=desc&col=last_edit&author=1">Anthropos</a>
<em>Autor</em>
<strike title="Bitte wählen Sie einen Eintrag aus der Liste.">Eintrag bearbeiten</strike>
<strike title="Bitte wählen Sie einen Eintrag aus der Liste.">Kommentar bearbeiten</strike>
</div>
Nun wird im IE7 (und auch 6) der Alpha-Filter für die <strike>-Elemente offenbar nicht berücksichtigt.
An anderer Stelle auf derselben Seite funktioniert der Alpha-Filter übrigens.
Ich habe schon versucht, das opacity-Statement rauszunehmen, dem Elternelement, also #tabs, selbst ein Hintergrundbild zu geben und das <strike> als Block-Element zu formatieren. Alles erfolglos - der Filter streikt.
Ich habe im gesamten Archiv nur einen ähnlichen, aber sehr unspezifischen Fall gefunden, der allerdings nicht (dokumentiert) gelöst wurde. Ich hoffe, ich habe irgendwo einen Fehler im Code oder es gibt sonstwie neue Erkenntnisse zu diesem Problem. Ich bin mit meinem Latein am Ende.
danke schon einmal,
Apropos
Du hast die alte Filter-Syntax. Schau mal auf den letzten Absatz des ersten Abschnittes <http://de.selfhtml.org/css/eigenschaften/filter.htm#allgemeines@title=dieses Texts> unter "Beachten Sie".
Des weiteren kann es sein, dass manche Filter Probleme haben mit Elementen, die display:inline gesetzt haben, denen hasLayout fehlt (ggf. Höhe setzen) oder die, wie im Fall von <strike> nicht mehr valide im Sinne des DOCTYPES sind (da es bei XHTML zugunsten der CSS-Eigenschaft abgeschafft wurde).
Gruß, LX
Hi,
die neue Filter-Syntax hatte ich schon probiert, macht aber keinen Unterschied.
Es klappt jetzt allerdings, wenn ich das CSS wie folgt ergänze:
#tabs *,
#entryTabs * {
[...]
height: 1em;
display: block;
float: left;
}
Ich muss die Elemente jetzt zwar floaten lassen, aber das ist zu verschmerzen.
Viele Dank für den Tipp!
viel Spasz,
Apropos
Du könntest evtl. noch "display:inline-block" probieren oder den "zoom: 1;"-Hack. Ansonsten googel mal nach hasLayout - oder finde Dich mit den floats ab.
Gruß, LX
Hi,
ja, die Methoden mit display:inline-block; und zoom:1; funktionieren auch.
Allerdings habe ich dabei festgestellt, dass ich durch das Floaten auch den Bug umgehe, durch den Whitespaces zwischen den Elementen den Abstand verändern. Insofern bin ich mit der Lösung ganz zufrieden.
viel Spasz,
Apropos