CSS mit eingebettetem Javascript...

[.editworker]

Hallo!

Ich habe ein Problem mit in CSS eingebettem CSS. Mein Ziel ist es, ein Layout zu erstellen, in dem der Footerbereich der Seite mit fester Höhe  im unteren Bereich des Browserfensters "klebt". Der Contentbereich über dem Footer soll autromaisch skalieren, wenn die Fenstergröße des Browsers verändert wird. Das Problem ist die Browserkompatibilität der JavaScript-Variablen, die ich dafür in der CSS-Datei abfragen muss:

Funktioniert mit dem IE:

#content
{
         position:absolute;
         top:100px;
         left:200px;
         width: expression( document.body.offsetWidth - 240 + 'px');
         height: expression( document.body.offsetHeight - 200 + 'px');
         border-width:1px;
         border-color:#0000FF;
         border-style:solid;
         z-index:2;
         background-color:#AAAAAA;
}
#footer
{
         position:relative;
         top: expression( document.body.offsetHeight - 200 + 'px');
         background-color:#EEEEEE;
         left:0px;
         width:100%;
         height:100px;
         border-width:1px;
         border-color:#FF00FF;
         border-style:solid;
}

Sollte mit Firefox und anderen Browsern funktionieren - tut es aber nicht:

#content[id]
{
  position:absolute;
         top:100px;
         left:200px;
         width: expression( window.innerWidth - 240 + 'px');
         min-width: expression( window.innerWidth - 240 + 'px');
         height: expression( window.innerHeight - 200 + 'px');
         min-height: expression( window.innerHeight - 200 + 'px');
         border-width:1px;
         border-color:#0000FF;
         border-style:solid;
         z-index:2;
         background-color:#AAAAAA;
}
#footer[id]
{
         position:fixed;
         bottom:0px;
         background-color:#EEEEEE;
         left:0px;
         width:100%;
         height:100px;
         border-width:1px;
         border-color:#FF00FF;
         border-style:solid;
}

Wenn ich die entsprechenden Variablen durch Firefox mit einem Alert ausgeben lassen, sind Sie in jedem Fall korrekt. Sie finden bloß nicht den Weg in den CSS-Parser. Die beiden divs werden somit lediglich mit Höhe 0 angezeigt...

Hat vielleicht jemand eine Idee, wie sich dieses Problem beheben ließe? Bitte keine alternativen Tipps wie "Verwende Frames" o.ä.

Vielen Dank,
grüße
M.Heiderich

[Cheatah]

Hi,

Das Problem ist die Browserkompatibilität der JavaScript-Variablen, die ich dafür in der CSS-Datei abfragen muss:

nein, ist es nicht, weil expression() kein Teil von CSS ist. Es ist IE-proprietäre, hat also bitte _wenn überhaupt_ mit entsprechenden CSS-Hacks eingesetzt zu werden. Alle anderen CSS-tauglichen Browser ermöglichen den standardkonformen Einsatz von left und right respektive top und bottom gleichzeitig.

Cheatah

[.editworker]

Danke für die Antwort.

Gibt es in diesem Falle Alternativen für expression(), die auch Mozilla/Firefox interpretieren kann?

[Cheatah]

Hi,

Gibt es in diesem Falle Alternativen für expression(), die auch Mozilla/Firefox interpretieren kann?

nein, aber die Notwendigkeit ist auch nicht gegeben. expression() dient hier der Umgehung einer Unfähigkeit des IE, die bei anderen Browsern nicht vorliegt.

Cheatah

[Joachim]

Hi,

Hat vielleicht jemand eine Idee, wie sich dieses Problem beheben ließe? Bitte keine alternativen Tipps wie "Verwende Frames" o.ä.

Warum arbeitest Du hier nicht mit position: fixed; bottom:0;, das sollte eigentlich alle Geckos zufriedenstellen. Das Div verhaelt sich dann optisch wie ein frame.
Ansonsten bleibt Dir afaik nur die Hoehenangaben Browserabhaengig abzufragen und mit document.write ins css zu schreiben. Dann brauchst Du aber auch eine Reloadfunction, sonst laesst ein resize Deine Seite alt aussehen.

Gruesse, Joachim