Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

IE6 alle marges aan een kant?

6 antwoorden
  • Ik zit met het volgende curieuze geval: Ik ben een layout aan het maken volgens het principe: header left column ('sidebar') right column footer De linker en rechter kolom dienen links en rechts een marge van 20 px te hebben en 20 px tussen de beide kolommen in. Ik heb daarvoor onderstaande code gemaakt. Deze werkt uitstekend in Firefox, Safari, Opera, Chrome en IE8, maar IE6 heeft het vreemde verschijnsel dat deze links van de linkerkolom en rechts van de rechterkolom een marge maakt van 40px ("toevallig" het dubbele van de gewenste 20px ?) en vervolgens tussen de kolommen in in de problemen komt en de rechterkolom dus noodgedwongen op de volgende regel gooit. Ik heb het probleem even in de IE box model issue gezocht, maar volgens mij is dat niet het probleem. De breedte is goed, het probleem is dat de buitenste marges verdubbel worden. Ik heb al van alles geprobeert maar begin een beetje aan het einde van mijn latijn te raken. Het enige wat ik nog kan verzinnen is alles in aparte divs te zetten en de boel te gaan nesten (outerdiv, div, innerdiv of zoiets). Maar of het iets oplost weet ik niet en ten tweede krijg ik dan wel een draak van een code en daar pas ik momenteel voor. HTML [code:1:eef8e9f19d] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>layouttest</title> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <!-- Begin Maindiv --> <div id="maindiv"> <!-- start Content --> <div id="content"> <!-- Begin Header --> <div id="header"> <div id="headercontent"> header </div> <!-- end Headercontent --> </div> <!-- end Header --> <!-- Begin Left Column --> <div id="leftcolumn"> <p> Left column.</p> </div> <!-- End Left Column --> <!-- Begin Right Column --> <div id="rightcolumn"> <p> Right column. <a href="#">link</a>. </p> </div> <!-- End Right Column --> </div> <!-- end Content --> <!-- Begin Footer --> <div id="footer"> Footer </div> <!-- End Footer --> </div> <!-- End maindiv --> </body> </html> [/code:1:eef8e9f19d] CSS [code:1:eef8e9f19d] body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-image: url(images/mainbackgr_1600x231.jpg); background-repeat: repeat-y; margin: 0px; padding: 0px; } /* Layout elements */ #maindiv { width: 960px; background-image: url(images/contentareascanlines_960x6.jpg); background-repeat: repeat-y; padding: 0px; margin-top: 0; margin-right: auto; margin-bottom: 5px; margin-left: auto; } #content { width: 960px; height: 525px; background-image: url(images/contentareatop_960x501.jpg); background-repeat: no-repeat; background-position: top; } #header { height: 220px; width: 960px; margin: 0px; } #headercontent { color: #FFFFFF; margin: 0px; float: right; width: 320px; text-align: right; background-color: #00CCFF; } #leftcolumn { margin-left: 20px; margin-right: 10px; width: 280px; float: left; background-color: #FFCCFF; } #rightcolumn { margin-left: 10px; margin-right: 20px; float: right; width: 620px; background-color: #FFFFCC; } #footer { width: 940px; height: 50px; clear: both; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; margin: 0px; background-image: url(images/footerbck_960x49.jpg); } [/code:1:eef8e9f19d]
  • Zijn er dan nog veel die met IE6 werken?
  • Ja, nog zeker 20% gemiddeld genomen. (Daar had ik inderdaad ook al aan gedacht)
  • Met IE6 MOET je inderdaad rekening houden. Helaas, maar het is niet anders; voornamelijk veel bedrijfsnetwerken maken hier nog gebruik van omdat hun configuratie daar ooit op is gebouwd. Niet rekening houden met IE6 kan je dus simpelweg klanten kosten als het om een commerciele website gaat. Dat gezegd hebbende: om juist dit soort dingen te voorkomen maak ik altijd gebruik van een [url=http://meyerweb.com/eric/tools/css/reset/]CSS reset[/url] aan het begin van mijn stylesheet. Degene waar ik hier naar link is wel mega-uitgebreid, maar da's meer voor het idee. De "shorthand-method" is simpelweg: [code:1:f8f40638f6]* { margin: 0; padding: 0; }[/code:1:f8f40638f6]Doet zijn werk ook, maar kan hier en daar nog onverwachte dingen opleveren. Als je met een CSS reset nog tegen browserspecifieke zaken aanloopt is dat vrijwel altijd een IE-probleem. Dat kun je dan aanpakken met [url=http://www.quirksmode.org/css/condcom.html]conditional comments[/url]. Die werken alleen in HTML, dus dat zal je in de head moeten opnemen als: [code:1:f8f40638f6]<!--[if lte IE 7]> <style type="text/css"> #blokje { margin: 3px; } </style> <![endif]--> [/code:1:f8f40638f6]Door het in de head van het document zelf te zetten, override je de externe stylesheet. En omdat alleen IE iets doet met conditional comments, zullen andere browsers dat stukje als comment herkennen en het negeren.
  • [quote:111eac5613="Gooly"]Ja, nog zeker 20% gemiddeld genomen. (Daar had ik inderdaad ook al aan gedacht)[/quote:111eac5613]Das idd best nog veel... bij onze images zit toch al >>1 jaar IE7 erin.
  • Ik bouw al jaren websites en probeer altijd rekening te houden met zoveel mogelijk gebruikers en zoveel mogelijk browsers. Recentelijke ben ik echter gestopt met schaven om het er in IE6 nog fatsoenlijk te laten uitzien. Ik vind het wel genoeg geweest met dat rampending. In al mijn sites staat nu (o.a.) dat het er goed uitziet in IE7 of hoger, en in... enzovoorts, enzovoorts. Zo ben ik ook gestopt met sites maken voor 800x600 px. In alle statistieken die ik bekijk, komt dat vrijwel nooit meer voor. En in die zelfde statistieken zie ik géén 20 % voor IE6 gebruik, hooguit 5-10. Als je in een antieke auto wilt rijden, moet je ook beseffen dat de onderdelen in de meeste garages niet meer op de plank liggen. Doe jezelf een plezier en stop er mee, niks MOETEN omdat er een paar wat centjes dachten uit te sparen omdat hun 'Traction Avant' nog 'best' reed. IE6 was een mislukking.

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.