CSS & DIVs

[Matt]

Hi,

ich versuche gerade meine Seite auf Grund des "barrierefreien Webs" umzubauen. D.h. alle Tabellen des Layouts fliegen heraus und werden auf CSS und DIVs umgestellt.

Allerdings stoße ich schon selbst beim kleinsten Umbau auf Probleme, oder ist der FireFox daran Schuld?

AUSZUG:

<div style="width:750px; background-color:#B0C4DE; border-style:solid; border-width:1px">
 <span style="background-color:red">STATUS</span>
</div>

Das Ganze wird im Internet Explorer Problemlos dargestellt, im FireFox eigentlich auch, bis auf wenn man es sich genauer ansieht. Denn dann stellt man einen kleinen Rand unter dem span-Tag fest -> 1px.

Ist da schonmal jemand drauf gestoßen?
Auch mit einer Höhenangabe des span-Tags ist es nicht zu lösen.

Grüße
Matt

[Cheatah]

Hi,

ich versuche gerade meine Seite auf Grund des "barrierefreien Webs" umzubauen. D.h. alle Tabellen des Layouts fliegen heraus und werden auf CSS und DIVs umgestellt.

guter Anfang. Ein besserer Anfang wäre, dass Du Dein Layout auf CSS, basierend auf semantischem Markup, umstellst. Das <div>-Element hat für Layouts exakt die selbe Bedeutung wie das <table>-Element: Es damit in Verbindung zu bringen ist Unsinn.

Allerdings stoße ich schon selbst beim kleinsten Umbau auf Probleme, oder ist der FireFox daran Schuld?

Wenn Firefox etwas anders darstellt als Du es Dir dachtest, kannst Du mit beinahe 100%iger Wahrscheinlichkeit davon ausgehen, dass der Fehler bei Dir liegt. Daher ...

Das Ganze wird im Internet Explorer Problemlos dargestellt,

... ist dies eine Beobachtung, die Du in der Praxis nicht machen kannst, denn Du führst Deine Primärtests mit Firefox aus. Erst wenn dort alles richtig ist, kümmerst Du Dich um die Fehler, die der IE macht.

im FireFox eigentlich auch, bis auf wenn man es sich genauer ansieht. Denn dann stellt man einen kleinen Rand unter dem span-Tag fest -> 1px.

Nö, sehe ich nicht.

Auch mit einer Höhenangabe des span-Tags ist es nicht zu lösen.

Sofern Du keine weiteren CSS-Angaben gemacht hast, handelt es sich bei Deinem <span> um ein Inline-Element, d.h. Größenangaben verpuffen wirkungsfrei.

Cheatah

[Matt]

Mit Semantisch meinst du dann eher auf <li> umstellen, logisch struktieren und gliedern?

Also was ich jetzt festgestellt habe, der FireFox 1.5.7 stellt es ohne kleinen Rand dar, der Firefox Version 2.0 (AKTUELL) mit Rand! Also muss das ein Bug sein. Selbst wenn ich die Höhe vom Span Element definiere, sehe ich nur die Höhe des Textes und nicht den leeren Content wie es mir der InternetExplorer richtigerwiese mit darstellt.

[wahsaga]

hi,

Selbst wenn ich die Höhe vom Span Element definiere,

Welche Maßnahme hast du ergriffen, damit eine height beim Inline-Element Span wirksam sein dürfte?

sehe ich nur die Höhe des Textes und nicht den leeren Content wie es mir der InternetExplorer richtigerwiese mit darstellt.

Du gehst vermutlich schon wieder fälschlicherweise davon aus, der IE würde es richtig machen.

gruß,
wahsaga

[Matt]

Welche Maßnahme hast du ergriffen, damit eine height beim Inline-Element Span wirksam sein dürfte?

style="height:30px"
wie bereits gesagt, im firefox geht das so nicht, der IE interpretiert es richtig (oder ist es falsch?!)

Du gehst vermutlich schon wieder fälschlicherweise davon aus, der IE würde es richtig machen.

Ja davon gehe ich aus. Da es der Firefox 1.5.7 auch richtig macht, nur der neue 2.0 nicht!

Was dann??

[wahsaga]

hi,

Welche Maßnahme hast du ergriffen, damit eine height beim Inline-Element Span wirksam sein dürfte?

style="height:30px"
wie bereits gesagt, im firefox geht das so nicht, der IE interpretiert es richtig (oder ist es falsch?!)

Firefox gut, IE bäh.

Cheatah erwähnte es doch schon, bei einem Inline-Element wie Span _muss_ eine height-Angabe wirkungslos bleiben, so lange du es nicht davon "befreist", als inline dargestellt zu werden.

(Zum Beispiel über display:block, oder per float oder absoluter Positionierung, die beide block implizieren; oder per display:inline-block, was aber nicht browserübergreifend unterstützt wird.)

gruß,
wahsaga

[Cheatah]

Hi,

Welche Maßnahme hast du ergriffen, damit eine height beim Inline-Element Span wirksam sein dürfte?
style="height:30px"

also keine. Dein <span>-Element ist noch immer vom Typus Inline, dass heißt dass die height-Angabe wirkungslos sein *muss*.

wie bereits gesagt, im firefox geht das so nicht, der IE interpretiert es richtig (oder ist es falsch?!)

Unterscheide zunächst zwischen "richtig" und "wie gewünscht". Anschließend freunde Dich mit der Erkenntnis an, dass, wenn der IE etwas "wie gewünscht" darstellt, Firefox jedoch nicht, sowohl der IE als auch Du etwas falsch machen.

Ja davon gehe ich aus. Da es der Firefox 1.5.7 auch richtig macht, nur der neue 2.0 nicht!

Es ist natürlich nie auszuschließen, dass eine neue Software-Version einen neuen Bug besitzt. Die Historie zeigt aber, dass bei der Gecko-Engine die Korrektheit mit der Zeit steigt. Überprüfe also anhand der Standards, wo die bisherige Interpretationsschwäche lag.

Cheatah