[css] IE52Mac float probleem.

[Verwijderd]

Pagina:
http://annevankesteren.nl/projects/asser/1/

Screen shot van de problemen:
http://annevankesteren.nl...er/docs/ie5.2-problem.jpg

Het gaat dus om frame[name=sub-cat] (achtergrondplaatje vult niet alles op aan de rechterkant) en frame[name=content] waar de tekst onder het plaatje ipv ernaast komt te staan.

Hopelijk kan ik het er bij de klant inkrijgen dat IE5/Mac zo goed als dood is, maar aan de andere kant is het natuurlijk toch wel leuk om het werkend te zien.

Frames is hier gekozen omdat het alleen ging om 'hap-klare' lego-brokken (templates dus) en de klant het op die manier wilden. Had te maken met CMS e.d. dus daar ben ik niet verantwoordelijk voor (gelukkig).

[Willem]

Zowieso is IE5 brak met <div>'s en floats.
Is het misschien een optie om voor deze keer een tabel te gebruiken?
Tabellen gaan goed onder IE 5 Mac.

[Verwijderd]

Over die floats; ik denk dat je dit nodig hebt: http://www.complexspiral.com/publications/containing-floats/

[Verwijderd]

Wat? Heb ik alles zo zitten maken dat er een minimum aan markup en style nodig is en het werkt in IE5.0, IE5.5, IE6.0, Netscape 6.0 & up, Mozilla, Opera 6.0 & up, Safari en dan gaat iemand me nu tabellen aan raden?

Terwijl IE5/Mac (gvd) de eerste browser was met goede CSS(1) support? Dat schiet natuurlijk niet echt op...

EDIT: JRR, hoe zou ik dat precies toe moeten passen?

[ Voor 9% gewijzigd door Verwijderd op 18-12-2003 17:00 ]

[Verwijderd]

Ik heb er (gelukkig) geen ervaring mee; maar ik denk bij nader inzien dat je probleem juist tegenovergesteld is aan het probleem wat Meyer beschrijft.

Ik denk dat het probleem in het volgende zit:

code:

body.content div.article{
 margin:10px 0 0 0;
 clear:both;
}

Hier wordt clear op both gezet, wat volgens de spec is:

The generated box is moved below all floating boxes of earlier elements in the source document..

Echter, het plaatje staat niet voor div.article, een bug in IE dus. Een oplossing lijkt me door clear (misschien alleen voor IE5/Mac) uit te zetten.

/edit:
Als ik het niet verkeerd begrijp, staat in de CSS1 spec (in tegenstelling tot de CSS2 spec hierboven), niet dat de float voor het element moet komen dat clear toepast. Misschien handelt IE5/Mac toch correct???

[ Voor 16% gewijzigd door Verwijderd op 18-12-2003 17:20 ]

[Willem]

Sja, je vroeg om een oplossing. En het was in vragende vorm. Ik heb je niet gezegd dat er iets moet. Mag je best wat minder bot reageren. IE5 Mac is nu eenmaal de brakke browser in het rijtje dat je opnoemt.

Heeft de website een grote doelgroep die IE5 op een Mac gebruikt?
Minder dan (bijv.) ~ 1%?

voor ze.

[Verwijderd]

A problem enters the picture for IE5/Mac when an auto-width block-level element is inserted into a floated element. Other browsers still shrink the float as small as possible, regardless of the block-level element it contains. But IE5/Mac doesn’t shrink the float in this circumstance. Instead, it expands the float and block-level element to full available width. To work around this problem, we need to float the anchor also, but only for IE5/Mac, lest we throw off other browsers. First we’ll set the existing rule to float the anchor. Then we’ll use the Commented Backslash Hack to hide a new rule from IE5/Mac which removes the float for all other browsers:

#header a {
float:left;
display:block;
background:url("right.gif")
no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */

IE5/Mac browsers should now display the tabs as intended, according to Example 6. Nothing should have changed for non-IE5/Mac browsers. Note that IE5.0/Mac suffers from a lot of rendering bugs that were fixed in the upgrade to IE5.1. Because of this, the Sliding Doors technique suffers in version 5.0 beyond a point I’m willing to hack. Since the upgrade to IE5.1/Mac has been readily available for some time now, the percentage of OS 9 Macs still running IE5.0 should be tapering off to almost nothing.

http://www.alistapart.com/articles/slidingdoors/

Dit had ik laatst gelezen, het stukje dat ik in het bold heb gezet is denk ik het probleem wat jij nu bent tegen gekomen. Misschien kun je het oplossen door bovenstaande "hack"...

[Clay]

Ik heb denk ik een soortgelijk probleem gehad met macIE5.2 en floats, en de oplossing was om niet iets een float te geven wat zelf genest is in iets dat een clear heeft. je .article heeft dus een clear, en daarin zitten die images met floats. precies die situatie dus macIE negeert de float dan oid.

Probeer b.v. eens de clear van article af te halen en tussen de article div's b.v een hr met een clear te doen?

[Verwijderd]

Clay schreef op 18 december 2003 @ 17:29:
Ik heb denk ik een soortgelijk probleem gehad met macIE5.2 en floats, en de oplossing was om niet iets een float te geven wat zelf genest is in iets dat een clear heeft. je .article heeft dus een clear, en daarin zitten die images met floats. precies die situatie dus macIE negeert de float dan oid.

Probeer b.v. eens de clear van article af te halen en tussen de article div's b.v een hr met een clear te doen?

Hmm, precies de combinatie van m'n eerste en m'n tweede post. Soms zeg je iets goeds zonder dat je het zelf doorhebt

[Clay]

die clear moet volgens de specs echt wel op de containende div mogen. Iets met een clear gaat immers zelf proberen om niet naast iets te komen dat een float heeft, met both zowel links als rechts.
Die image in die container heeft daar als content zijnde niets mee te maken. het is gewoon een fout van macIE5.2 om dat te verknoeien.

[Verwijderd]

Verwijderd schreef op 18 december 2003 @ 16:45:
Het gaat dus om frame[name=sub-cat] (achtergrondplaatje vult niet alles op aan de rechterkant) en frame[name=content] waar de tekst onder het plaatje ipv ernaast komt te staan.

Hopelijk kan ik het er bij de klant inkrijgen dat IE5/Mac zo goed als dood is, maar aan de andere kant is het natuurlijk toch wel leuk om het werkend te zien.

Ik zou me er niet al te druk om maken. Niet alleen is MacIE5 idd behoorlijk dood, maar de site is ook nog eens gewoon bruikbaar; het zijn puur cosmetische problemen.

Bottom line: je moet ergens de grens trekken waar je ophoudt met het fixen van bugs van anderen.

[Verwijderd]

willem169,

Was niet bot bedoelt hoor ;-). Klonk alleen als een hopeloze oplossing nadat ik het goed had gekregen in de meeste browsers (het grootste probleem was dat IE5.0 voor Windows geen padding ondersteund voor inline-elementen).

Als het echt die clear:both; is zou ik eventueel voor div.article een <br clear="both"> kunnen plaatsen en daarna div.article beginnen zonder, maar ik vraag me af of dat het probleem gaat oplossen.

[0528973]

Om deze vraag weer wat leven in te blazen, hoe is dit probleem netjes en universeel op te lossen? Ik ben nog aan het rondzoeken, maar wat nieuwe hints en tips zouden erg aangenaam zijn. Er is een grote kans, dat er na meer als 3-kwart jaar er misschien een andere oplossing voor gevonden is.

[crisp]

Ik denk dat de oplossing ligt in het feit dat MAC/IE gewoon steeds minder ondersteund word. Safari heeft de toekomst op MAC

[0528973]

Crisp,

opzich wel, helemaal mee eens Maar dan zijn er helaas alsnog mensen die het daar niet mee eens zijn Bijv. 1 van de grootste klanten van het bedrijf waar ik werk, zij werken allemaal nog op Mac's met OS X 9 werken en IE 5

Nu heb ik de <br clear="both"> oplossing genomen, en ik weet nog niet zeker of het werkt want ik heb hier geen Mac tot mijn beschikking. Bovendien ben ik gewoon nieuwsgierig naar andere en misschien (betere) oplossingen, opdat ik in de toekomst op een andere manier naar dit soort problemen kijk en gewoon beter dit soort dingen kan oplossen, zonder altijd hier maar om hulp te komen vragen.

Ik probeer zoveel mogelijk de sites die ik nu maak met CSS & tableless layout te maken en voor alsnog gaat dat redelijk.(al zeg ik het zelf) Het probleem zit hem nu net in het feit dat ik zojuist een site gemaakt heb, waar ik een boel van geleerd heb, maar welke ook op de Mac moet werken...

Het specifieke probleem, waarom ik dit wil weten, is omdat er een lijst met plaatjes netjes naast een flinke lap tekst meeloopt. Deze plaatjes moeten netjes naast de juiste paragraven staan. Dit heb ik gedaan door 2 div'jes te gebruiken, welke naast elkaar floaten, it works like a charm, behalve op de Mac... en eventuele andere browsers die ik niet getest heb.

[crisp]

Ik kan je daar helaas niet bij helpen; ik bezit ook geen Mac, en hou ook geen rekening met IE5 op de Mac. De nieuwe GoT layout zal dan ook wel een zooitje zijn in IE op de Mac, maar dan installeren GoT bezoekers maar FireFox ofzo

[0528973]

Je houd geen rekening met IE op de Mac... lijkt me een mooie luxe

[Johnny]

0528973 schreef op 31 oktober 2004 @ 13:02:
Crisp,

opzich wel, helemaal mee eens Maar dan zijn er helaas alsnog mensen die het daar niet mee eens zijn Bijv. 1 van de grootste klanten van het bedrijf waar ik werk, zij werken allemaal nog op Mac's met OS X 9 werken en IE 5

Wat crisp zegt is een feit, geen mening, als je het daar niet mee eens bent ontken je de werkelijkheid.

Als ICT bedrijf zou ik er toch alles aan doen om die klant te overtuigen van het belang van een moderne browser aangezien MAC IE 5 toch een steeds groter probleem zal worden naarmate hij steeds minder wordt ondersteund.

Nu heb ik de <br clear="both"> oplossing genomen, en ik weet nog niet zeker of het werkt want ik heb hier geen Mac tot mijn beschikking. Bovendien ben ik gewoon nieuwsgierig naar andere en misschien (betere) oplossingen, opdat ik in de toekomst op een andere manier naar dit soort problemen kijk en gewoon beter dit soort dingen kan oplossen, zonder altijd hier maar om hulp te komen vragen.

Ik weet niet hoe de toekomst er uit ziet, maar ik weet wel dat Mac IE 5 er niet in voorkomt.

Ik probeer zoveel mogelijk de sites die ik nu maak met CSS & tableless layout te maken en voor alsnog gaat dat redelijk.(al zeg ik het zelf) Het probleem zit hem nu net in het feit dat ik zojuist een site gemaakt heb, waar ik een boel van geleerd heb, maar welke ook op de Mac moet werken...

Waarschijnlijk ziet hij er dan ook niet zo goed uit in Mosaic, dat is ook een verouderde browser die de technieken die jij wilt gebruiken niet ondersteunt.
De enige oplossing is dan om technieken te gebruiken die wel werken, of die browser niet ondersteunen.

Daarnaast is het geen probleem van de "Mac" aangezien er daar genoeg moderne browsers voor zijn, het die persoon die perse een veroudere browser wil gebruiken, of de persoon die perse een website met de nieuwste technieken wil maken, maar dat is maar net hoe je er tegenaan kijkt.

[crisp]

0528973 schreef op 31 oktober 2004 @ 13:18:
Je houd geen rekening met IE op de Mac... lijkt me een mooie luxe

Ik noem het 'vooruitgang'

[0528973]

Het probleem van een website die het niet doet onder de Mac, is niet zozeer een upgrade probleem van de klant. Ik ben best instaat om de meeste klanten over te halen om te upgraden. Het probleem ligt in het feit, dat een x-aantal bezoekers van de site de Mac en IE gebruiken, die mensen zijn helaas niet over te halen omdat ik geen contact met ze kan krijgen en de meeste van die mensen, niet willen upgraden of niet kunnen/durven upgraden. Op zo'n moment onstaat de discussie, van moeten we de site compatible maken voor die mensen, of doen we dat niet. De klant wil in de meeste gevallen dat de site wel compatible is. De klant wil dit dan, omdat de site hiervoor toch ook door die mensen bezocht kon worden zonder problemen. En op zo'n moment is het vechten tegen de bierkaai. De conclusie die de klant dan trekt is: het kon toch in het verleden wel en nu niet meer, nou fijn die vooruitgang... en dan krijg je als bedrijf een slechte naam, iets dat je ook niet wilt.

Ik denk dat je nu wel snapt waarom je helaas, nog steeds voor bepaalde browsers ondersteuning zal moeten hebben. En gelukkig is er nog geen klacht van website bezoekers binnengekomen, die Mosaic gebruiken en gelukkig hoef ik dus de site niet ook nog compatible te laten zijn met die browser.(Al vind ik dit een slechte redenatie om een site niet ook compatible met Mosaic te laten zijn, als web-developer is het toch een beetje verplichte kost om de browsers die gebruikt worden te kennen en je sites daar compatible mee te laten zijn, dan heb ik het wel over browsers die redelijk mainstream zijn, dus niet 1 of andere zelfgeschreven browser die maar door 2 personen op de hele wereld gebruikt wordt)

En ja, op een bepaald moment hou je de keus, gebruik ik techniek A, welke niet werkt onder browser A en B maar wel onder C,D & E, of gebruik ik techniek B welke wel onder alle browsers werkt maar achterhaald is.

ps Misschien is het handig om te vermelden dat ik geen web-developer ben van origine, ik ben software enigeer(qua opleiding) en probeer nu zoveel mogelijk kennis te verzamelen om websites zo goed mogelijk en gestructureerd mogelijk te bouwen. Waarschijnlijk mis ik nog een boel voorkennis, ik leer er nog steeds veel bij en probeer met zoveel mogelijk zaken rekening te houden.

[ Voor 17% gewijzigd door 0528973 op 31-10-2004 13:40 ]

[crisp]

Tsja, als je echt nog stone-age browsers moet/wil ondersteunen, dan zal je dus ook je techniek daarop moeten aanpassen. Dat betekent in dit geval: geen floats gebruiken. Misschien zelfs terug naar table-based layouts en enkel CSS1 (dat is echt geen schande, de meeste mainstream websites doen dat).
IMHO is dat zelfs te prefereren boven het toepassen van allerlei 'hacks' om het toch toonbaar te maken in zo'n oud lijk, tenzij je die 'hacks' helemaal apart van je normale markup en CSS kan houden (ik gebruik bijvoorbeeld een conditional comment om een aparte stylesheet voor IE < 6 te laden ivm boxmodel hacks).

[ Voor 59% gewijzigd door crisp op 31-10-2004 13:45 ]

[0528973]

Crips, wat zijn de zogezegde stone-aged browsers? Op ons bedrijf wordt ook nog veel met Mac's ed gewerkt, zowel met OS 9 als met OS X. Een boel mensen die ik ken, maken ook nog steeds gebruik van zowel de Mac met OS 9 of OS X. Dus voor zover ik kan zien, is de Mac met IE nog niet giga stone-aged. Btw, dit zou de enige hack zijn in de hele mark-up, 1 <br clear="both"> op 1 plaats in mijn template, oftewel een gigahack zou ik dit niet willen noemen, en persoonlijk zou ik deze dan liever ook niet gebruiken. Maar 1 hack tegenover teruggaan naar een table-layout, vind ik nog in het voordeel van een tableless layout.

Nu kan je natuurlijk gaan kijken naar een paar online sites, waarop je wat statestieken kan terugvinden tav browser gebruik, maar die stats lijken niet overeen te komen met mijn omgeving en de klantenkring van het bedrijf waar ik werk. Ik persoonlijk ben weldegelijk voor vooruitgang, maar opzich is er weinig mis met de instelling,
why change a winning team, hier komen meestal meer problemen uit voort tijdens de overgangsfase als het aantal problemen dat ze nu zouden hebben.

Ik mis gewoonweg, feitelijke kennis om iets als stone-aged te onderstrepen en om klanten of andere gebruikers van een site hiermee te kunnen overtuigen van het feit dat zij hun machine moet upgraden.

Ondanks dat dit redelijk offtopic gebabbel is, zou ik nog steeds graag de oplossing willen weten die Anne voor dit probleem heeft gebruikt en of er nog andere oplossingen zijn.

Btw, Crips je haalt een goed punt aan, waar ik idd nog geen antwoord op zou weten. Wanneer zou je tableless layouts(de vooruitgang om het zomaar te noemen gebruiken) en wanneer zou je de achterhaalde techniek van table-layouts moeten gebruiken? Ik heb hier erg weinig ervaring mee, mijn collega's op me werk zouden meestal table-layouts gebruiken gewoonweg omdat ze dit gewend zijn en hier dus snel mee kunnen werken, oftewel dat zou niet echt een goede bron zijn om deze vraag bij te stellen en vanwege kennis- en ervaringsgebrek kan ik wel gissen naar een mooie tussenweg, maar wat hints en tips van ervaren mensen zouden me flink opweg kunnen helpen hiermee.

[ Voor 32% gewijzigd door 0528973 op 31-10-2004 13:49 ]

[crisp]

In mijn ogen is IE6 zelfs al achterhaalde techniek; die is ook al 4 jaar oud en biedt naast een standards-compliant mode feitelijk weinig meer ondersteuning voor technieken als CSS2 dan IE5.5 die alweer een stukje ouder is. Echter kan je niet om IE6 en IE5.5 heen; IE5.0/Win wordt gelukkig steeds minder gebruikt, maar was in zijn tijd toch best een goede browser en het is dus nog wel vrij makkelijk om een website die in 5.5 werkt ook toonbaar te maken in 5.0

5.0 is dus zeker al bejaard, en daarmee dus ook 5.x voor Mac. Daarbij komt dat hoewel 5.x/Mac op papier betere ondersteuning biedt voor CSS2 het in de praktijk gewoon een stuk schroot is vol met bugs.

Wb andere smaken browsers; die worden meestal gebruikt door mensen die wat vaardiger zijn op de PC/Mac en dus ook sneller genegen zijn tot upgraden. Je kan dan stellen dat een browser van meer dan 2 jaar oud eigenlijk al passé is.

Voor GoT heb ik heel duidelijk de volgende keuze gemaakt:

IE5.5 en IE6 voor windows (helaas, daar kom je niet onderuit)
Recente Mozilla/Firefox (in de praktijk komt dat neer op Moz 1.5+ en FF 0.8+)
Recente Opera (komt neer op 7.54+ - alles daaronder heeft wat lelijke CSS bugs )
Recente Konqueror/Safari versie (ik test bv met Konqueror 3.2)

Wil je oudere browsers ondersteunen, gooi dan alles wat je geleerd hebt over CSS-based layouts maar overboord; dat kost je alleen maar veel tijd en frustraties.