[CSS/XHTML] Verschil IE en Firefox

[Verwijderd]

Hallo allemaal, mijn eerste post hier (ik hoop dat deze aan de eisen voldoet hier )

Ik ben bezig met een site voor een vriend van mij, die een site nodig heeft waar hij zijn muziek kan laten horen, en waar informatie over optredens en dergelijke te vinden is. Heel simpel zou je zeggen.. Ik heb de site ontworpen in Photoshop, stukken eruit geslicet en daarna opgebouwd met XHTML en CSS. Echter, nou ziet de site er heel anders uit in Firefox dan in IE7 (Ik heb vanuit Firefox gebouwd, omdat dat mijn standaard browser is, maar nu blijkt het toch makkelijker geweest om de site eerst in IE te checken. De layout klopt totaal niet meer in IE7, terwijl het er in FF prima uitziet.

Ik heb even een testversie hier geupload, het is nog niet af, maar het was meer om de layout te testen.

Kan iemand me uitleggen wat ik verkeerd doe? (Ik ben nog maar een klein half jaar hier mee bezig, dus reken me aub niet te hard af )

mvg
Thomas

[curry684]

De enige verschillen die ik zo snel zie zijn een paar kleine margin-gevalletjes: deze kun je vaak herstellen door elementen op dezelfde regel te zetten in je source zonder spaties, commentaar of newlines ertussen, IE6/7 (en ook FF trouwens) hebben in sporadische gevallen nog wel eens de neiging om extraneous whitespace wel 'te layouten' waardoor je vervolgens een paar pixels 'spatiehoogte' verschil krijgt.

Los daarvan: table ditchen in de linkersectie, en voor SEO zorgen dat die 2 sidebarimages ook in cleartext in de pagina staan natuurlijk. En vanuit designoogpunt: breng er eens kleur in, dit is saai en onaantrekkelijk. Zoek een contrastkleur en gebruik die voor accenten om je design wat spannender te maken

[curry684]

Wat toevoeging nu ik wat verder heb geneusd: ik vind je core layout ook wat 'curieus' in elkaar zitten. Ik zou de headerbalk (nog geen 200 pixels hoog of zo) horizontaal repeaten op de body en vervolgens een background-color erbij zetten (je bent nu niet bestand tegen meer dan 1600px content verticaal). Daarna een root-div aanmaken met margin:42px auto 0 auto;, dan zit je header-div namelijk per definitie op de goede plaats en zal je ook dit IE probleem al direct kwijt zijn. Vervolgens kun je binnen je content naar keuze met floats of absolute positioning werken voor de sidebar, waarbij ik je nu al kan vertellen dat floats je op termijn minder koppijn gaan geven doordat je dynamische sidebartrackers wil gaan hebben.

[f.v.b]

Met een margin: 8px op de body schuift de header ook in IE netjes op zijn plek.

[curry684]

f.v.b schreef op maandag 04 februari 2008 @ 08:40:
Met een margin: 8px op de body schuift de header ook in IE netjes op zijn plek.

Dan bestrijd je echter alleen een symptoom, geen oorzaak.

[Verwijderd]

Dankjewel voor jullie reacties, hier kan zeker wat mee!

Edit:

Nog even wat vraagjes:

- Hoe kan ik het beter in delen, ipv met die table?
- Zijn er ergens tutorials te vinden, waarmee ik wat over dingen als float kan leren?

[ Voor 61% gewijzigd door Verwijderd op 04-02-2008 18:58 ]

[Duroth]

Verwijderd schreef op maandag 04 februari 2008 @ 18:43:
Dankjewel voor jullie reacties, hier kan zeker wat mee!

Edit:

Nog even wat vraagjes:

- Hoe kan ik het beter in delen, ipv met die table?
- Zijn er ergens tutorials te vinden, waarmee ik wat over dingen als float kan leren?

In plaats van Tables kan je DIV elementen gebruiken, maar als beginner (niet negatief bedoeld natuurlijk! ) kan je imo beter de lay-out in tabellen afmaken. Wanneer deze staat, en werkt, is het een leuk experiment om te proberen de lay-out na te maken zonder tables, dus door <div> elementen te stijlen.

W3C heeft zeker wat goede tutorials aan boord, op www.w3c.org. Daarnaast is via google ook erg veel te vinden. Zoveel, dat het eigenlijk weinig zin heeft om hier zomaar wat linkjes neer te gooien

[Verwijderd]

Duroth schreef op maandag 04 februari 2008 @ 19:43:
[...]


In plaats van Tables kan je DIV elementen gebruiken, maar als beginner (niet negatief bedoeld natuurlijk! ) kan je imo beter de lay-out in tabellen afmaken. Wanneer deze staat, en werkt, is het een leuk experiment om te proberen de lay-out na te maken zonder tables, dus door <div> elementen te stijlen.

W3C heeft zeker wat goede tutorials aan boord, op www.w3c.org. Daarnaast is via google ook erg veel te vinden. Zoveel, dat het eigenlijk weinig zin heeft om hier zomaar wat linkjes neer te gooien

Okee Ik zal er even naar kijken, maar als je DIVS gebruikt, is de site later wel veel makkelijker aan te passen natuurlijk.

[Duroth]

Verwijderd schreef op maandag 04 februari 2008 @ 19:45:
[...]
Okee Ik zal er even naar kijken, maar als je DIVS gebruikt, is de site later wel veel makkelijker aan te passen natuurlijk.

Dat uiteraard. Maar omdat DIV-s icm. CSS nog wat haken en ogen kennen, die meestal op IE terug te voeren zijn, kan het handig zijn de lay-out eerst in tabellen uit te werken. Daarna stap je over op DIV's, en zo leer je meteen goed waar je naar moet kijken. Als je jezelf daarentegen meteen in het diepe gooit, heb je kans dat je te pletter valt

[Verwijderd]

Duroth schreef op maandag 04 februari 2008 @ 19:52:

Dat uiteraard. Maar omdat DIV-s icm. CSS nog wat haken en ogen kennen, die meestal op IE terug te voeren zijn, kan het handig zijn de lay-out eerst in tabellen uit te werken. Daarna stap je over op DIV's, en zo leer je meteen goed waar je naar moet kijken. Als je jezelf daarentegen meteen in het diepe gooit, heb je kans dat je te pletter valt

Dat is echt enorme onzin. De grootste valkuil die je kunt tegenkomen is het "in hokjes denken". Mensen plaatsen dan overal HTML elementen omdat er in het ontwerp iets op een bepaalde plaats staat, en dan moet er dus een div ergens komen. Dat is verkeerd gedacht. De meeste layouts kun je met een paar achtergrondafbeeldingen voor elkaar krijgen, en achtergrondafbeeldingen kunnen onder diverse onderdelen van een site doorlopen. In tabelcellen kan dat niet altijd. Je moet écht een totaal andere benadering hebben dan in tabellen te denken.

[Verwijderd]

Ik heb dus alles geprobeerd, dus ook dingen als margin:42px auto 0 auto, maar ik krijg em maar niet goed in IE

[f.v.b]

curry684 schreef op maandag 04 februari 2008 @ 08:51:
Dan bestrijd je echter alleen een symptoom, geen oorzaak.

De default margin op de body is in Firefox 8px. In Internet Explorer is dat 15px 10px. Dat is de oorzaak waardoor de plaats van de header in beide browsers niet gelijk is.

Hoe zou je dat anders willen bestrijden dan door die margin in beiden gelijk te trekken? Bij voorkeur natuurlijk door 'm op 0 te zetten, maar 8 is net zo geldig.

Simpele vraag, simpel antwoord. Iemand goed leren CSS-en kan ook, maar dat duurt een paar maanden.

[wortest]

Ik zal hem er maar gewoon bij in dit topic plaatsen;
Bij een website waar ik mee bezig ben laat hij in IE een heel deel compleet blanko.
Firefox en Opera ziet het wel eruit zoals het hoort, behalve dat de footer ook niet meer wil plakken onder de content. Heeft iemand dit eerder gehad of weet hoe dit op te lossen, ik weet redelijk wat af van css maar dit zie ik even niet. Het kan hier bekeken worden:
http://www.wortest.nl/project/soest2002/index.php

[Zakkenwasser]

wortest schreef op maandag 04 februari 2008 @ 23:47:
Ik zal hem er maar gewoon bij in dit topic plaatsen;
Bij een website waar ik mee bezig ben laat hij in IE een heel deel compleet blanko.
Firefox en Opera ziet het wel eruit zoals het hoort, behalve dat de footer ook niet meer wil plakken onder de content. Heeft iemand dit eerder gehad of weet hoe dit op te lossen, ik weet redelijk wat af van css maar dit zie ik even niet. Het kan hier bekeken worden:
http://www.wortest.nl/project/soest2002/index.php

sorry dat ik het zeg, maar je gebruikt wel veel code.

tip: kijk je instellingen na, of alles w3c geschikt is

[wortest]

MrJey schreef op dinsdag 05 februari 2008 @ 00:05:
[...]


sorry dat ik het zeg, maar je gebruikt wel veel code.

tip: kijk je instellingen na, of alles w3c geschikt is

Instellingen heb ik gedaan en het is natuurlijk op meerdere computers zo.
w3c geschikt is het ook en volledig xhtml valid. Verder ook nergens andere errors getest met firefug.

[curry684]

f.v.b schreef op maandag 04 februari 2008 @ 22:04:
[...]

De default margin op de body is in Firefox 8px. In Internet Explorer is dat 15px 10px. Dat is de oorzaak waardoor de plaats van de header in beide browsers niet gelijk is.

Hummm ja toegegeven je bestreed wel een oorzaak Ik ros zelf altijd alle margins op 0, dan heb je dit soort gezeik per definitie niet, maar daar heb ik vorige week al een hooglopende ruzie met crisp over gehad dus zal ik niet meer voorstellen

[curry684]

wortest schreef op maandag 04 februari 2008 @ 23:47:
Ik zal hem er maar gewoon bij in dit topic plaatsen;
Bij een website waar ik mee bezig ben laat hij in IE een heel deel compleet blanko.
Firefox en Opera ziet het wel eruit zoals het hoort, behalve dat de footer ook niet meer wil plakken onder de content.

Uh die footer is de eerste non-absolute positioned element van de hele pagina, dus die kan per definitie alleen linksbovenin verschijnen, daar zit je flow nu eenmaal als je al het andere uit de flow hebt gehaald.

[moozzuzz]

Je website is ook --onnodig-- breder dan het browserscherm (IE6). Curry had al de tip van de position aangehaald :^)

[wortest]

moozzuzz schreef op dinsdag 05 februari 2008 @ 09:03:
Je website is ook --onnodig-- breder dan het browserscherm (IE6). Curry had al de tip van de position aangehaald :^)

Ha dat van die positioning is waar hij dreef op de secondary content maar die heb ik inderdaad net weggehaald, stom. Maar alsnog het mainproblem was dat hele linker gedeelte wat ineens verdwijnt in alle IE's. Weet iemand hoe dit kan komen?

Edit: Dubbele quote weg..

[ Voor 21% gewijzigd door wortest op 05-02-2008 11:50 ]