Als je aan een div met en vaste breedte een achtergrondafbeelding meegeeft, dankun je daar tekst in platsen. Geef je die div vervolgdens een padding of een kader mee, dan ziet het in Dreamweaver er nog wel goed uit en ook in IE-browsers van versie 5.x en ouder, maar niet in de Mozilla-browsers. Dit komt door een (merkwaardige) omschrijving van de staandaard. De breedte van een div wordt formeel aangeduid door de breedte die voor de inhoud is gereserveerd. Dus als opgegeven wordt width: 300px; dan kan de tekst een breedte tot 300px krijgen, maar de breedte van het vak zelf is meer: je moet er dan ded beide paddings en randbreedtes bij optellen! Vandaar dat de achtergrond zich rechts en onder het vak gaan uitstrekken.
Met model loopt dusietwat tegen de intuïtie van vormgevers is. Vandaar dat het MicroSoft wel vergeven kan worden dat ze het model anders -meer vormgeveefvriendelijk- heeft uitgevoerd.
Een mogelijke oplossing is door binnne de div met de opgegeven grootte een tweede div toe te voegen, met het de rand en de padding.
Wil je om een betere semantische weergave nastreven en daarmee alles in één div oplossen, dan moet je in de stylesheet de oudere InternetExplorer eerst de breedte voor IE5 meegeven, hem daarna misleiden, zodat deze denkt dat de stijleigenschappen voor de div zijn afgelopen, en vervolgens de waarde voor de overige browsers meegeven:
#vak {
eigenschap: waarde;
eigenschap2: waarde;
width: 300px;
voice-family: "\"}\"";
voice-family: inherit;
width: 288px;
}
html>body #vak {
width: 288px;
}
De laatste toevoeging html>body is ervoor om ook de gebruikers van de browser Opera van een goede stijl te voorzien.
Ik heb gemerkt als ik bovenstande code in Dreamweaver invoer -dit moet dan handmatig- dat de editor de neiging heeft de beide breedtes op de laagsst ingevoerde waarde in te stellen. Loop dus na afloop dit even na.