[CSS] dirty hack voor IE6 margin probleem gevonden

[Verwijderd]

Ik weet eigenlijk niet hoe ik dit moet melden maar ik kwam toevallig achter een dirty hack voor het margin probleem in IE6 + CSS.

Wanneer je in het begin van je CSS een margin en padding op 0 zet voor *, dus IE, heb je nog steeds je margin probleem.

Als je nu je marin instelt op

code:

#blah {
    float: left;
    margin-right: 20px;
    width: 100px;
    z-index:1;
    top: 0px;
}

Heb je een maring probleem tussen IE6 en IE7/FF

Wanneer je achter 20px de ; (puntkomma) weg laat wordt het door alle browsers prima herkend.

Je komt wel in de problemen met een bottom en dergelijk, dus je marin instellen in je layer voor IE7/FF is goed en dan voor dezelfde layer the magin voor IE6 zoals onderstaand op 0 doet de trick helemaal.

Dit is een dirty hack als je mij vraagt maar werkt wel

Ik kwam hier doordat ik dit eigenlijk toe wilde passen voor IE6:

code:

* html #blah { margin-right: 20px }

[ Voor 12% gewijzigd door Verwijderd op 08-05-2008 13:57 ]

[iain]

mijn ervaring is dat het maken van een algemene stylesheet voor alle browsers (afhankelijk van de complexiteit van het design) meestal toch niet te realiseren is.

Het is sneller om conditional stylesheets te maken:

HTML:

    <!--[if IE 6]> 
      <link href='/stylesheets/ie6.css' media='screen' rel='stylesheet' type='text/css' />
    <![endif]-->
    <!--[if IE 7]> 
      <link href='/stylesheets/ie7.css' media='screen' rel='stylesheet' type='text/css' />
    <![endif]-->

meer info

[ Voor 6% gewijzigd door iain op 08-05-2008 14:08 ]

[Verwijderd]

Ik heb het toch voor elkaar moet ik zeggen, ik heb geen problemen met CSS op dit moment.

De manier die jij aangeeft is wel handig, alleen 2 CSS files onderhouden is niet fijn, dus vandaar de setting zoals ik in mijn TS doe.

[disjfa]

Hacks moet je niet gebruiken. Gewoon normaal html gebruik voorkomt 99% van alle hacks. Een enkele uitzondering als een height vs min-height kan je dan netjes in een conditional comment zetten en dan moet je wel klaar zijn.

[ Voor 44% gewijzigd door disjfa op 08-05-2008 14:26 ]

[Bitage]

alleen 2 CSS files onderhouden is niet fijn

Over het algemeen houd je er maar één bij en alle render foutjes van IE7 uit het voorbeeld van hierboven verander je.

(voorbeeld hieronder is slechts ter illustratie. renderfouten hoeven in de praktijk met deze code niet voor te komen)

Cascading Stylesheet:

/* Voor IE6 */
div.content
{
margin-left:25px;
margin-right:10px;
float:left;
}

div.comments
{
margin-top:50px;
}

Nu wordt de linker margin van div.content in IE7 kut gerendert, dus maak ik een alternatieve CSS alleen voor die ene regel:

Cascading Stylesheet:

/* Voor IE7 */
div.content
{
margin-left:15px;
}

[Bosmonster]

iain schreef op donderdag 08 mei 2008 @ 14:07:
mijn ervaring is dat het maken van een algemene stylesheet voor alle browsers (afhankelijk van de complexiteit van het design) meestal toch niet te realiseren is.

Het is sneller om conditional stylesheets te maken:

HTML:

    <!--[if IE 6]> 
      <link href='/stylesheets/ie6.css' media='screen' rel='stylesheet' type='text/css' />
    <![endif]-->
    <!--[if IE 7]> 
      <link href='/stylesheets/ie7.css' media='screen' rel='stylesheet' type='text/css' />
    <![endif]-->

meer info

Ik heb nog nooit conditional statements hoeven gebruiken en maak altijd alles IE6+/FF/Safari compatible.

Hacks ben ik overigens ook niet weg van. Veel problemen zijn simpelweg te voorkomen of te omzeilen door een iets andere aanpak.

[ Voor 7% gewijzigd door Bosmonster op 08-05-2008 14:29 ]

[marko77]

En laat die aanpak nou nét afhangen van hoe het design in elkaar zit. Er zijn inderdaad wel meerdere wegen naar Rome, maar soms ontkom je er niet aan (tijdsdruk, kosten etc. etc. ).

[Verwijderd]

marko77 schreef op donderdag 08 mei 2008 @ 14:36:
En laat die aanpak nou nét afhangen van hoe het design in elkaar zit. Er zijn inderdaad wel meerdere wegen naar Rome, maar soms ontkom je er niet aan (tijdsdruk, kosten etc. etc. ).

Klopt en dan is het in mijn ogen ook een hack en geen omweg

[Borizz]

Uhm waarom gebruik je niet gewoon display: inline, dit probleem is allang bekend: IE Doubled Float-Margin Bug.

Werkt ook nogeens in alle browsers zonder hacks. Wat dat betreft ben ik het volledig eens met Bosmonster.

[Verwijderd]

Is zowiezo toch te gek voor woorden dat men rekening moet houden met juist een browser die zich slechter aan de standaarden houdt dan iets anders.

[curry684]

Bosmonster schreef op donderdag 08 mei 2008 @ 14:28:
[...]

Ik heb nog nooit conditional statements hoeven gebruiken en maak altijd alles IE6+/FF/Safari compatible.

Ga je me nu echt zeggen dat je Peekaboo nog nooit tegen bent gekomen?

Daarnaast kom ik genoeg gevallen tegen in complexe designs waar met name IE6 er een potje van maakt, dus bij ons is de conditional comment stylesheet toch echt een veel terugkomende gast (helaas).

Verwijderd schreef op donderdag 08 mei 2008 @ 18:57:
Is zowiezo toch te gek voor woorden dat men rekening moet houden met juist een browser die zich slechter aan de standaarden houdt dan iets anders.

Je hoeft niets. Alleen bij mensen zoals ik geldt stiekem toch dat de klant niet zo hard geneigd is te betalen als z'n website kut rendert bij 50% van z'n potentiele klanten.

[ Voor 30% gewijzigd door curry684 op 09-05-2008 00:18 ]

[Verwijderd]

Borizz schreef op donderdag 08 mei 2008 @ 18:56:
Uhm waarom gebruik je niet gewoon display: inline, dit probleem is allang bekend: IE Doubled Float-Margin Bug.

Werkte niet, ik heb de padding en maring toch op 0 staan voor IE6 zoals ik eerder zei.

Werkt ook nogeens in alle browsers zonder hacks. Wat dat betreft ben ik het volledig eens met Bosmonster.

Eens, eens

Het blijkt dat zijn verhaal niet op gaat, dus of je het eens bent of niet... ik denk dat het niet helemaal op gaat.

[crisp]

curry684 schreef op vrijdag 09 mei 2008 @ 00:17:
[...]

Ga je me nu echt zeggen dat je Peekaboo nog nooit tegen bent gekomen?

Daarnaast kom ik genoeg gevallen tegen in complexe designs waar met name IE6 er een potje van maakt, dus bij ons is de conditional comment stylesheet toch echt een veel terugkomende gast (helaas).

Hier idem; double-float bug, 3px text-jog, peekaboo en elke hasLayout bug die je maar kan verzinnen heb ik al aan den lijve ondervonden zeg maar, en daar heb ik nooit moeite voor hoeven doen

[Bosmonster]

Verwijderd schreef op vrijdag 09 mei 2008 @ 00:28:
[...]

Het blijkt dat zijn verhaal niet op gaat, dus of je het eens bent of niet... ik denk dat het niet helemaal op gaat.

Dat ligt eraan. Alles is op meerdere manieren op te lossen (of beter nog, te voorkomen). Conditional statements zijn een nette manier om problemen op te lossen, maar daardoor niet per definitie altijd nodig. Ik voorkom ze liever nog steeds.

'Nooit' was een beetje een overdreven term overigens, even voor de beeldvorming

In het geval van voorkomen bedoel ik ook een stap terug in het proces. Soms kan een kleine wijziging in het design bijvoorbeeld ook een hoop problemen voorkomen. Een wijziging waar je niks van hoeft te merken in het uiteindelijke resultaat. Daarnaast ben ik niet van mening dat alles per definitie exact gelijk moet zijn in verschillende browsers. Geen enkele gebruiker gaat tussen verschillende browsers zitten vergelijken. Het doel is alles er goed uit te laten zien in alle browsers, niet exact gelijk. Dat laatste is imho verspilde moeite. Hierbij maak ik wel onderscheid tussen 'primaire browsers' en 'secundaire browsers'. Primaire browsers zijn voor mij IE7/FF2. Secundaire browsers nog IE6/Safari en eventueel Opera.

Dat is dus in een notendop meer wat ik bedoelde dan letterlijk toegespitst op alle browser quirks.

[ Voor 54% gewijzigd door Bosmonster op 09-05-2008 10:00 ]

[disjfa]

Ik ben het ook gewoon met bos eens hoor. Ik werk liever om de raare broserbugs heen voor ik ze ga opzoeken. En rare designs genoeg langs zien komen.

[Verwijderd]

disjfa schreef op vrijdag 09 mei 2008 @ 13:52:
Ik ben het ook gewoon met bos eens hoor. Ik werk liever om de raare broserbugs heen voor ik ze ga opzoeken. En rare designs genoeg langs zien komen.

Sterker, je bent dus hacks aan het gebruiken omdat eromheen werken gewoon een hack/fix/workaround is.

Dat jij en Bos nu stellen dat de manier van jullie werken eromheen werken is, dat is naar mijn idee gewoon een andere benaming voor een hack.

[Bosmonster]

Dat begrijp je verkeerd Rutger. We zeggen niet dat we hacks gebruiken. Wat ik wel heb gezegd is dat ik dat nog ranziger vind dan conditional statements. Met "eromheen werken" bedoel ik het vanuit ontwerpperspectief voorkomen of door een andere html/css aanpak voorkomen van veelvoorkomende problemen.

Veel duidelijker kan ik niet zijn Blijkbaar is er voor jou maar 1 oplossing en dat zijn hacks, want je wilt de mogelijke alternatieven niet zien.

[ Voor 41% gewijzigd door Bosmonster op 09-05-2008 15:57 ]

[Kiphaas7]

snip: zeg dan niks

[ Voor 92% gewijzigd door BtM909 op 09-05-2008 16:13 ]

[Bosmonster]

Kiphaas7 schreef op vrijdag 09 mei 2008 @ 16:07:
[mbr]snip: zeg dan niks :/[/]

Ja, nou ben ik nieuwsgierig

[ Voor 3% gewijzigd door Bosmonster op 09-05-2008 17:24 ]

[Borizz]

Verwijderd schreef op vrijdag 09 mei 2008 @ 00:28:
[...]


Werkte niet, ik heb de padding en maring toch op 0 staan voor IE6 zoals ik eerder zei.
[...]

Eens, eens

Het blijkt dat zijn verhaal niet op gaat, dus of je het eens bent of niet... ik denk dat het niet helemaal op gaat.

Misschien moet je dan eens even uitleggen wat jij onder het margin probleem in IE6 + CSS verstaat. Ik had het idee dat het over de dubbele margin bij een gefloat element ging, maar blijkbaar betekend het dus iets anders.
Wat het inhoud begrijp ik niet uit je TS en ook de replies geven daar ook geen antwoord op.
Ik begrijp dat je zoiets als dit hebt:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Het Margin probleem in IE6 + CSS</title>
        <style type="text/css">
            * { padding: 0; margin: 0; }
            #blah {
                float: left;
                margin-right: 20px;
                width: 100px;
                z-index:1;
                top: 0px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div id="blah">some content</div>
        <div>some more content?</div>
    </body>
</html>

Maar dit wordt in zowel Firefox als in IE6 hetzelfde gerenderd bij mij??

Daarnaast keur ik het gebruik van Conditional Comments niet af, maar worden ze naar mijn idee wel te vaak ingezet!

[curry684]

Er zijn genoeg margin bugs bekend van IE6. Daarnaast ook nog non-bugs, zoals de box model problemen in quirks mode. Dat is ook een "IE6 margin probleem" zuiver op de korrel

[Borizz]

curry684 schreef op zaterdag 10 mei 2008 @ 13:41:
Er zijn genoeg margin bugs bekend van IE6. Daarnaast ook nog non-bugs, zoals de box model problemen in quirks mode. Dat is ook een "IE6 margin probleem" zuiver op de korrel

En wat wil je daarmee zeggen, dat er bugs zijn is mij ook wel bekend. Maar over welke (potentiele) bug het in de TS gaat is mij onduidelijk. Aangezien er een oplossing voor de betreffende bug wordt gegeven is het wel handig om te weten om welke bug het gaat, nietwaar?

[curry684]

Borizz schreef op zaterdag 10 mei 2008 @ 19:34:
[...]

En wat wil je daarmee zeggen, dat er bugs zijn is mij ook wel bekend. Maar over welke (potentiele) bug het in de TS gaat is mij onduidelijk.

Ik viel je enkel bij dat er in IE6 zo hopeloos veel margin bugs zitten dat ik ook geen idee heb welke hij nu op revolutionaire wijze heeft opgelost

[Borizz]

curry684 schreef op zondag 11 mei 2008 @ 01:23:
[...]

Ik viel je enkel bij dat er in IE6 zo hopeloos veel margin bugs zitten dat ik ook geen idee heb welke hij nu op revolutionaire wijze heeft opgelost

Oké dan dat had ik even verkeerd begrepen!