Dreierlei zu unterschiedlicher Darstellung in IE und Firefox

[Bernhard Schabmayr]

Hallo zusammen!

Ich habe letztlich doch hineingebissen, und begonnen, mit Safari 2.0.4 als Überprüfungsmedium, eine Homepage zu bauen. Jetzt bin ich gerade beim Gegenchecken, wie das Ergebnis in anderen Browsern aussieht und habe da drei konkrete Probleme.

• IE7 verwandelt mir das "'" nicht in ein Apostroph, deswegen hätte ich gerne gewusst, welches allgemein verständliche andere Zeichen es stattdessen gibt.
• Firefox 1.8 klebt mir Hintergrundgrafiken, die ich mit "background-position:center;" in der Mitte platziert habe, aufs hässlichste unter die Decke, sprich an die Oberkante.
• Für Bilder, die als Links funktionieren, hab ich mir folgenden Hovereffekt einfallen lassen, den sowohl Firefox als auch Safari verstehen, IE7 jedoch nicht:

a:link, a:active, a:visited { filter:alpha(opacity=50); opacity:0.5; }
a:hover, a:focus { filter:alpha(opacity=100); opacity:1; }

Safari und Firefox interpretieren jeweils den simplen zweiten Teil und nachdem IE das offenstichtlich nicht tut, hab ich fälschlicherweise gedacht, dass dem mit dem Alpha-Filter vielleicht Abhilfe zu schaffen ist. Wie sieht hier ein möglicher alternativer Text aus, der den gewünschten Effekt erzielt?

Danke im Voraus für die Hilfe

[mati]

• IE7 verwandelt mir das "'" nicht in ein Apostroph, deswegen hätte ich gerne gewusst, welches allgemein verständliche andere Zeichen es stattdessen gibt.

asci verwenden '

• Firefox 1.8 klebt mir Hintergrundgrafiken, die ich mit "background-position:center;" in der Mitte platziert habe, aufs hässlichste unter die Decke, sprich an die Oberkante.

sollte er aber nicht tun ? Quelltext ?

Gruß
mati

[Bernhard Schabmayr]

sollte er aber nicht tun ? Quelltext ?

<style type="text/css">

body { background-image:url(XYZ.jpg); background-repeat:no-repeat; background-position:center; }

</style>

Kann es was damit zu tun haben, dass das ganze Ding in ein Frameset eingebettet ist?

[mati]

sollte er aber nicht tun ? Quelltext ?

<style type="text/css">

body { background-image:url(XYZ.jpg); background-repeat:no-repeat; background-position:center; }

</style>

Kann es was damit zu tun haben, dass das ganze Ding in ein Frameset eingebettet ist?

möglich, der <style> ist so völlig OK.

[MudGuard]

Hi,

• IE7 verwandelt mir das "&apos;" nicht in ein Apostroph,

In HTML gibt es &apos; nicht.
&apos gibt es in XML (und damit in XHTML). Daß sich das noch nicht bis zum IE rumgesprochen hat, ist nicht wirklich verwunderlich.

deswegen hätte ich gerne gewusst, welches allgemein verständliche andere Zeichen es stattdessen gibt.

'

Wenn es wirklich notwendig ist, eine Ersatzdarstellung zu benutzen, kann die numerische Zeichenreferenz '&#' + Unicode-Nummer dezimal + ';' oder '&#x' + Unicode-Nummer hexadekadisch + ';' verwendet werden

• Firefox 1.8 klebt mir Hintergrundgrafiken, die ich mit "background-position:center;" in der Mitte platziert habe, aufs hässlichste unter die Decke, sprich an die Oberkante.

Fehlt es dem body evtl. an Höhe?

• Für Bilder, die als Links funktionieren, hab ich mir folgenden Hovereffekt einfallen lassen, den sowohl Firefox als auch Safari verstehen, IE7 jedoch nicht:

a:link, a:active, a:visited { filter:alpha(opacity=50); opacity:0.5; }
a:hover, a:focus { filter:alpha(opacity=100); opacity:1; }

IE kennt :focus nicht.
Wenn ein Selektor nicht bekannt ist, ist das entsprechende Ruleset zu ignorieren.

Was passiert, wenn Du nur a:hover als Selektor benutzt?

cu,
Andreas

[Bernhard Schabmayr]

Fehlt es dem body evtl. an Höhe?

Nope, also nicht in dem Sinn, in dem ich die Frage verstehe. Die Grafik ist ca. 10x10cm groß, sollte sich im Vollbildmodus also leicht ausgehen. Allerdings ist das ganze Ding, wie schon an anderer Stelle erwähnt, Teil eines Framesets.

a:link, a:active, a:visited { filter:alpha(opacity=50); opacity:0.5; }
a:hover, a:focus { filter:alpha(opacity=100); opacity:1; }

IE kennt :focus nicht.
Wenn ein Selektor nicht bekannt ist, ist das entsprechende Ruleset zu ignorieren.

Was passiert, wenn Du nur a:hover als Selektor benutzt?

:focus komplett weglassen? Ich hab die Dinger auch schon so aufgetrennt:

a:link { filter:alpha(opacity=50); opacity:0.5; }
a:visited { filter:alpha(opacity=50); opacity:0.5; }
a:active { filter:alpha(opacity=50); opacity:0.5; }
a:hover { filter:alpha(opacity=100); opacity:1; }
a:focus { filter:alpha(opacity=100); opacity:1; }

mit dem selben Ergebnis. Allerdings stehen die Bilder alle in einer Tabelle, macht das einen Unterschied?

cu,
Andreas

[MudGuard]

Hi,

Fehlt es dem body evtl. an Höhe?
Nope, also nicht in dem Sinn, in dem ich die Frage verstehe. Die Grafik ist ca. 10x10cm groß, sollte sich im Vollbildmodus also leicht ausgehen.

Was hat der Vollbildmodus mit der Höhe des body zu tun? Die Höhe des body ist unabhängig von der Fenstergröße.

Allerdings stehen die Bilder alle in einer Tabelle, macht das einen Unterschied?

Ich dachte, die Bilder stehen in Links. Wenn sie in einer Tabelle stehen, hast Du demnach Tabellen in den Links, was HTML nicht erlaubt.

cu,
Andreas

[Bernhard Schabmayr]

Was hat der Vollbildmodus mit der Höhe des body zu tun? Die Höhe des body ist unabhängig von der Fenstergröße.

Sondern abhängig wovon? Ich hab da nichts vordefiniert oder so, und es ist auf der Seite außer dem Hintergrundbild genau nix drauf. Die Framereihen lassen auch genug Platz ("55,*,12"), bitte um Aufklärung, was du genau meinst.

Ich dachte, die Bilder stehen in Links. Wenn sie in einer Tabelle stehen, hast Du demnach Tabellen in den Links, was HTML nicht erlaubt.

Umgekehrt wird ein Schuh draus. Ich hab Links in den Tabellen, die zufällig auch Bilder sind, geht das?

<td><a href><img src></a></td>

Muss ich vielleicht die Tabellenhintergrundfarbe vorgeben?

[MudGuard]

Hi,

Was hat der Vollbildmodus mit der Höhe des body zu tun? Die Höhe des body ist unabhängig von der Fenstergröße.
Sondern abhängig wovon?

von der CSS-height-Property sowie vom Inhalt des body.

Umgekehrt wird ein Schuh draus. Ich hab Links in den Tabellen, die zufällig auch Bilder sind, geht das?

Zulässig ist es, aber auch sinnvoll?

Muss ich vielleicht die Tabellenhintergrundfarbe vorgeben?

Nö.

cu,
Andreas

[Bernhard Schabmayr]

von der CSS-height-Property sowie vom Inhalt des body.

Nachdem ich "CSS-height-Property" mal mit halbem Erfolg gegoogelt habe, schließe ich daraus, dass ich die Höhe des Bildes angeben sollte. Sieht das ungefähr so aus?

body { background-height:(Bildhöhe)px; }

Umgekehrt wird ein Schuh draus. Ich hab Links in den Tabellen, die zufällig auch Bilder sind, geht das?

Zulässig ist es, aber auch sinnvoll?

Ja, wieso nicht? So hab ich schön meine Miniaturfotos aufgereiht, die jeweils zu den passenden großen Fotos linken.

Muss ich vielleicht die Tabellenhintergrundfarbe vorgeben?

Nö.

Was ich meinte, war: Wenn ich mit der Opacity spiele, muss im Hintergrund eine Farbe sein, über die das Bild dann drüberdeckt. In Safari und Firefox ist das automatisch das gewünschte weiß, wenn ich nix angebe, vielleicht nimmt IE7 von sich aus einen transparenten Background an, sodass auch bei 50prozentiger Deckkraft alles da ist. Verständlich?

[Auge]

Hallo

Nachdem ich "CSS-height-Property" mal mit halbem Erfolg gegoogelt habe, schließe ich daraus, dass ich die Höhe des Bildes angeben sollte. Sieht das ungefähr so aus?

body { background-height:(Bildhöhe)px; }

Hintergrundbilder kann man nicht per CSS (um)dimensionieren. Sie werden so groß angezeigt, wie sie es (in Pixeln) sind. Also: nein. Entweder, du gibst für body eine Höhe an, oder die Höhe bestimmt sich nach dem Inhalt des Body, was im übrigen auch für alle anderen Blockelemente gilt.

Umgekehrt wird ein Schuh draus. Ich hab Links in den Tabellen, die zufällig auch Bilder sind, geht das?

Zulässig ist es, aber auch sinnvoll?

Ja, wieso nicht? So hab ich schön meine Miniaturfotos aufgereiht, die jeweils zu den passenden großen Fotos linken.

MudGuards Frage ließe sich in etwa so übersetzen: Handelt es sich bei dem Inhalt (den Links) um Daten, die einer tabellarischen Darstellung bedürfen. Bei einer Auflistung von Links kann man davon ausgehen, dass das nicht der Fall ist.

Das ist eine Frage der Bedeutung innerhalb des Dokuments. Für eine solche Auflistung gibt es die Liste als HTML-Element.

Was ich meinte, war: Wenn ich mit der Opacity spiele, muss im Hintergrund eine Farbe sein, über die das Bild dann drüberdeckt. In Safari und Firefox ist das automatisch das gewünschte weiß, wenn ich nix angebe, vielleicht nimmt IE7 von sich aus einen transparenten Background an, sodass auch bei 50prozentiger Deckkraft alles da ist. Verständlich?

Jeder Browser hat eine Vorgabe, wie HTML-Elemente dargestellt werden sollen, wenn es für sie keine gesonderten Angaben zur Darstellung gibt. In graphischen Browsern kann man davon ausgehen, dass als Hintergrundfarbe weiß definiert ist. Auch im MSIE7.

Tschö, Auge

[Bernhard Schabmayr]

Nachdem ich "CSS-height-Property" mal mit halbem Erfolg gegoogelt habe, schließe ich daraus, dass ich die Höhe des Bildes angeben sollte. Sieht das ungefähr so aus?

body { background-height:(Bildhöhe)px; }

Hintergrundbilder kann man nicht per CSS (um)dimensionieren. Sie werden so groß angezeigt, wie sie es (in Pixeln) sind. Also: nein. Entweder, du gibst für body eine Höhe an, oder die Höhe bestimmt sich nach dem Inhalt des Body, was im übrigen auch für alle anderen Blockelemente gilt.

Genau so wars ja auch gemeint. Ich muss die Bildhöhe als Body-Höhe angeben, damit der body mindestens das ganze Bild enthält.
Nur, wie formulier ich das (body { height:(Bildhöhe)px; })?
C'mon, ich will nicht jedes Detail durch die Suchmaschine jagen.

Umgekehrt wird ein Schuh draus. Ich hab Links in den Tabellen, die zufällig auch Bilder sind, geht das?

Zulässig ist es, aber auch sinnvoll?

Ja, wieso nicht? So hab ich schön meine Miniaturfotos aufgereiht, die jeweils zu den passenden großen Fotos linken.

MudGuards Frage ließe sich in etwa so übersetzen: Handelt es sich bei dem Inhalt (den Links) um Daten, die einer tabellarischen Darstellung bedürfen?

Ja. Ich hab 90x90px große Bilder, die ich nicht alle untereinander, sondern auch nebeneinander haben will, möglichst in einem Schachbrettmuster, von dem jedes Feld zu einem neuen Fenster mit dem Originalbild linken soll. Ohne Tabelle stell ich mir das ziemlich kompliziert vor, bin aber für jede Alternative aufgeschlossen.

[Auge]

Hallo

Ich muss die Bildhöhe als Body-Höhe angeben, damit der body mindestens das ganze Bild enthält.
Nur, wie formulier ich das (body { height:(Bildhöhe)px; })?
C'mon, ich will nicht jedes Detail durch die Suchmaschine jagen.

Nun sei mal nicht ungeduldig! Der body soll das ganze Bild anzeigen? Also muss er (mindestens) so hoch sein, wie das Hintergrundbild. Wie die verschiedenen Browser damit umgehen (height vs. min-height), hast du bestimmt schon gelesen. Wo also ist das Problem?

Ja. Ich hab 90x90px große Bilder, die ich nicht alle untereinander, sondern auch nebeneinander haben will, möglichst in einem Schachbrettmuster, von dem jedes Feld zu einem neuen Fenster mit dem Originalbild linken soll. Ohne Tabelle stell ich mir das ziemlich kompliziert vor, bin aber für jede Alternative aufgeschlossen.

Das Ganze HTML-seitig als Liste mit floatenden Listenelementen.

<ul id="bildermenue">  
 <li><a href="..."><img src="..." width="" height="" alt=""></a></li>  
 <li><a href="..."><img src="..." width="" height="" alt=""></a></li>  
 <li><a href="..."><img src="..." width="" height="" alt=""></a></li>  
</ul>

  
ul#bildermenue {  
width:490px;  
list-style-type:none;  
margin:1em auto;  
padding:0;  
}  
#bildermenue li {  
float:left;  
width:90px;  
height:90px;  
margin:0 9px 9px 0;  
padding:0;  
border:1px solid;  
}  
#bildermenue li a img {  
width:90px;  
height:90px;  
margin:0;  
padding:0;  
}

So sollte es (aus dem Gedächtnis eigegeben) in modernen Browsern funktionieren. Die Liste ist 490px breit, ist im umgebenden Elemente zentriert und 4 Bilder passen in eine Zeile.

Wird die Breite für die Liste weggelassen, richtet sich die Anzahl der Bilder nach der Breite des umgebenden Elements. Damit ist diese Liste auch in dieser Hinsicht flexibel, indem sie den zur Verfügung stehenden Platz optimal ausnutzt.

Ach ja, auch wenn das nicht praxisrelevant sein sollte, der NS 4, der, wie gesagt, heutzutage keine Rolle mehr spielen sollte, stellt sämtliche Bilder in _einer_ Zeile dar. Es darf also im Bedarfsfall quergescrollt werden. :-)

Tschö, Auge