[CSS] FF + IE 7.0 + IE 6.0 Fix - Softwareontwikkeling

maandag 17 december 2007 18:29

Acties:

Verwijderd

Topicstarter

Beste tweakers,

Ik zit momenteel met een probleem. Ik heb laatst een site gebouwd en deze heb ik meerdere malen getest in FF en IE 7.0. Uiteindelijk alles werkend gekregen en wat blijkt nu, nu werkt de site niet goed in IE 6.0... het probleem zit hem in de 'margin'. Op een of andere manier is 10px margin aan de zijkant in IE 6.0 2x zoveel als in IE 7.0.

Ik ben dus op zoek naar een oplossing om IE 6.0 te fixen, want in IE 7.0 doet de site het gewoon goed. Ik ben gaan surfen op internet en vond een aantal handige pagina's waaronder deze:
http://www.html-site.nl/css_browser_hacks.php

Hier staan hacks voor verschillende browsers EN IE versies. Momenteel heb ik deze code:

Cascading Stylesheet:

* html                              /*IE 6.0 en ouder fix*/
#content_lc
{
    margin:         20px 0px 0px 10px;      /*top, right, bottom, left*/
}
#content_lc
{
    float:          left;
    width:          603px;
    margin:         20px 0px 0px 20px;      /*top, right, bottom, left*/
}

Op de site staat vermeld dat alleen IE 6.0 en lager * html pakt. IE 7.0 en FF zouden dit over moeten slaan. Nou niet dus, IE 7.0 neemt ook die margin over dus zo is die in IE 6.0 wel goed maar in IE 7.0 weer niet!

Wie o wie heeft een oplossing voor mij want ik wordt er een beetje gek van! Hoe zorg ik ervoor dat alleen IE 6.0 wat overneemt en niet IE 7.0?

Met vriendelijke groeten,
Johan

maandag 17 december 2007 18:31

Acties:

Sebazzz

3dp

Zoek eens op conditional comments

Niet zo netjes, maar als het werkt...

edit:
Het is niet zo netjes maar altijd nog 10x beter dan die ranzige css en (vooral) javascript hacks

[ Voor 42% gewijzigd door Sebazzz op 17-12-2007 18:48 ]

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

maandag 17 december 2007 18:38

Acties:

Mad Marty

Je bent slimmer als je denkt!

Zorg uiteraard ook dat je je doctype goed hebt staan

Rail Away!

maandag 17 december 2007 19:01

Acties:

Verwijderd

Topicstarter

@ Sebazzz
Ik heb er naar gezocht maar het komt er volgens mij dus op neer dat ik query's moet gaan gebruiken en aangezien ik alle CSS gescheiden heb van mijn HTML bestand kan ik niet zomaar de tags

code:

1	!--[if IE]>

in mijn CSS bestand knallen. Als ik het mis heb please zeg het

@ Mad Marty
Ik gebruikt (volgens mij) de meeste gebruikte doctype namelijk:

code:

1 2	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

zou hier het probleem in kunnen zitten dan? Lijkt mij niet

maandag 17 december 2007 19:04

Acties:

Sebazzz

3dp

Verwijderd schreef op maandag 17 december 2007 @ 19:01:
@ Sebazzz: Als ik het mis heb please zeg het

Je hebt het mis.

Heb je al eens over meerdere stylesheets gedacht voor verschillende browsers?

Of één 'hoofd' stylesheet en dan voor Ie 6 en 7 conditionele comments aanbrengen waarin bepaalde stylesheets geladen worden die dingen voor IE6 of 7 ongedaan maakt/aanpast?

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

maandag 17 december 2007 19:09

Acties:

Stephan11117

Je margins collapsen! Als je ook padding kan gebruiken -> doen!

maandag 17 december 2007 19:18

Acties:

Plague

Verwijderd schreef op maandag 17 december 2007 @ 19:01:
@ Sebazzz
Ik heb er naar gezocht maar het komt er volgens mij dus op neer dat ik query's moet gaan gebruiken en aangezien ik alle CSS gescheiden heb van mijn HTML bestand kan ik niet zomaar de tags
code:
1
!--[if IE]>
in mijn CSS bestand knallen. Als ik het mis heb please zeg het

@ Mad Marty
Ik gebruikt (volgens mij) de meeste gebruikte doctype namelijk:
code:
1
2
<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD HTML 4.01 Transitional//EN">
zou hier het probleem in kunnen zitten dan? Lijkt mij niet

Transitional heet niet voor niets transitional. Een nieuw te ontwikkelen website zou ik in HTML Strict of XHTML strict maken. Dat zou ik niet alleen doen, dat doet bijna iedereen. Strict is een stuk voorspelbaarder cross-browser.

Probeer eerst dat eens (en ga daarna eerst opnieuw bug-fixen, want de verschillen tussen Strict en Transitional zijn vrij groot). Echter ga je met Strict zoooo veel van dit soort problemen in de toekomst vermijden. Daarnaast zijn bijna alle oplossingen voor dit soort problemen allemaal beschreven in Strict en niet in Transitional.

Hier wil ik trouwens aan toevoegen dat hacks voor verschillende browsers echt alleen in zeer uitzonderlijke gevallen nodig zijn, en wanneer je ze gebruikt, is het echt heel ranzig. Het is simelweg niet te onderhouden, omdat je in de toekomst altijd in 180 verschillende browsers zal moeten blijven testen. Ik test zelf altijd in 4 browsers, en meer ga ik er ook echt niet ondersteunen. (FF, IE6+7 en Safari voor de Mac users).
IE7 is een stuk beter geworden wat betreft vergelijkbaarheid met FF, maar IE6 is echt nog een klein rampje. Ik zeg altijd maar: een webdeveloper is de helft van zijn tijd kwijt aan het cross-browser compatible maken van een site.

[ Voor 21% gewijzigd door Plague op 17-12-2007 19:23 ]

maandag 17 december 2007 19:31

Acties:

Sebazzz

3dp

Plus dat strict je dwingt netjes te coden (of wat is het) aangezien strict ook echt eisen stelt.

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

maandag 17 december 2007 19:37

Acties:

Verwijderd

Topicstarter

Bedankt allemaal voor jullie reacties! Ik heb de raad van 'SynchroSteve' opgevolgd en dit ervan gemaakt:

Cascading Stylesheet:

#content_lc
{
    float:          left;
    width:          603px;
    margin:         20px 0px 0px 20px;      /*top, right, bottom, left*/
}
* html
#content_lc
{
    margin:         20px 0px 0px 0px;       /*top, right, bottom, left*/
    padding:        0px 0px 0px 20px;       /*top, right, bottom, left*/
}

IE 6.0 f0ckt margin helemaal op maar padding doet hij goed dus het probleem is verholpen!

@Sebazzz: Ok klinkt goed alleen hou ik liever gewoon 1 centrale CSS.. daarnaast doet iemand anders de php code dus.. dan wordt het voor mij te ingewikkeld. Maar evengoed bedankt!

@Plague: Bedankt voor de tip. Ik weet het, ik hou ook niet van hacks maar IE is nou eenmaal heel ranzig

Ik ga me binnenkort wel verdiepen in de doctype Strict en kijken hoe en waar ik dat kan toepassen. Verder bedankt voor de moeite

Slotje $_/-\o_$

maandag 17 december 2007 20:44

Acties:

Boelie-Boelie

Verwijderd schreef op maandag 17 december 2007 @ 19:01:
Ik gebruikt (volgens mij) de meeste gebruikte doctype namelijk:
code:
1
2
<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD HTML 4.01 Transitional//EN">
zou hier het probleem in kunnen zitten dan? Lijkt mij niet

Lijkt me wel. Dit is geen valide doctype. Op jouw manier wordt je site weergegeven op een manier waarmee je wisselvallige resultaten krijgt. En dat heb je gemerkt.
Gebruik je een valide doctype (dat kan ook transitional zijn), dan werkt IE grotendeels volgens de regels en daarmee ongeveer zoals moderne browsers. De problemen die daarna nog opdoemen, zijn allemaal goed gedocumenteerd en goed op te lossen; zoals je nu werkt, kan het in elke browser eigenlijk alle kanten op. Het is daarom niet aan te raden op de huidige manier verder te werken.

Verder valt er nix te verdiepen in strict doctypes; bij een nieuwe site gebruik je per definitie een strict doctype. Transitional is voor een transition van oude naar nieuwe code.

Misschien handige achtergrondinfo wat het nut is van een doctype en hoe je een doctype kiest.

Cogito ergo dubito

maandag 17 december 2007 22:16

Acties:

crisp

Devver

Pixelated

Plague schreef op maandag 17 december 2007 @ 19:18:
[...]

Transitional heet niet voor niets transitional. Een nieuw te ontwikkelen website zou ik in HTML Strict of XHTML strict maken. Dat zou ik niet alleen doen, dat doet bijna iedereen. Strict is een stuk voorspelbaarder cross-browser.

Probeer eerst dat eens (en ga daarna eerst opnieuw bug-fixen, want de verschillen tussen Strict en Transitional zijn vrij groot). Echter ga je met Strict zoooo veel van dit soort problemen in de toekomst vermijden. Daarnaast zijn bijna alle oplossingen voor dit soort problemen allemaal beschreven in Strict en niet in Transitional.

Je haalt Strict/Transitional door de war met de Standards Compliant rendermode vs Quirksmode

Zie ook Boelie-Boelie hier boven mij

Anyway, ik denk dat het hier de double margin bug betreft in IE6, op te lossen door je float ook een display:inline te geven (wordt genegeerd door andere browsers).

Intentionally left blank