[css layout] Fixed en liquid, FF, IE6, IE7

[Verwijderd]

Hallo iedereen,

ik ben best goed met html en css, maar sta nu weer eens voor een nieuwe uitdaging. Ben momenteel met een website bezig die a la www.rabobank.nl moet rekken en strekken. Oftewel:

Minimum breedte: 760 px;
Maximum breedte: 960px;

Mocht je een venster hebben wat tussen de 960px en 760px is, moet hij dus meerekken met de breedte van de browser. In firefox is dit geen enkel probleem, min-width en max-width. In IE is dit door middel van CSS niet te "hacken". Javascriptjes die te vinden zijn laten de breedte van de website niet meerekken maar geven een vaste breedte aan de hand van de breedte op het moment van laden.

Zijn er mensen die oplossingen hebben of mee willen denken naar een oplossing? De site van rabobank heb ik al door zitten spitten, maar kan niet vinden hoe zij het in IE voor elkaar krijgen.

Alvast bedankt,
Wes

[Fuzzillogic]

In de C'T van deze maand staat een artikel over precies dit. En mogelijk dat je met Dean Edwards' IE7-script ook al een stuk verder kunt komen.

[Verwijderd]

Heb de CT net even ingekeken, maar daar werd ik niet erg veel wijzer van - het gaf eerder de mogelijkheid een andere css per resolutie te kiezen, het probleem hiermee is dat als je je pagina inlaad op 1024 en daarna resized naar 800*600, de layout niet meerekt.

Ik zoek in essentie een oplossing voor het ontbreken van de min-width en max-width support in IE.

Momenteel geeft dit het beste resultaat:

#container {
min-width: 760px;
max-width: 960px;
width: expression(document.body.clientWidth > 960 ? "960px" : "auto");
margin-left: auto;
margin-right: auto;
}

Internet Explorer 7 en FF geven hierbij het goede resultaat, in IE6 verandert hij echter de grootte van de container niet indien je je venster kleiner sleept.

[Fuzzillogic]

Wat let je om "runtime" via een onResize-event van van stylesheet te wisselen? Dat kan gewoon.

Cascading Stylesheet:

width: expression(document.body.clientWidth > 960 ? "960px" : "auto");

Dit is geen CSS, maar een MSIE proprietair verzinsel, nooit gebruiken dus, tenzij je een site puur voor intranet maakt waar je eisen aan kunt stellen.

[Verwijderd]

Fuzzillogic schreef op dinsdag 20 februari 2007 @ 14:40:
Wat let je om "runtime" via een onResize-event van van stylesheet te wisselen? Dat kan gewoon.

Cascading Stylesheet:

width: expression(document.body.clientWidth > 960 ? "960px" : "auto");

Dit is geen CSS, maar een MSIE proprietair verzinsel, nooit gebruiken dus, tenzij je een site puur voor intranet maakt waar je eisen aan kunt stellen.

Natuurlijk kan ik van stylesheets wisselen bij elke resize, het mooie van het rabobank voordeel is echter dat hij vloeiend resized, elke grootte tussen 760 en 960 kun je gebruiken, afhankelijk van hoe je je venster resized.

Heb momenteel de juiste oplossing gevonden, het was een hoop geknutsel, maar het belangrijkste is dat de website weer pixelperfect is in alle browsers (IE6, IE7, FF, Opera, Safari) en de resize van de container prima werkt.

Kan het jullie helaas niet laten zien, is WiP voor een grote klant die het niet op prijs zal stellen als het project al openbaar wordt. Mochten er nog mensen interesse hebben in mijn oplossing, geef even een seintje en ik laat het weten!