Archief - Uniformiteit verschillende browsers

Ik ben nu al een tijdje bezig met webdesign en aangezien webbrowsers onderling nogal eens willen moeiljik doen met de weergave van een site gebruik ik altijd de w3c declaratie van mijn html-tag.
Daardoor ziet de site er normaalgezien hetzelfde uit in alle browsers.
Daarjuist moest ik echter voor een kennis een simpel site layoutje maken en zie dat de footer in firefox niet zichtbaar is en wel in IE.

Als ik bij de footer class zet "float:left" werkt het wel overal.
Het goed krijgen is dan ook niet het probleem, ik zou gewoon graag willen weten hoe het komt dat de site er in verschillende browsers anders uitziet ondanks mijn declaratie?

Ge moet uw floats clearen.

#clear{
clear:both;
}

bv

sorry voor de vragen hierbij maar:
-wat is dat gedoe met floats en floats clearen? waarom gebruik je ze in css?
-alse er een # voor een div staat in css zoals die #clear, wat is dat dan verschillend met moest er gewoon clear gestaan hebben?

Groeten,
Marius

Idd dat snap ik, maar ik vraag mij af waarom hij het dan toch in een browser goed weergeeft en in een andere niet?
Ik declareer toch de dtd van w3c?

Dus ofwel overal fout (wat logisch zou zijn)
of overal goed..

al jullie antwoorden in 1 post

Float plaats een element 'licht absoluut' en uitgelijnd,
in de zin dat een image die in een Paragraaf gefloat word, de tekst rond hem mooi wegduwd.
De image zweeft / drijft ( float ) in je paragraaf, maar is wel aanspreeekbaar en heeft invloed op zijn directe naaste elementen ( dat heb je bij absolute niet )

Als je een div hebt, en daarin 2 divs gefloat, zal FireFox de maindiv collapsen, omdat hij gefloate divs NIET als zijn content bekijkt ( vandaar de lichte absolute )
Zet je echter onder die 2 gefloate divs een div met clear:both vertel je eigenlijk dat dit element de float regel doorbreekt, en alles IN zijn plaats zal houden, incl de gefloate inhoud.

het wel en niet correct inlezen van CSS en HTML is vaak geen kwestie van DTD, maar eerder van hoe FF en IE, en chrome en andere browser consoorten met CSS omspringen, niet alle brwosers gebruiken css op dezelfde manier ( jammer genoeg )
er zit altijd wel 5% verschil op, spijtig genoeg heb je wel altijd iets nodig van die 5%.

het #clear word hier gebruikt als een ID ( eigenlijk roep je in CSS dus een div aan die er in je HTML zo uitziet : <div id="clear"> ), die je aan een div kan meegeven, het zou me beter lijken een class .clear te maken, en dit op je elementen te zetten die je moet clearen.
In CSS MOET je ekl element met . of # aanroepen, tenzij het Document Declared objecten zijn ( H's, P's, LI's, etc etc ( al de HTML tags ) )


legal disclaimer :
float lijkt mij eigenlijk vrij moeilijk in mensentaal te beschrijven wat het doet - he tkan dus zijn dat mijn uitleg wat vreemd over komt, iemand die een beter idee heeft hoe een float in mensentaal en simpel uit te leggen, be my guest

UnD3RD0G zei:

al jullie antwoorden in 1 post

het wel en niet correct inlezen van CSS en HTML is vaak geen kwestie van DTD, maar eerder van hoe FF en IE, en chrome en andere browser consoorten met CSS omspringen, niet alle brwosers gebruiken css op dezelfde manier ( jammer genoeg )
er zit altijd wel 5% verschil op, spijtig genoeg heb je wel altijd iets nodig van die 5%.

Klik om te vergroten...

mooie uitleg bedankt, ik heb echter nog een vraagje over het bovenstaande,
ik ben die dtd indertijd gaan gebruiken omdat ik problemen had met bijvoorbeeld padding 10 px, of borders, dat een div dan begon te verspringen enz, in firefox stond het dan juist en in IE dan weer niet (en omgekeerd).
Sinds ik dan die declaratie van de DTD deed was het overal gelijk.
Ik dacht net dat die DTD declaratie daarvoor diende? Om te zeggen hoe ze ergens mee moesten omgaan? Ik heb sindsdien toch dingen die voordien verschilden per browser daarmee opgelost gekregen, tot ik het simpele script in mijn beginpost gebruikte.

Idd, mooie uitleg. thx daarvoor! Voor de rest dacht ik ook dat die dtd zou dienen voor uniformiteit..

Een DTD gaat dan ook nog eens over je x(ht)ml-document en niet per se over de interpretatie van CSS rendering. Check deze chart zeker ook even . Compatibility Master Table

Volgens mij verwarren jullie het nut van de DTD met het nut van de CSS ::

eigenlijk gaat een DTD niets wijzigen aan de manier waarop je elementen getoond worden wel aan WELKE elementen er bestaan in je document.

een DTD is eigenlijk een oplijsting van elementen die je in een pagina gebruikt.
De DTD die meestal gebruikt word is de Strict of Transitional of Frameset .
om je een voorbeeld te geven, Strict enTrans laten de <frame> tag niet toe, omdat dit in deze niet gedeclareerd is, wat betekent, dat als jij dit in een strict gebruikt, je document dit niet kent, en zal hij dus ook niet valideren.

DTD is eigenlijk een lijst die je voorziet van beschikbare elementen.
<h1><h2><p><a><ol><li><span><div>, ... enzovoort zijn dus allemaal elementen die in de DTD beschreven worden, er zijn internationale afspraken gemaakt over welke elementen universeel gebruikt worden, en dat zijn dus de bekenden 3 DTD's.
Als je document alle objecten kent, werk je in een standaard compliance mode, scheelt er iets in je document waardoor hij niet alles herkent ga je over in Quircksmode ( waarin soms de meeste bizare zaken kunnen gebeuren ) - dit kan bv komen door een table die niet word afgesloten in een geneste table etc, en de broswers dit eigenlijk zelf gaan moeten ' slim' oplossen,
ik bekijk standard compliance mode als ( browser loopt mooi in de rij hoe hij het opgelegd heeft te doen )
Quircksmode laat je de browser zelf inteligent zijn ( omdat hij iets moet aanvullen ofzo ) en je dus afhankelijke bent van de inteligetnie van de browser ( met de soms desastreuse gevolgeven vandien )

je zou dus perfect je eigen DTD kunnen schrijven waarin je ipv h1 en h2 <Titel1> en <Titel2> gebruikt. Het is echter onozel om het warm water nogmaals uit te vinden, vandaar de universele standaarden.

Een DTD staat dus compleet los van enige vorm van stijl op dit element.
Echter hebben de meeste browsers voor deze elementen wel een standaar stijl, maar deze komt niet altijd overeen, bv de list-style-position van een UL is niet dezelfde in FF als IE ( inside & outside denk ik ) vandaar is het belangerijk sommige in het begin van je CSS te resetten naar een bepaalde waarde ( vaak 0 ) om deze correct te kunnen stijlen.

DUS :
DTD bepaald WELKE elementen in je document thuis horen.
CSS gaat je toelaten deze elementen te stijlen.

( moest je bv een H1 in je DTD vervangen door een Titel1 zal je deze in css kunnen aanroepen door Titel1 {} )


Het kan je niet allemaal even duidelijk zijn, maar tis dan ook een snelcursus die je krijgt in 3 paragrafen

En als aanvulling op bovenstaande: IE heeft de nasty habit om door middel van de DTD te bepalen of hij in quirksmode rendert of niet. Vandaar de verwarring waarschijnlijk ook .

Ik snap het ongeveer volledig, maar heb toch nog een vraag.
IE en firefox kennen toch beiden het "padding"-element, hoe komt het dan als ik die dtd niet declareer, dat firefox het mooi weergeeft als ik bijvoorbeeld zeg dat de padding left 5px is en de breedte dan 5 pixels verminder en dat IE dan een lege ruimte van 5px toont?

Dan zegt die dtd toch net wel hoe deze elementen weergegeven worden?
Kortom, hoe komt het dat bij gebruik van de dtd IE ook weet dat de ingesprongen pixels van de breedte/hoogte van het volgende element afgeteld moeten worden?
(en eveneens bij bijvoorbeeld een border).

Doe ook even de moeite om het te lezen hé, als we een antwoord posten .

Standard: There are two box models, the traditional and the W3C. Obviously, the W3C one, where the width excludes padding and borders, is the standard.

In IE, the rendering mode decides which box model it follows. In quirks mode it uses the traditional model, in strict mode the W3C model.

Doctype switching is the only way of selecting a box model in IE 6 Windows. Mozilla, Opera and IE Mac allow the use of the box-sizing declaration to select a box model, while Safari only supports the W3C box model.

Klik om te vergroten...

Xavez zei:

En als aanvulling op bovenstaande: IE heeft de nasty habit om door middel van de DTD te bepalen of hij in quirksmode rendert of niet. Vandaar de verwarring waarschijnlijk ook .

Klik om te vergroten...

ik had idd deze post volledig overgeslagen omdat ik aan het opgaan was in underdog's post
Het is dus omdat die declaratie er niet is dat IE direct in quirksmode gaat en het dus fout weergeeft, dat was uiteindelijk wat k moest weten
In ieder geval bedankt voor jullie uitleg, ik heb genoeg documentatie en uitleg om verder te kunnen

Well done Xavez