Layoutverschillen in IE en Firefox...

[Heaget]

Jajaja het is weer problemen-maandag bij Heaget op het werk hoor... De website is nu zo goed als klaar, maar nu komt het grootste probleem om de hoek zetten, het verschil in browsers. Ik gebruik altijd Firefox, werkt altijd prima, geen klachten over. Site ziet er in FF ook prima uit. Open ik hem in IE6.. Nouja, see for yourself..



Ongelofelijk.. heel de layout naar z'n grootje en hij laat zelfs componenten zien die er niet eens horen te zijn... Heb ik uren werk in die layout gestoken om het goed te krijgen krijg je dit gezeik, en dit stijgt me echt boven m'n pet...

Het lompe van het hele verhaal is, in IE8 werkt het prima, maar daar neemt m'n baas geen genoegen mee...

Als iemand suggesties heeft, of een goed verhaal om te vertellen dat niemand IE6 nog gebruikt, alles is welkom!

-Heaget

[Matis]

alhoewel ik zonder broncode niet veel kan, lijkt het op een paddingprobleem. Naar het schijnt lopen de header, zoeken en wss ook de sprites van het menu een x-aantal pixels te veel naar rechts.

[Heaget]

Oke, padding had ik ook al aan gedacht, maar als ik die verander dan zou het in FF toch weer fout gaan? Ik ga even de broncode erbij pakken.

*brb

[Sebazzz]

Conditional comments FTW in dat geval. Check ook:
- Heb je een doctype, en valideert je pagina (ja, dit maakt verschil)
- Gebruik je geen CSS features die IE6 zowieso niet aankan

[Heaget]

Sebazzz schreef op maandag 26 oktober 2009 @ 12:48:
Conditional comments FTW in dat geval. Check ook:
- Heb je een doctype, en valideert je pagina (ja, dit maakt verschil)
- Gebruik je geen CSS features die IE6 zowieso niet aankan

Oke, en nu in het nederlands...

Conditional comments?

doctype?

En tja, de hele layout hangt van .CSS bestanden in elkaar.... Als ik bijv de positie aanpas van de seatch module dan komt 'ie in IE wel goed, maar dan staat hij in FF weer verkeerd....

Hier de broncode van de layout.css

Cascading Stylesheet:

/* Copyright (C) 2007 - 2009 YOOtheme GmbH */

/* we gaan dus niet meer dan 200 regels code neerkwakken ;) */
 
}

[ Voor 81% gewijzigd door BtM909 op 27-10-2009 00:32 ]

[Sebazzz]

Het is niet de bedoeling om in een topic een heel stuk code neer te plempen, plak het dan op pastebin en consorten
En naar doctype en conditional comments kan je gewoon zoeken, trouwens je hebt een hele website gemaakt en je weet niet eens van zoiets basic als een doctype is?

[Matis]

Ik zie ook al iets

Cascading Stylesheet:

/* Copyright (C) 2007 - 2009 YOOtheme GmbH */

Misschien moet je hen even emailen

Verder zijn kreten die Sebazzz lost toch wel heel basaal als het over webdevelopment gaat.

[ Voor 26% gewijzigd door Matis op 26-10-2009 12:58 ]

[Heaget]

Hehe, leuk verhaal, ik ben aangenomen als cameraman, maar iemand moest die website maken.. Dus, lootjes getrokken en ik was de lul.. Ik weet net zoveel van websites maken als jij van een space-shuttle ( wss )... Dit is gewoon een standaard Joomla layout die we hebben aangekocht, ik kan daarin de CSS wel veranderen hoor, ik ben niet helemaal achterlijk, gewoon veel dingen proberen en dan lukt het wel. Maar zulke problemen daar weet ik gewoon geen raad mee, ik ga wel googlen op de termen die jij geeft, misschien kom ik er dan wat verder mee....

[crisp]

Heaget schreef op maandag 26 oktober 2009 @ 12:51:
[...]


Oke, en nu in het nederlands...

Conditional comments?

doctype?

En tja, de hele layout hangt van .CSS bestanden in elkaar.... Als ik bijv de positie aanpas van de seatch module dan komt 'ie in IE wel goed, maar dan staat hij in FF weer verkeerd....

Frontend webdevelopment is niet voor niets een vak. Ik snap niet waarom jouw baas je een website laat ontwikkelen als je blijkbaar geen kaas gegeten hebt van de materie...

Je hebt ook een nogal 'creatieve' manier van positioneren moet ik zeggen...

[johnkeates]

De CSS is ook niet erg zelfgeschreven denk ik.. Kan je wel CSS?

[dvdheiden]

Met behulp van Conditional comments (gooi maar eens in Google) kan je bijvoorbeeld een aparte stylesheet voor IE6 laden zodat het in Firefox niet direct verracht wordt.

Bijv.:

code:

<!--[if IE 6]>
...
<![endif]-->

Zie: http://www.quirksmode.org/css/condcom.html

Doctype wil eigenlijk zeggen hoe je browser de gegeven html moet interpreteren. zie: http://www.w3schools.com/tags/tag_DOCTYPE.asp

[ Voor 21% gewijzigd door dvdheiden op 26-10-2009 13:07 ]

[Matis]

johnkeates schreef op maandag 26 oktober 2009 @ 12:59:
De CSS is ook niet erg zelfgeschreven denk ik.. Kan je wel CSS?

Matis schreef op maandag 26 oktober 2009 @ 12:57:

Cascading Stylesheet:

/* Copyright (C) 2007 - 2009 YOOtheme GmbH */

Het is sws Joomla met een standaard template. Daarvoor hoef je dus geen CSS te kunnen om websites te maken, maar een template aanpassen doe je niet 1, 2, 3 ...

[Heaget]

crisp schreef op maandag 26 oktober 2009 @ 12:58:
[...]

Frontend webdevelopment is niet voor niets een vak. Ik snap niet waarom jouw baas je een website laat ontwikkelen als je blijkbaar geen kaas gegeten hebt van de materie...

Je hebt ook een nogal 'creatieve' manier van positioneren moet ik zeggen...

Werk is werk, kan moeilijk zeggen dat ik het niet doe en me baan verliezen...

johnkeates schreef op maandag 26 oktober 2009 @ 12:59:
De CSS is ook niet erg zelfgeschreven denk ik.. Kan je wel CSS?

Nee, ik kan geen CSS, maar zoals gezegd, ik ben niet zo dom dat ik niet begrijp wat er staat, en hoe ik het kan manipuleren.

HackZois schreef op maandag 26 oktober 2009 @ 13:02:
Met behulp van Conditional comments (gooi maar eens in Google) kan je bijvoorbeeld een aparte stylesheet voor IE6 laden zodat het in Firefox niet direct verracht wordt.

Bijv.:

code:

<!--[if IE 6]>
...
<![endif]-->

Zie: http://www.quirksmode.org/css/condcom.html

Doctype wil eigenlijk zeggen hoe je browser de gegeven html moet interpreteren. zie: http://www.w3schools.com/tags/tag_DOCTYPE.asp

Gaan we daar eens verder mee...

[dvdheiden]

De w3schools site is sowieso een goede bron voor je als je begint met CSS/HTML, je kan er veel opzoeken en veelal zitten er duidelijke voorbeelden bij.

[mace]

Die verplichte IE6 ondersteuning vind ik tegenwoordig onzin. Het moet maar eens afgelopen zijn verdorie.

[Heaget]

Die conditional comments zijn leuk, maar schijnbaar werkt het alleen in HTML, jammer want de hele site is gebaseerd op CSS met een klein stukje HTML...

mace schreef op maandag 26 oktober 2009 @ 13:16:
Die verplichte IE6 ondersteuning vind ik tegenwoordig onzin. Het moet maar eens afgelopen zijn verdorie.

Ja mijn idee, zijn er nog zoveel mensen die dat gebruiken dan?

[ Voor 48% gewijzigd door Heaget op 26-10-2009 13:17 ]

[dvdheiden]

Uhm... met die conditional comments kan je toch een aparte stylesheet laden die bijvoorbeeld speciaal op IE 6 gericht is?

Bijvoorbeeld:

code:

<!--[if IE 6]>
<link rel="stylesheet" href="styleie6.css" type="text/css" media="screen">
<![endif]-->

Dan kan je in die styleie6.css file alles aanpassen voor een correcte ie6 layout.

[Finder]

In Joomla kan je gewoon conditional comments gebruiken in je template. Maar als ik zo je reacties & code lees, lijkt het me inderdaad zo dat je te weinig ervaring met PHP/HTML/CSS hebt, dat is niet erg, maar besef dat het dan wel een hele moeilijke opdracht voor je wordt.

[Heaget]

HackZois schreef op maandag 26 oktober 2009 @ 13:18:
Uhm... met die conditional comments kan je toch een aparte stylesheet laden die bijvoorbeeld speciaal op IE 6 gericht is?

Bijvoorbeeld:

code:

<!--[if IE 6]>
<link rel="stylesheet" href="styleie6.css" type="text/css" media="screen">
<![endif]-->

Dan kan je in die styleie6.css file alles aanpassen voor een correcte ie6 layout.

Oke, als ik het goed begrijp kan ik dus gewoon in deze directory ( /home/nfgd.nl/public_html/templates/yoo_phoenix/css ) een nieuw .css bestand zetten. Die noem ik dan "styleie6.css" Dat bestand word dan gewoon een kopie van de layout.css die er al staat, maar dan aangepast voor IE6. Met de code die jij geeft zou hij dan, als je de website benaderd in IE6, doorlinken naar dat bestand. Benader je de website in bijv. FF zou hij gewoon de normale layout.css "uitlezen". Ik begreep namelijk dat alleen IE die conditional comments uitleest, andere browsers slaan die regel over.

Finder schreef op maandag 26 oktober 2009 @ 13:23:
In Joomla kan je gewoon conditional comments gebruiken in je template. Maar als ik zo je reacties & code lees, lijkt het me inderdaad zo dat je te weinig ervaring met PHP/HTML/CSS hebt, dat is niet erg, maar besef dat het dan wel een hele moeilijke opdracht voor je wordt.

Ik ga het proberen, tot dusver is het al een lastige klus voor me want ik ben eraan begonnen met 0,0 ervaring, dus ik ben al een aardig eind gekomen. Met de oplossing hierboven denk ik dat het wel kan lukken als mijn beredenering dan ook klopt.

[Sebazzz]

Finder schreef op maandag 26 oktober 2009 @ 13:23:
In Joomla kan je gewoon conditional comments gebruiken in je template. Maar als ik zo je reacties & code lees, lijkt het me inderdaad zo dat je te weinig ervaring met PHP/HTML/CSS hebt, dat is niet erg, maar besef dat het dan wel een hele moeilijke opdracht voor je wordt.

Nouja, moeilijk. Je ziet dat ie het eindproduct heeft, het werkt ook in IE6 maar dan weer niet in Firefox. Dus hij hoeft alleen de wijzigingen voor IE6 in een aparte stylesheet plempen en klaar

Heaget schreef op maandag 26 oktober 2009 @ 13:36:
[...]
Benader je de website in bijv. FF zou hij gewoon de normale layout.css "uitlezen". Ik begreep namelijk dat alleen IE die conditional comments uitleest, andere browsers slaan die regel over.

Dat klopt, maar IE leest alsnog de reguliere stylesheet uit hoor. Je kan inderdaad de stylesheet kopieren, maar het is imo netter om in je IE6 stylesheet de originele te manipuleren.

[ Voor 30% gewijzigd door Sebazzz op 26-10-2009 13:43 ]

[dvdheiden]

Dat klopt inderdaad! Ben het wel eens met Sebazzz, blijf je reguliere stylesheet gewoon laden en zet in die styleie6.css alleen de css code die nodig is om de layout "te herstellen" voor ie6. Je kan dus dubbele declaraties krijgen zoals:

normale.css

code:

#idnaamvaniets {
padding-left: 4em;
...nog meer css...
}

En dan in de specifieke ie6 style:

code:

#idnaamvaniets {
padding: 0;
}

Hier zet je de padding voor ie6 dus naar 0, maar "erf" je wel de rest van de css code van het oorspronkelijke bestand.

[Heaget]

In het "styleie6.css" bestand zou je dus alleen maar de aanpassingen krijgen, en niet een kopie met manipulaties?

[dvdheiden]

Alleen datgene wat afwijkt t.o.v. het oorsponkelijke bestand. Dus zoals in mijn voorbeeld de padding.

Immers als je een achtergrond kleur blauw maakt in je oorspronkelijk bestand, zal die in ie6 niet ineens geel zijn en is het dus overbodig dat opnieuw aan te geven.

[jbdeiman]

@heaget
Beide is mogelijk, maar hij laadt sowieso beide stylesheets in in IE6 dan, of je dat moet willen en dan maar een dubbele stylesheet kan je over discusieren, maar feit blijft dat een bezoeker dan meer binnenhaalt dan nodig.

Ik zou dus alleen die aanpassingen voor IE6 in de losse stylesheet plaatsen. Dat is volgens mij de beste oplossing.

[Heaget]

jbdeiman schreef op maandag 26 oktober 2009 @ 14:11:
@heaget
Beide is mogelijk, maar hij laadt sowieso beide stylesheets in in IE6 dan, of je dat moet willen en dan maar een dubbele stylesheet kan je over discusieren, maar feit blijft dat een bezoeker dan meer binnenhaalt dan nodig.

Ik zou dus alleen die aanpassingen voor IE6 in de losse stylesheet plaatsen. Dat is volgens mij de beste oplossing.

goed, alleen de aanpassingen dus.

---

En dit:

code:

<!--[if IE 6]>
<link rel="stylesheet" href="styleie6.css" type="text/css" media="screen">
<![endif]-->

komt dus helemaal bovenaan in je HTML bestand, want ik neem aan dat dat het eerste is wat hij uitleest bij het benaderen van je website?

[ Voor 48% gewijzigd door Heaget op 26-10-2009 14:12 ]

[dvdheiden]

Moet tussen de head-tags van je html komen te staan.

Dus:

HTML:

<html>
<head>
<title>...</title>
...hier je code...
</head>
<body>
...hier staat alle html voor vormgeving en tekst voor weergave, etc...
</body>
<html>

Edit: zie flowmo's opmerking hieronder over de positie!

[ Voor 76% gewijzigd door dvdheiden op 26-10-2009 14:16 ]

[Flowmo]

Die 3 regels code gaan tussen <head> en </head>, NADAT je "gewone" stylesheet geladen wordt.

[ Voor 31% gewijzigd door Flowmo op 26-10-2009 14:16 ]

[Heaget]

oke, dat ga ik dan eerst aanpassen, dan is het gelijk zichtbaar in IE6 en weet ik ook weer waar ik mee bezig ben

[Heaget]

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
<link rel="apple-touch-icon" href="<?php echo $template->url ?>/apple_touch_icon.png" />
<!--[if IE 6]>
<link rel="stylesheet" href="styleie6.css" type="text/css" media="screen">
<![endif]-->
</head>

zo staat het goed toch? want er veranderd echt helemaal niks, wat ik ook doe...

[Matis]

je href verwijst niet naar je template folder

[Heaget]

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
<link rel="apple-touch-icon" href="<?php echo $template->url ?>/apple_touch_icon.png" />
<!--[if IE 6]>
<link rel="stylesheet" href="/home/nfgd.nl/public_html/templates/yoo_phoenix/css/styleie6.css" type="text/css" media="screen">
<![endif]-->
</head>

Zo zou het dus moeten zijn?

[Matis]

code:

href="<?php echo $template->url ?>/yoo_phoenix/css/styleie6.css"

oid, ik heb geen glazen bol, dus ik kan je ook niet echt helpen zonder meer *inzage*

[Heaget]

Wat voor inzage zou je nodg hebben? Dit werkte namelijk ook niet...

[truegrit]

Kan je niet een paar euros neerlappen voor iemand die hier wel ervaring mee heeft? Scheelt jou veel moeite, je baas veel tijd en een willekeurige html/css developer verdient weer een leuk zakcentje hiermee.

[Peetz0r]

Staat je site al ergens online?

Maar een goed anti-IE6-verhaal zou moeten zijn:
Iedereen die windows xp of nieuwer heeft zou automatisch via updates IE8 moeten hebben. Er zijn mensen die de updates weigeren, maar die moet je (meestal) uit de buurt van een computer houden.

Ik ondersteun ook alleen browsers die gebaseerd zijn op stabiele versies van trident/gecko/webkit/presto van minder dan een jaar oud. Als het in iets anders werkt is dat puur toeval.

[Heaget]

P.E.T.E.R. schreef op maandag 26 oktober 2009 @ 16:23:
Staat je site al ergens online?

Maar een goed anti-IE6-verhaal zou moeten zijn:
Iedereen die windows xp of nieuwer heeft zou automatisch via updates IE8 moeten hebben. Er zijn mensen die de updates weigeren, maar die moet je (meestal) uit de buurt van een computer houden.

Ik ondersteun ook alleen browsers die gebaseerd zijn op stabiele versies van trident/gecko/webkit/presto van minder dan een jaar oud. Als het in iets anders werkt is dat puur toeval.

In IE8 is er ook helemaal niks aan de hand, daar werkt hij perfect, in IE7 zitten een paar kleine bugs. Hij komt net langs dat als het in IE7 werkt het oke is ( thank god ). Ik ben er nu even klaar mee, morgen dus wat kleine aanpassingen en dan zou het moeten werken.

Hier kun je hem vinden overigens:

http://nfgd.nl.server45.firstfind.nl/

[ Voor 4% gewijzigd door Heaget op 26-10-2009 16:33 ]

[Cartman!]

P.E.T.E.R. schreef op maandag 26 oktober 2009 @ 16:23:
Maar een goed anti-IE6-verhaal zou moeten zijn:
Iedereen die windows xp of nieuwer heeft zou automatisch via updates IE8 moeten hebben. Er zijn mensen die de updates weigeren, maar die moet je (meestal) uit de buurt van een computer houden.

Ik ondersteun ook alleen browsers die gebaseerd zijn op stabiele versies van trident/gecko/webkit/presto van minder dan een jaar oud. Als het in iets anders werkt is dat puur toeval.

No offence, maar zo werkt het niet in het echte bedrijfsleven natuurlijk

Aan de TS: ga eerst eens inlezen in de materie ipv. willekeurig aanrotzooien. crisp zei t al: dit is gewoon een vak en niet iedereen kan dat. Wat niet erg is want m'n baas moet mij ook niet vragen om even een nieuwe badkamer aan te leggen. Ik ben benieuwd wat je baas je morgen weer laat doen nu

[Peetz0r]

Hij ziet er erg mooi uit, en werkt probleemloos in Opera 10.00 op Linux!
Ik zou wel alleen de achtergrond horizontaal centreren, dan komen het begin en einde van de kabeltjes beter uit.

Dus:

Cascading Stylesheet: http://nfgd.nl.server45.firstfind.nl/templates/yoo_phoenix/css/variations/combsblue.css

body.yoopage { background: #1E2731 url(../../images/variations/combsblue/page_bg.png) 0 0 repeat-x scroll; }

wordt

Cascading Stylesheet: http://nfgd.nl.server45.firstfind.nl/templates/yoo_phoenix/css/variations/combsblue.css

body.yoopage { background: #1E2731 url(../../images/variations/combsblue/page_bg.png) center 0 repeat-x scroll; }

Of nog beter leesbaarder, maar langer:

Cascading Stylesheet: http://nfgd.nl.server45.firstfind.nl/templates/yoo_phoenix/css/variations/combsblue.css

body.yoopage {
  background-attachment: scroll;
  background-repeat: repeat-x;
  background-position: center 0px;
  background-color: #1e2731;
  background-image: url("http://nfgd.nl.server45.firstfind.nl/templates/yoo_phoenix/images/variations/combsblue/page_bg.png");
}

offtopic:
Dit commentaar is mede mogelijk gemaakt door Opera Dragonfly: FireBug maar dan beter! ^{(smaken verschillen)}

[Sebazzz]

Wat overigens aan te raden is, is om een virtuele machine te nemen waar je XP op zet en dan kan je daar Firefox 2, Opera, Safari, IE6 en een aantal mobiele device emulators op zetten. Kan je makkelijk je website testen in de meestgebruikte browsers, en zeker met de intergratiefuncties van Windows 7, kan je vanuit je normale startmenu iedere browser starten. Doe ik ook en het werkt prima, IE7/IE8 en Firefox 3 op me echte installatie, en de rest virtueel.