IE 6: boxen schuiven niet goed mee.

dinsdag 26 april 2011 11:30

Acties:

0 Henk 'm!

Topicstarter

Hallo,

Ik ben bezig met bericht boxen en deze werken perfect in FF, Chrome, IE 9, IE 8 etc. Alleen in IE 6 wil het niet helemaal lekker...

Dit is wat er gebeurd in IE 6:
Afbeeldingslocatie: http://www.dreamwire.nl/klanten/ie6.jpg

Afbeeldingslocatie: http://www.dreamwire.nl/klanten/ie6.jpg

Als je bijvoorbeeld op het kruisje bij de eerste melding klikt dan komt het eruit te zien als het onderste gedeelte. Het ziet er dus naar uit dan de groene balk niet lekker meer schuift naar boven toe.

Het werkt dus wel maar niet op een lekkere manier! Weet iemand misschien wat hier het probleem kan zijn?

CSS:

code:

.box .content .message {
    position : relative;
    display : inline-block;
    background-position : 8px center;
    background-repeat : no-repeat;
    margin : 10px 0 0;
    padding : 0 0 0 25px;
    line-height : 27px;
    font-weight : bold;
    clear : both;
}

.box .content .message img {
    position : absolute;
    top : 7px;
    right : 7px;
    cursor : pointer;
}

.box .content .error {
    position : relative;
    display : block;
    background-image : url(../gfx/icon-reddot.gif);
    background-color : #fbf0f0;
    border : 1px solid #b80000;
    color : #b80000;
}

JS:

code:

1
2
3

$("div.message img").click(function () {
      $(this).parent().closest('div.message').fadeOut();
    });

HTML:

code:

<div class="message error">
                    Sorry, there was an error saving the file.
                    <img src="gfx/icon-close.gif" alt="Close this item" />
                </div>

dinsdag 26 april 2011 11:44

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Met IE6 is het altijd een beetje koffiedik kijken. Het eerste dat ik meestal even probeer is een * {zoom:1} om te kijken of het een hasLayout-issue is. Wat doet dat?

dinsdag 26 april 2011 11:55

Acties:

0 Henk 'm!

DeEindbaas

Topicstarter

Bosmonster schreef op dinsdag 26 april 2011 @ 11:44:
Met IE6 is het altijd een beetje koffiedik kijken. Het eerste dat ik meestal even probeer is een * {zoom:1} om te kijken of het een hasLayout-issue is. Wat doet dat?

Super

... dat was de oplossing!

code:

1
2
3

.box .messages{
    *zoom : 1;
}

dinsdag 26 april 2011 16:51

Acties:

0 Henk 'm!

Verwijderd

Dreamwire schreef op dinsdag 26 april 2011 @ 11:55:
[...]

Super ... dat was de oplossing!
code:
1
2
3
.box .messages{
    *zoom : 1;
}

Wat doet die * voor de zoom? (Ben niet zo hardcore css-er)

dinsdag 26 april 2011 16:57

Acties:

0 Henk 'm!

GateKeaper

#1 Procastinator

Verwijderd schreef op dinsdag 26 april 2011 @ 16:51:
[...]

Wat doet die * voor de zoom? (Ben niet zo hardcore css-er)

Om één of andere vage reden spreekt die enkel IE6 aan. IE6 schijnt nog een parent container voor "html" te hebben. Een beetje het idee van:

HTML:

<*>
   <html>
      <head>
      </head>
      <body>
      </body>
   </html>
</*>

http://css-discuss.incutio.com/wiki/Star_Html_Hack

dinsdag 26 april 2011 16:58

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Verwijderd schreef op dinsdag 26 april 2011 @ 16:51:
[...]

Wat doet die * voor de zoom? (Ben niet zo hardcore css-er)

Een hack zodat het alleen in IE7 en lager wordt toegepast.

Voor zoom:1 zou je het ook zonder * kunnen doen, het zou voor alle overige browsers geen effect moeten hebben (zo ver ik weet).

Je kunt veel beter Condicional Comments gebruiken.

GateKeaper schreef op dinsdag 26 april 2011 @ 16:57:
Om één of andere vage reden spreekt die enkel IE6 aan. IE6 schijnt nog een parent container voor "html" te hebben. Een beetje het idee van:

http://css-discuss.incutio.com/wiki/Star_Html_Hack

Wanneer er * html gebruikt wordt, is het alleen voor IE6 inderdaad. Staat de ster direct tegen het element (en staat er geen "html" tussen), is het ook voor IE7.

[ Voor 36% gewijzigd door OkkE op 26-04-2011 17:02 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

dinsdag 26 april 2011 17:02

Acties:

0 Henk 'm!

Bosmonster

*zucht*

GateKeaper schreef op dinsdag 26 april 2011 @ 16:57:
[...]

Om één of andere vage reden spreekt die enkel IE6 aan. IE6 schijnt nog een parent container voor "html" te hebben. Een beetje het idee van:
HTML:
1
2
3
4
5
6
7
8
<*>
   <html>
      <head>
      </head>
      <body>
      </body>
   </html>
</*>
http://css-discuss.incutio.com/wiki/Star_Html_Hack

*zoom is niet hetzelfde als * html { zoom }

Die eerste zorgt simpelweg voor een foute property, al ziet IE6 + (volgens mij 7 en 8 ook, ben niet zo op de hoogte van het gedrag van hacks..) dat gewoon nog als geldige waarde.

Bij zoom boeit het niet zo en kun je de hack net zo goed achterwege laten, dat ondersteunt toch alleen IE.

Maar als je voor IE6 aan de slag gaat dan is een conditional statement geen overbodige luxe, dan zul je toch je halve stylesheet moeten herbouwen om het te laten werken.

dinsdag 26 april 2011 17:08

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Ik doe het zelf tegenwoordig vaak zo:

.

HTML:

<!--[if lt IE 7 ]><html class="ie6"><![endif]--> 
<!--[if IE 7 ]><html class="ie7"><![endif]--> 
<!--[if IE 8 ]><html lclass="ie8"><![endif]--> 
<!--[if (gte IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

Op die manier heb je in je CSS gewoon nette classes voor alle IE browsers, zonder met hacks aan de gang te hoeven. Kun je gewoon het volgende doen:

.

Cascading Stylesheet:

.ie6 .something { /* only IE6 */ }

.ie6 .something, 
.ie7 .something { /* only IE6 & IE7 */ }

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

dinsdag 26 april 2011 17:20

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Ik doe het zelf tegenwoordig zo:

code:

1	/* intentionally left blank */

IE6 ondersteunen we eigenlijk nooit meer en voor IE7+ heb ik nog nooit een conditional comment nodig gehad.

[ Voor 8% gewijzigd door Bosmonster op 26-04-2011 17:20 ]

dinsdag 26 april 2011 20:33

Acties:

0 Henk 'm!

Flowmo

Bosmonster schreef op dinsdag 26 april 2011 @ 17:20:
Ik doe het zelf tegenwoordig zo:
code:
1
/* intentionally left blank */
IE6 ondersteunen we eigenlijk nooit meer en voor IE7+ heb ik nog nooit een conditional comment nodig gehad.

De twee css "filters" die we voor IE6 en IE7 gebruiken zijn:
* html {} voor IE6
*+html {} voor IE7

CSS "hacks" moet je zoveel mogelijk vermijden en indien *echt* nodig, conditional comments gebruiken.

dinsdag 26 april 2011 21:09

Acties:

0 Henk 'm!

R4gnax

OkkE schreef op dinsdag 26 april 2011 @ 17:08:
Ik doe het zelf tegenwoordig vaak zo:

.
HTML:
1
2
3
4
 
 
 
 <html> 
Op die manier heb je in je CSS gewoon nette classes voor alle IE browsers, zonder met hacks aan de gang te hoeven. Kun je gewoon het volgende doen:

.
Cascading Stylesheet:
1
2
3
4
.ie6 .something { /* only IE6 */ }

.ie6 .something, 
.ie7 .something { /* only IE6 & IE7 */ }

Sorry, maar dat is dus echt heel erg dom.

Op deze wijze voeg je voor alle browsers (en niet alleen Internet Explorer) een extra niveau descendent selectors en grouping constructies aan een flink aantal CSS clauses toe. Die zullen altijd nagelopen moeten worden, wat echt vreselijk veel extra nodeloze overhead is.

Het is veel beter om gewoon een IE6.css / IE7.css / IE8.css sheet met conditional comments toe te voegen en je CSS selectors zo ondiep mogelijk te houden.

(En ja; je hebt IE8.css inderdaad af en toe nog nodig voor opacity en gradients met -ms-filter.

)

Bosmonster schreef op dinsdag 26 april 2011 @ 17:20:
IE6 ondersteunen we eigenlijk nooit meer en voor IE7+ heb ik nog nooit een conditional comment nodig gehad.

Je hebt nooit issues gehad met het inline-block maken van naturally block level elementen? Nooit gebeten door phantom vertical whitespace op list items? Geen last van vage quirks met het correct overereven van CSS instellingen uit :hover pseudo-selectors op descendent elementen? Mijn ervaring is dat er in een complex site design altijd wel één of twee rotte appels zitten die het verpesten en een IE7 conditional nodig maken.

dinsdag 26 april 2011 21:19

Acties:

0 Henk 'm!

Bosmonster

*zucht*

R4gnax schreef op dinsdag 26 april 2011 @ 21:09:
[...]

Je hebt nooit issues gehad met het inline-block maken van naturally block level elementen?

Dat doe ik dus alleen met inline elementen, dan heb ik dat hele probleem niet. Heb inline-block sowieso al zelden nodig.

Nooit gebeten door phantom vertical whitespace op list items?

Niks dat een zoom:1 niet oplost (en daar maak ik geen losse stylesheets voor aan).

Geen last van vage quirks met het correct overereven van CSS instellingen uit :hover pseudo-selectors op descendent elementen?

Nee eigenlijk niet nee.

Mijn ervaring is dat er in een complex site design altijd wel één of twee rotte appels zitten die het verpesten en een IE7 conditional nodig maken.

Mijn ervaring is dus dat ik dit praktisch nooit nodig heb. Hooguit een hasLayout dingetje hier en daar, waarvoor ik een zoom niet schuw in de normale CSS.

Voornaamste issue waar ik tegenaanloop tegenwoordig met IE is problemen met overerving van filters, waar IE dus drastisch afwijkt van alle andere browsers. En crappy rendering met opacity en fonts/png's (waar ook weer verschil zit tussen XP en Vista+). Beide dingen waar ik met animaties tegenaanloop en me af en toe mn haren uit mn hoofd laten trekken. Maar goed, dan maar wat minder strakke animaties in IE...

dinsdag 26 april 2011 21:23

Acties:

0 Henk 'm!

Meijuh

De laatste tijd gebruiken wij deze oplossing:
http://code.google.com/p/ie6-upgrade-warning/

Asus EN8800GTS, Asus P5E, Intel E8400, 2x500gb Spinpoint (raid0), Zalman HP 600 watt, cnps 9500 led, creative xfi music, 4x1gb hyperX PC2 8500

woensdag 27 april 2011 08:12

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

R4gnax schreef op dinsdag 26 april 2011 @ 21:09:
Sorry, maar dat is dus echt heel erg dom.
[...]
(En ja; je hebt IE8.css inderdaad af en toe nog nodig voor opacity en gradients met -ms-filter. )
[...]
Je hebt nooit issues gehad met [...]?

Ik heb echt zelden nog issues met IE, en die enkele keer dat het voorkomt (laten we zeggen 3 regels CSS per project).

^{Overgens vraag ik me ook af, als dit echt heel erg dom is, waarom het dan ook in http://html5boilerplate.com/ wordt gebruikt, waar toch niet de minste mensen aan mee hebben gewerkt.}

Ik heb dan ook liever alles in één CSS file, waardoor inderdaad alle browsers het moeten 'doorlopen', dan dat ik die 3 regels in losse files zet. Wanneer je per IE versie 10 of 15 extra regels CSS nodig hebt, dan is misschien losse files nog beter ja, maar in mijn geval...

Overgens krijgt IE soms -ms-filter, soms gewoon een background, en soms heeft IE gewoon pech. Het hangt van het project af en van hoe belangrijk dat deel van de vormgeving is.

[ Voor 10% gewijzigd door OkkE op 27-04-2011 08:19 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

woensdag 27 april 2011 08:26

Acties:

0 Henk 'm!

Admiral Freebee

Meijuh schreef op dinsdag 26 april 2011 @ 21:23:
De laatste tijd gebruiken wij deze oplossing:
http://code.google.com/p/ie6-upgrade-warning/

Ook leuk voor mensen die op hun bedrijf nog verplicht met Internet Explorer 6 moeten werken

Dat je een andere browser suggereert is fijn, maar om nu echt de toegang te blokkeren...

woensdag 27 april 2011 08:33

Acties:

0 Henk 'm!

johnkeates

Ja, maar je moet ergens beginnen. Als een bedrijf niet goed genoeg op orde is om ie6 uit te faseren, dan is dan hun probleem. En vendor lock-in of 'dure applicatie van vroeger' en GEEN goed excuus.

woensdag 27 april 2011 08:42

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

johnkeates schreef op woensdag 27 april 2011 @ 08:33:
Ja, maar je moet ergens beginnen. Als een bedrijf niet goed genoeg op orde is om ie6 uit te faseren, dan is dan hun probleem. En vendor lock-in of 'dure applicatie van vroeger' en GEEN goed excuus.

Voor een persoonlijke website mag je helemaal zelf weten wat je doet, maar ik ben toch erg benieuwd hoe je zo'n houding aan je klanten verkoopt. De website hoeft er in IE6 echt niet het zelfde uit te zien als in Chrome of Firefox, maar simpelweg blokkeren? Dat vind ik niet kunnen.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

woensdag 27 april 2011 08:53

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Als je IE6 niet ondersteunt (en dus ook gewoon geen rekening mee houdt), dan is het gevolg bij een complexer design al snel dat de hele site onbruikbaar is in IE6. Zo'n melding is dan sowieso al zinloos, want de bezoeker ziet toch wel dat de site blijkbaar niet voor zijn browser is gemaakt (en dat is tegenwoordig meer regel dan uitzondering).

woensdag 27 april 2011 08:55

Acties:

0 Henk 'm!

funkeey

OkkE schreef op woensdag 27 april 2011 @ 08:12:
[...]

^{Overgens vraag ik me ook af, als dit echt heel erg dom is, waarom het dan ook in http://html5boilerplate.com/ wordt gebruikt, waar toch niet de minste mensen aan mee hebben gewerkt.}

Dit is de reden waarom het daar ook gebruikt wordt:

'Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads. Some ways to reduce the number of components include: combine files, combine multiple scripts into one script, combine multiple CSS files into one style sheet, and use CSS Sprites and image maps.'

Dit wil niet zeggen dat het goed is wat ze doen. Die twee a drie extra CSS files maken het er echt niet veel langzamer op en zeker niet omdat een firefox bijvoorbeeld heel die CSS niet appart renderd omdat het IE only is.

Door voor de IE browsers apparte CSS files aan te maken heb je in mijn ogen meer overzicht en hoeft de gewone gebruiker hier geen 'last' van te hebben.

woensdag 27 april 2011 09:05

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

funkeey schreef op woensdag 27 april 2011 @ 08:55:
Dit is de reden waarom het daar ook gebruikt wordt:

[...]

Dit wil niet zeggen dat het goed is wat ze doen. Die twee a drie extra CSS files maken het er echt niet veel langzamer op en zeker niet omdat een firefox bijvoorbeeld heel die CSS niet appart renderd omdat het IE only is.

Door voor de IE browsers apparte CSS files aan te maken heb je in mijn ogen meer overzicht en hoeft de gewone gebruiker hier geen 'last' van te hebben.

Het is in mijn ogen iedergeval ook totaal niet slecht wat ze doen. Zoals ik zei, wanneer je echt tientalle regels extra CSS per IE versie nodig hebt, dan is het netjes om dat in losse files te zetten, maar voor 3 regels totaal? Dan heb ik liever alles in één file.

Ik probeer hier ook niet te zeggen dat met classes werken beter is als met losse files. Het enige dat ik probeer te zeggen is; ik vind dat R4gnax een beetje te fel reageerde door te zeggen dat het stom is om met classes te werken. Het heeft beide voor- en nadelen.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

woensdag 27 april 2011 10:03

Acties:

0 Henk 'm!

Bosmonster

*zucht*

De voordelen van de classes zijn duidelijk, je kunt deze ook gebruiken via script en het scheelt requests. Nadeel is dat je er een nogal onoverzichtelijke body-tag aan overhoudt en dat het werken met de classes extra CSS-overhead met zich meebrengt.

Onderwerpen