Code tegen probleem in IE
- Onderwerp starter Johnvans
- Startdatum
- Status
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Hoi John,
De code om alle hobbels in IE7 te verhinderen, is:
Daar gaat IE7 helemaal plat van! 
Of: als ik Haarlemmerolie had uitgevonden met een code om alle IE7 oneffenheden plat te krijgen, zou ik een rijk man zijn!
Maar serieus: er bestaat niet zoiets als "de code om oneffenheden in IE 7.0 te verhelpen":
Als je specifiekere info geeft (of, nog beter, een link naar een pagina waar het mis gaat), dan kan er naar oplossingen voor IE7-bugs gezocht worden (aannemend dat de problemen er niet zijn in andere IE-versies en in andere browsers).
En ook van belang: als je een html-editor hebt die niet helemaal pluis is, kan die ook codes afscheiden waarvan sommige of alle browsers op tilt slaan. What You See Is What You Get? En het was een duur webontwerpprogramma? Zelfs dan steek ik daar mijn hand niet graag voor in het vuur!
Met vriendelijke groet,
CSShunter
De code om alle hobbels in IE7 te verhinderen, is:
HTML:
<!--[if IE 7]>
<style type="text/css">
* { height: 1px; } /* = geef alles een hoogte van 1 pixel */
</style>
<![endif]-->Of: als ik Haarlemmerolie had uitgevonden met een code om alle IE7 oneffenheden plat te krijgen, zou ik een rijk man zijn!
Maar serieus: er bestaat niet zoiets als "de code om oneffenheden in IE 7.0 te verhelpen":
- IE7 heeft verschillende oneffenheden, en die moeten op verschillende manieren worden aangepakt.
- En IE6 en eerder t/m IE8: deze hebben allemaal "oneffenheden", en wel: per versie verschillend. Dat vraagt om méér dan oplossing van IE7 problemen.
- Welk probleem zich voordoet, is afhankelijk van de webpagina in kwestie: hoe die webpagina in elkaar zit. Sommige problemen van IE zijn bekend (en ook de trucs om die problemen te lijf te gaan: zie PIE van "Big John" en compagnons), maar sommige treden ook spontaan op, of blijven eeuwig een mysterie.
- Internet Explorer heeft zich in de historie nogal weinig gelegen laten liggen aan de internationale standaarden, en daar moeten de website-ontwerpers voor boeten. Bij elke versie gaat het gelukkig iets beter, maar dat gaat heel langzaam, en van mij mogen ze bij MS best een paar stapjes overslaan!
Als je specifiekere info geeft (of, nog beter, een link naar een pagina waar het mis gaat), dan kan er naar oplossingen voor IE7-bugs gezocht worden (aannemend dat de problemen er niet zijn in andere IE-versies en in andere browsers).
En ook van belang: als je een html-editor hebt die niet helemaal pluis is, kan die ook codes afscheiden waarvan sommige of alle browsers op tilt slaan. What You See Is What You Get? En het was een duur webontwerpprogramma? Zelfs dan steek ik daar mijn hand niet graag voor in het vuur!
Met vriendelijke groet,
CSShunter
Re:
CSS Hunter...waarom gebruiken alle pc's niet gewoon firefox of safari? Was een stuk makkelijker geweest
Ik reageer nu pas weer omdat ik mijn site heb vernieuwd en vanavond online heb gezet. Het gaat om www.demyse.nl. Het menu staat niet helemaal centraal maar dat kan ik een I7 stylsheet wel rechttrekken. Waar het mij nu om gaat is dat er rechts op de pagina dingen ontbreken, elementen die ik wel heb aangemaakt en in FX ook gewoon terugzie.
rara, what's going on?
Groet
John
CSS Hunter...waarom gebruiken alle pc's niet gewoon firefox of safari? Was een stuk makkelijker geweest
Ik reageer nu pas weer omdat ik mijn site heb vernieuwd en vanavond online heb gezet. Het gaat om www.demyse.nl. Het menu staat niet helemaal centraal maar dat kan ik een I7 stylsheet wel rechttrekken. Waar het mij nu om gaat is dat er rechts op de pagina dingen ontbreken, elementen die ik wel heb aangemaakt en in FX ook gewoon terugzie.
rara, what's going on?
Groet
John
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Ja, dat ging ik me ook steeds meer afvragen, toen ik volgens goed bughunting-principe het probleem probeerde te isoleren, en steeds meer elementen en styles van de pagina ging uitsluiten. Uit eindelijk bleef er niets over behalve het background-img! :shocked:
Wat blijkt? Het plaatje right.jpg kan niet door IE geopend worden: niet in de pagina, en ook niet rechtstreeks, zoals in deze link www.demyse.nl/img/right.jpg.
Iets op de server misschien? Daarom dit bestand gedownload, en lokaal in IE7 proberen te openen. Resultaat: ook niet!
Toen maar eens bekeken met Wordpad. Dat kan natuurlijk geen images openen, maar geeft wel de code met allerlei abracadabra. Maar soms staan daar ook wat leesbare regels tussen, waar je iets uit kunt opmaken.
In dit geval: het bestand right.jpg is gemaakt met Adobe Illustrator (Photoshop), maar meer wijs kon ik er niet uit worden. Kennelijk is er bij het opslaan als jpg iets misgegaan, en is er in het bestand informatie terechtgekomen waar IE niet mee overweg kan. Vreemd, want normaal kan IE gewoon alle jpg-tjes openen.
Toen viel me opeens de bestandsgrootte op: het ding is maar liefst 600kB groot! En dat voor een plaatje van nog geen 200x600px...
Het lijkt wel alsof het een ongecomprimeerd bronbestand (RAW o.i.d.) is i.p.v. een ordentelijke jpg.
Volgende poging. Openen met Paint Shop Pro > dat lukte. Opnieuw opslaan als jpg > dat lukte ook. En nu is ie maar 12kB, dat lijkt er beter op!
Plus geen probleem om 'm te openen in IE:
- Kijk hier (met IE), het is deze myse-right-nw.jpg
Conclusie: geen oneffenheid in IE die platgeslagen moet worden, maar een oneffenheid in Photoshop! Hamer er op van de concurrent PSP, en met 12 kB ipv 600kB een prettig plat bestandje geworden.
Oftewel: even de nieuwe versie er op zetten en draaien maar.
Met vriendelijke groet,
CSShunter
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Hoi John,
Graag gedaan!
Maar het was niet de grootte van de .jpg waar Internet Explorer niet mee overweg kon, maar de wijze van opslaan.
Groetjes
CSShunter
[edit]Hé, dezelfde vraag voor een ander plaatje, met dezelfde oplossing, kwam ook al op 15 augustus 2009 aan de orde (inclusief ook daar mijn term "andere koek"). Waren we zeker alle twee even vergeten.[/edit]
Graag gedaan!
Maar het was niet de grootte van de .jpg waar Internet Explorer niet mee overweg kon, maar de wijze van opslaan.
- Kijk bv. naar deze afbeelding in IE.
Groetjes
CSShunter
[edit]Hé, dezelfde vraag voor een ander plaatje, met dezelfde oplossing, kwam ook al op 15 augustus 2009 aan de orde (inclusief ook daar mijn term "andere koek"). Waren we zeker alle twee even vergeten.
[/edit]
Laatst bewerkt:
Re:
De site draait goed inmiddels, echter weer Explorer. Het lettertype in de div right wordt niet goed (te groot voor het paarse vlak) weergegeven. Ook is er een regel teveel zodat de mailknop verkeerd staat en staat het menu bovenaan niet goed meer.
Ik heb daarom een extern stylesheet aan mijn site gevoegd (style-ie7). Dat ziet er als volgt uit...
<link rel="stylesheet" href="styles/style.css" />
<style type="text/css">
<!--[if IE 7]>
<style type="text/css" media="all">@import "styles/style-ie7.css";</style>
<![endif]-->
<!--[if IE 8]>
<style type="text/css" media="all">@import "styles/style-ie7.css";</style>
<![endif]-->
</style>
</head>
De wijzigingen in stylesheet IE 7 zie ik echter niet terug. Weet je wat ik verkeerd doe?
Groet
John
De site draait goed inmiddels, echter weer Explorer. Het lettertype in de div right wordt niet goed (te groot voor het paarse vlak) weergegeven. Ook is er een regel teveel zodat de mailknop verkeerd staat en staat het menu bovenaan niet goed meer.
Ik heb daarom een extern stylesheet aan mijn site gevoegd (style-ie7). Dat ziet er als volgt uit...
<link rel="stylesheet" href="styles/style.css" />
<style type="text/css">
<!--[if IE 7]>
<style type="text/css" media="all">@import "styles/style-ie7.css";</style>
<![endif]-->
<!--[if IE 8]>
<style type="text/css" media="all">@import "styles/style-ie7.css";</style>
<![endif]-->
</style>
</head>
De wijzigingen in stylesheet IE 7 zie ik echter niet terug. Weet je wat ik verkeerd doe?
Groet
John
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Hoi John,
Ik heb nog eens diep in de ogen van je site gekeken, en ben nu bang dat ik je aan wat werk ga helpen...
Ontwerp & uitvoering
Als het ontwerp van een webpagina (zeg: de css-layout en correcte css-code) in orde is, komt de uitvoering (zeg: de correcte html) om de hoek kijken om de juiste weergave op het scherm te toveren. Om met het laatste te beginnen:
Een check op correcte html kan je doen met de html-validator (en eigenlijk niet pas op het laatst, maar al regelmatig tijdens het ontwerpproces). *) In het geval van de homepage www.demyse.nl is het resultaat van de html-validator, dat er zo'n kleine 30 html-fouten in zitten.
Hoe minder errors, hoe meer kans op een goede vertoning in alle browsers!
Maar 100% zekerheid krijg je niet, want IE is er ook nog...
Voor de css is er ook een prima online tester, de css-validator. We zien dat de css-validator struikelt over regel 12 van de pagina (waardoor ook niet toegekomen kan worden aan testen van verdere stylesheets: "Geen style sheet gevonden". Los getest heeft de standaard style.css ook een foutje).
Wat is er met regel 12 (de regel met de verwijzing naar style-ie7.css!) aan de hand? - En dit is meteen het antwoord op je vraag:
Met regel 12 zelf is niet aan de hand, maar het gevaar was al eerder opgetreden.
Er staat:
De Conditional Comments voor IE horen niet zelf binnen een <style>-tag te staan, en het moet zijn:
Maar hiermee zijn we er jammer genoeg nog niet. Je schrijft:
Want ook in bv. Firefox gaat het niet goed, als je bv. één klikje op Inzoomen geeft om de letters een beetje groter te kunnen zien.
Waarom?
Je hebt geprobeerd alles zo nauwkeurig mogelijk (pixelgewijs) in je styles vast te leggen. En waarschijnlijk ben je daarbij vernaggeld door Dreamwaever of een andere "WYSIWYG" html-editor. Ze zeggen:
Wat ze er niet bij vertellen (want dat verkoopt minder goed) is dat de uitdrukking eigenlijk hoort te zijn:
Zodra één of meer van deze variabelen verandert, KAN het resultaat hetzelfde zijn, maar het HOEFT NIET. Een webpagina bouwen is dus lang niet zo eenvoudig als ze je graag willen laten geloven. Ook voorgebakken sjablonen ("u hoeft helemaal geen code te kennen, wij regelen alles voor u") zijn lang niet altijd te vertrouwen, en moet je degelijk testen op cross browser bestendigheid en andere zaken.
Alleen is de nattigheid, dat je als aankomend webbouwer juist zo'n programma gebruikt, omdat je (nog) niet weet wat/hoe je moet testen, en welke veranderingen je hoe moet aanbrengen opdat het wel werkt zoals jij wilt...
Eén van de belangrijke ontwerp-principes voor een webpagina is, dat je (in het algemeen) voor een <div> container géén hoogte mag opgeven als er tekst in zit. Want als de tekst aangepast wordt (vergroot/verkleind, of: andere tekst), moet de <div> / kolom mee kunnen rekken of krimpen.
Bij jouw 4-koloms opzet betekent dat, dat de footer altijd automatisch onder de langste kolom moet komen (en welke dat gaat worden, weet je niet altijd tevoren).
Hoe dat te bereiken?
Daarover graag een volgende keer meer: wordt vervolgd!
Met vriendelijke groet,
CSShunter
*) Het is in het Engels, maar een serie tips over het ontwerpproces kun je vinden in "Golden Rules of CSS".
Ik heb nog eens diep in de ogen van je site gekeken, en ben nu bang dat ik je aan wat werk ga helpen...
Ontwerp & uitvoering
Als het ontwerp van een webpagina (zeg: de css-layout en correcte css-code) in orde is, komt de uitvoering (zeg: de correcte html) om de hoek kijken om de juiste weergave op het scherm te toveren. Om met het laatste te beginnen:
Een check op correcte html kan je doen met de html-validator (en eigenlijk niet pas op het laatst, maar al regelmatig tijdens het ontwerpproces). *) In het geval van de homepage www.demyse.nl is het resultaat van de html-validator, dat er zo'n kleine 30 html-fouten in zitten.
Hoe minder errors, hoe meer kans op een goede vertoning in alle browsers!
Maar 100% zekerheid krijg je niet, want IE is er ook nog...
Voor de css is er ook een prima online tester, de css-validator. We zien dat de css-validator struikelt over regel 12 van de pagina (waardoor ook niet toegekomen kan worden aan testen van verdere stylesheets: "Geen style sheet gevonden". Los getest heeft de standaard style.css ook een foutje).
Wat is er met regel 12 (de regel met de verwijzing naar style-ie7.css!) aan de hand? - En dit is meteen het antwoord op je vraag:
Met regel 12 zelf is niet aan de hand, maar het gevaar was al eerder opgetreden.
Er staat:
HTML:
<link rel="stylesheet" href="styles/style.css" />
<style type="text/css">
<!--[if IE 7]>
<style type="text/css" media="all">@import "styles/style-ie7.css";</style>
<![endif]>
<!--[if IE 8]>
<style type="text/css" media="all">@import "styles/style-ie7.css";</style>
<![endif]-->
</style>
</head>
HTML:
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<!--[if IE 7]>
<style type="text/css" media="all">@import "styles/style-ie7.css";</style>
<![endif]>
<!--[if IE 8]>
<style type="text/css" media="all">@import "styles/style-ie7.css";</style>
<![endif]-->
</head>Was het maar waar!
Want ook in bv. Firefox gaat het niet goed, als je bv. één klikje op Inzoomen geeft om de letters een beetje groter te kunnen zien.
- Hier een screenshot (iets verkleind) met wat er dan gebeurt.
Waarom?
Je hebt geprobeerd alles zo nauwkeurig mogelijk (pixelgewijs) in je styles vast te leggen. En waarschijnlijk ben je daarbij vernaggeld door Dreamwaever of een andere "WYSIWYG" html-editor. Ze zeggen:
En dat klopt alleen als je het heel letterlijk neemt: wat je ziet is wat JIJ krijgt. En niet: wat je ziet is wat MEN krijgt!
Wat ze er niet bij vertellen (want dat verkoopt minder goed) is dat de uitdrukking eigenlijk hoort te zijn:
(en misschien vergeet ik er nog eentje)
Zodra één of meer van deze variabelen verandert, KAN het resultaat hetzelfde zijn, maar het HOEFT NIET. Een webpagina bouwen is dus lang niet zo eenvoudig als ze je graag willen laten geloven. Ook voorgebakken sjablonen ("u hoeft helemaal geen code te kennen, wij regelen alles voor u") zijn lang niet altijd te vertrouwen, en moet je degelijk testen op cross browser bestendigheid en andere zaken.
Alleen is de nattigheid, dat je als aankomend webbouwer juist zo'n programma gebruikt, omdat je (nog) niet weet wat/hoe je moet testen, en welke veranderingen je hoe moet aanbrengen opdat het wel werkt zoals jij wilt...
- Ik zou eigenlijk wel eens willen weten hoeveel webontwerp-programma's met "u hoeft er niets van af te weten om iets moois te maken" op het doosje na twee keer proberen tot een hevig :evil: hebben geleid, en vervolgens onverrichterzake ergens in een la zijn beland... - Maar het product is in elk geval verkocht!
Eén van de belangrijke ontwerp-principes voor een webpagina is, dat je (in het algemeen) voor een <div> container géén hoogte mag opgeven als er tekst in zit. Want als de tekst aangepast wordt (vergroot/verkleind, of: andere tekst), moet de <div> / kolom mee kunnen rekken of krimpen.
Bij jouw 4-koloms opzet betekent dat, dat de footer altijd automatisch onder de langste kolom moet komen (en welke dat gaat worden, weet je niet altijd tevoren).
Hoe dat te bereiken?
Daarover graag een volgende keer meer: wordt vervolgd!
Met vriendelijke groet,
CSShunter
*) Het is in het Engels, maar een serie tips over het ontwerpproces kun je vinden in "Golden Rules of CSS".
- Status
