[CSS] Lastige IE bug -> wat is hier aan de hand?

[Q]

Hallo,

Zie onderstaande afbeelding. Een hele rare bug. Waar het mis gaat zie ik niet. Mozilla werkt (uiteraard) prima.



Het zou er uit moeten zien zoals te zien is op:

http://nan.ath.cx (testmachine)

Dit is een ie 6 probleem, op OS X onder ie 5.2 werkt hij goed, evenals safari.

Heeft iemand een idee wat hier aan de hand is? Ik denk zelf iets met css of mijn geklooi met divjes. Maar ik sta perplex.

[ Voor 10% gewijzigd door Q op 17-03-2004 23:07 ]

[André]

Het is een renderbug, open notepad maar eens en ga es over dat menu heen, om en om verdwijnen en verschijnen delen van het menu.

[crisp]

Klopt; komt vaak voor bij floats. Een beetje spelen met height/width/margin/padding wil nog wel eens helpen.

[faabman]

/me kan het toch niet laten

Heb je er wel eens aangedacht om de html-elementen te gebruiken waarvoor ze bedoelt zijn , er staan 100-en divjes in je site je perfect kunt vervangen door de elementen die ervoor gemaakt zijn (en die je ook heel eenvoudig kunt stylen)

bijv.

een hX gebruiken voor een koptekst...

en ul / li constructie gebruiken voor een menu wat eruit ziet als een lijst...

[Q]

faabman schreef op 17 maart 2004 @ 23:15:
/me kan het toch niet laten

Heb je er wel eens aangedacht om de html-elementen te gebruiken waarvoor ze bedoelt zijn , er staan 100-en divjes in je site je perfect kunt vervangen door de elementen die ervoor gemaakt zijn (en die je ook heel eenvoudig kunt stylen)

bijv.

een hX gebruiken voor een koptekst...

en ul / li constructie gebruiken voor een menu wat eruit ziet als een lijst...

De "development" versie is in die zin transitioneel dat het eerst maar eens compliant moet zijn en er goed uit zien (ik ben redelijk nieuw met div/css gebruik) voordat ik het netjes ga maken, maar dank voor de tip.

Wat betreft spelen met de instellingen, ik zal het eens proberen.

Zou dit trouwens de "peekaboo" bug kunnen betreffen?

http://www.positioniseverything.net/explorer/peekaboo.html

[Annie]

faabman schreef op 17 maart 2004 @ 23:15:
Heb je er wel eens aangedacht om de html-elementen te gebruiken waarvoor ze bedoelt zijn , er staan 100-en divjes in je site je perfect kunt vervangen door de elementen die ervoor gemaakt zijn (en die je ook heel eenvoudig kunt stylen)

Kan het hier alleen maar mee eens zijn. Wat is de reden van al deze divjes? Een aantal kan ik nog wel verklaren maar dingen als:

code:

<div>
    <div class="menuitem">.: <a  class="geelopzwartmenu">Home</a></div>
</div>

Al iets beter is dan imho

code:

<div class="leftcolumn">
  <div class="menukop">Hoofdmenu</div>

  <div class="menucontainer">
    <div class="menucontainercontainer">
      <div class="menuitem">.: <a href="foo" class="geelopzwartmenu">Home</a></div>
      <div class="menuitem">.: <a href="bar" class="geelopzwartmenu">Recensies</a></div>

      <!-- enz -->

    </div>
  </div>
</div>

Even los van de discussie of je niet beter andere elementen kan gebruiken (semantiek).

p.s. een class met de naam geelopzwartmenu kan natuurlijk echt niet

[ Voor 52% gewijzigd door Annie op 17-03-2004 23:26 . Reden: whoops, daar ging de layout ]

[Q]

Allemaal heel vriendelijk dat er op wat slordigheden wordt gewezen, maar mijn vraag is: Hoe kun je die rottige renderbug omzeilen.

Is het toeval dat de grens tussen het "goede" en slechte deel precies gelijk ligt met de onderkant van het nieuwsitem (bovenste)?

[Verwijderd]

Je kunt die bug snel oplossen door het plaatje in de achtergrond 2x zo hoog te maken. dan boven de normal state te maken en onder de hoover state.

dan doe je een background pos boven en bij een hoover een background pos beneden.

[Annie]

Q schreef op 17 maart 2004 @ 23:31:
maar mijn vraag is: Hoe kun je die rottige renderbug omzeilen.

Bijvoorbeeld door IE te helpen. Ik kan me voorstellen dat IE bij grote hoeveelheden (onnodig) geneste elementen de weg eerder kwijtraakt dan bij een compacte code.

Heb je al geprobeerd de overtollige div's te verwijderen?

[ Voor 14% gewijzigd door Annie op 17-03-2004 23:40 ]

[Q]

Verwijderd schreef op 17 maart 2004 @ 23:37:
Je kunt die bug snel oplossen door het plaatje in de achtergrond 2x zo hoog te maken. dan boven de normal state te maken en onder de hoover state.

dan doe je een background pos boven en bij een hoover een background pos beneden.

Plaatje in de achtergrond?


Anyway, ik ga kijken of het zoveel mogelijk strippen van divjes helpt.

Hey: ik heb inderaad alle divjes gestript en met p gestoeid en nu zijn de menu-items in orde.

Echter: zodra ik de css menukop klasse gebruik gaat het mis.

[ Voor 16% gewijzigd door Q op 17-03-2004 23:46 ]

[Verwijderd]

ow, ik zie nu pas dat het gewoon alleen een kleur is. nee, dan zul je inderdaad wat aan je opbouw moeten doen ben ik bang...

maak er eens een li voor aan, die je een ID geeft (#waarde) en definieer daarin eens

code:

<p class="menuitem">.: <a href="index.php?contentobject=6&amp;leftmenu=1&amp;contentwaarde=5" class="geelopzwartmenu">Home</a></p>

->

code:

<ul id="menuitem">
<li>.:&nbsp<a href="index.php?contentobject=6&amp;leftmenu=1&amp;contentwaarde=5">Home</a></li>
</ul>

met daarin een inline list.

voor hulp verwijs ik naar: http://css.maxdesign.com.au/

[ Voor 66% gewijzigd door Verwijderd op 17-03-2004 23:49 . Reden: toevoeging. ]

[Q]

Verwijderd schreef op 17 maart 2004 @ 23:43:
ow, ik zie nu pas dat het gewoon alleen een kleur is. nee, dan zul je inderdaad wat aan je opbouw moeten doen ben ik bang...

Dat klopt iig inderdaad, met classe menukop weg werkt het al beter. Nu nog de layout terug zien te krijgen. Edit: en dat is dus het grootste probleem. Ben blij dat ik dit niet voor mijn werk hoef te doen

Nee, helaas, de ul-tag etc veranderd weinig. Het probleem zit duidelijk in het css gebeuren, zodra ik daar iets mee doe gaat het mis.

Ik ga mij eens verdiepen in de "holy hack" misschien dat die iets voor mij kan betekenen. (edit: helaas niets, dat is ergens anders voor)

[ Voor 40% gewijzigd door Q op 18-03-2004 00:06 ]

[Q]

Okee, het is opgelost

Het betreft inderdaad de zogenaamde "peekaboo" bug en is uiteindelijk simpel op te lossen door de volgende regel aan een classe in je css toe te voegen:

height: 1%;

Dat is alles. Vervolgens moest ik alleen IE nog wat schoppen om wat uitlijning te doen zoals het hoort. Zie het volgende stukje gore code:

* html .content {
margin-top: -10px;

}

Met ie en webbrowsers werkt de site nu prima. Dank voor de hulp. Diep respect voor de mensen die tegen ie mogen vechten.

[Annie]

Q schreef op 17 maart 2004 @ 23:47:
Ik ga mij eens verdiepen in de "holy hack"

Ik wist dat er developers zijn die het verzinnen van hacks tot religie hebben verheven en dat er w3c evangelisten zijn die non-standard-developers verketteren, maar dit gaat wel heel erg ver

't is Holly hack

[ Voor 5% gewijzigd door Annie op 18-03-2004 00:40 ]

[Q]

Annie schreef op 18 maart 2004 @ 00:40:
[...]

Ik wist dat er developers zijn die het verzinnen van hacks tot religie hebben verheven en dat er w3c evangelisten zijn die non-standard-developers verketteren, maar dit gaat wel heel erg ver

't is Holly hack

Voor mij is de hack anders verdomt heilig

Maar verdrietig wordt ik er wel van. Dat je met de ene bug in IE de andere moet verhelpen. Te zot. 't is heel erg. Anders zou ik er om lachen.

Bekijk de site nog maar eens met ie (alleen ie). (onderaan)

[curry684]

Volgens de W3C validator mag je dat XHTML 1.1 icon trouwens helemaal niet voeren

[Q]

curry684 schreef op 18 maart 2004 @ 02:00:
Volgens de W3C validator mag je dat XHTML 1.1 icon trouwens helemaal niet voeren

Mocht wel ... Blijkt net nog een update te zijn die ik niet gecontroleerd had. Bedankt voor de tip. is nu (weer ) goed.

Toch is het embleem nog niet helemaal terecht omdat niet alle pagina's xhtml compliant zijn. Vergeet niet: het is een testsite.

[ Voor 20% gewijzigd door Q op 18-03-2004 02:22 ]

[Grijze Vos]

Q schreef op 18 maart 2004 @ 01:03:
[...]
Voor mij is de hack anders verdomt heilig

Maar verdrietig wordt ik er wel van. Dat je met de ene bug in IE de andere moet verhelpen. Te zot. 't is heel erg. Anders zou ik er om lachen.

Bekijk de site nog maar eens met ie (alleen ie). (onderaan)

Hehe, zo ver ga ik niet op mn sites. Er staat wel een mooie "this site is optimized for Mozille FireFox", maar om nou te stellen dat IE defect is.

[Q]

Grijze Vos schreef op 18 maart 2004 @ 07:17:
[...]


Hehe, zo ver ga ik niet op mn sites. Er staat wel een mooie "this site is optimized for Mozille FireFox", maar om nou te stellen dat IE defect is.

Ik denk dat gezien het screenshot gerust gesteld mag worden dat IE defect is, er zijn vele problemen op css gebied in IE als ik de sites mag geloven. In ieder product zitten fouten, maar zoals bij IE is wel heel erg. Echter, ook dat zou weer niet erg zijn als ze de boel zouden patchen, maar voorlopig kunnen we dat nog wel vergeten.

Op een bedrijfssite zou ik dit overigens niet neerzetten.

[ Voor 6% gewijzigd door Q op 18-03-2004 11:20 ]

[sjaakaq]

Hier werkt het menu prima... IE6

[Q]

leokennis schreef op 18 maart 2004 @ 11:32:
Hier werkt het menu prima... IE6

Okee, het is opgelost

.....knip