Validní max-width v IE

The Zero, sobota 12. 8. 2006 - 03:11

Internet Explorer nepodporuje spoustu skvělých věcí, jak všichni moc dobře víme. Jedna z nich, max-width, je opravdu nepostradatelná pro plovoucí layouty. Osobně u každého plovoucího layoutu dávám max-width: 1000px; a myslím, že to bohatě stačí.

Jak ale dosáhnout stejného efektu v IE? Řešení pomocí expressions už dávno popsal Jirka Chomát, ale má to jednu nevýhodu, jestli se nepletu, zápis width: expression(něco); CSS validátor nepřekousne.

Protože aktuálně připravuji redesign blogu (já se změním!), řekl jsem si, že jednou výjimečně vyjdu vstříc i uživatelům modrého zla a něco vymyslím. První řešení, které mě napadlo, je jednoduché, ale není zrovna nejšťastnější a jak to tak teď píšu, vlastně za nic nestojí, ale když už jsem si dal tu práci, uvedu ho.

Celý obsah stránky je obalen v blokovém elementu, dejme tomu <div id="body">. Na konec stránky vložíme podmíněný komentář:

<!--[if IE]>
<script src="inc/js/ie.js" type="text/javascript"></script>
<![endif]-->

Samotný JS soubor je pak jednoduchý:

var body=document.getElementById("body");
if(body && body.offsetWidth>1000)
body.style.width="1000px";

A je to. Hlavní nevýhoda této metody spočívá v tom, že stránka při vykreslování problikne, pokud se má obsah zužovat. Nevadí, můžeme zkombinovat to nejlepší z obou triků: Expressions a podmíněné komentáře. Do hlavičky stránky tak přidáme kód

<!--[if IE]>
<style type="text/css">
/* <![CDATA[ */
#body {
width: expression(do­cument.body.cli­entWidth>1000 ? "1000px":"auto");
}
/* ]]> */
</style>
<![endif]-->

Máme validní XHTML (dokonce i CDATA to má :)))) a IE použije maximálně 1000px.

Tři poznámky: Za prvé, nejde nastylovat tělo samotné, musí to být nějaký potomek, za druhé, funguje to asi jen v IE se zapnutým JavaScriptem (99% minimálně, troufám si tvrdit) a za třetí, ta podmínka by měla být spíš <!--[if IE lt 7]>, protože IE 7 už myslím max-width zvládá, ale momentálně to nemám jak otestovat.

Zařazeno do kategorie Webdesign.

Předchozí: Já se změním!

Následující: Paradox RSS

Komentáře

1. Vladimír

13.08.2006 16:44:00

Dobrý nápad. S tím ie 7 máš pravdu ie 7 (od beta 3) podporuje max-width i min-width. Testoval jsem to.

Přidat komentář

Jako heslo je to proto, že lze využít magic wand a odpověď se tak bude pamatovat.

Povolené tagy: b, i, q. Bez jakýchkoli atributů a řádně ukončené. URL se převádí automaticky.

Vyžadováno je pouze jméno (proto je zvýrazněné), text, kód (ten zadáváte jen s vypnutým JavaScriptem - jestli ho nevidíte, nemusíte se o něj starat. Poslední věc, kterou formulář vyžaduje, je stisknutí tlačítka Přidat.

* E-mail slouží především k načtení gravatarů. Zobrazovat se nebude.