[CSS] IE6/Win weigert goede positionering...

[Verwijderd]

Hoi tweakers!

M'n eerste vraag en eerste keer sinds maanden op dit forum maar ik ben zo'n beetje radeloos. Ik heb van alles geprobeerd maar de enigste browser die weigert z'n werk goed te laten zien is Internet Explorer 6. Firefox gaat er goed doorheen, net zoals Opera en zelfs Netscape!

Ik heb van alles geprobeerd. Het irritante is dat ik zelf lekker op een Apple zit en de hele tijd m'n trial van Browsercam.com of de mensen op MSN mag lastigvallen om te kijken of het werkt.

Ik heb zo'n beetje alles geprobeerd wat ik bedenken kan, en het frustreert me dat het me nog niet gelukt is. Dit is dan ook zo'n beetje de laatste uitweg waar ik kom.

Het Probleem
Internet Explorer 6 zeg de inhoud niet rechts naar het menu, maar rechtsonder het menu.

De testpagina:
http://www.coders.nl/~jaap/

Weet iemand hoe ik ook in IE6 de inhoud naast het menu krijg? Bij voorbaat dank!

[Rowanov]

Dat komt doordat Internet Explorer en die andere browsers het boxmodel anders interpreteren. Als je de width van je inhoud div lager zet werkt het wel. Ik zelf los dit altijd op door een speciaal IE only stylesheet in te voegen. Waar de afmetingen voor IE in staan.

code:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ieonly.css" title="Stylesheet - IE only">
<![endif]-->

offtopic:
Leuk design trouwens

[ Voor 20% gewijzigd door Rowanov op 22-01-2005 15:51 ]

[Superdeboer]

Dit heeft dus volstrekt niets met boxmodels te maken ofzo... je moet gewoon zorgen dat als je twee divs naast elkaar wilt laten floaten, je ook wel de float-property meegeeft.

Dit is wat je moet doen:

• Vervang in je CSS
  
  Cascading Stylesheet:
  

  /* Structuur */
  #container
  {   
      text-align: center;margin: 0 auto;
      width: 700px;
      background-color: #9C0;
  }

  
  door
  
  Cascading Stylesheet:
  

  /* Structuur */
  #container
  {   
      text-align: center;margin: 0 auto;
      width: 700px;
      background-color: #9C0;
      overflow: hidden;
  }

• En vervang
  
  Cascading Stylesheet:
  

  #inhoud {
      background-color: #9C0;
      width: 500px;
      text-align: justify;
      color: #333;
      font: 12px Arial, Verdana, sans-serif;
      margin: 0 0 0 180px;
      padding: 0 20px 0 0;
  }

  
  ...door...
  
  Cascading Stylesheet:
  

  #inhoud
  {
      background-color: #9C0;
      width: 500px;
      text-align: justify;
      color: #333;
      font: 12px Arial, Verdana, sans-serif;
      padding: 0 20px 0 0;
      float: left;
  }

Merk dus op dat de margin van 180px op div#inhoud heeft plaats gemaakt voor een gewone float: left en dat er op div#container een overflow is bijgekomen.

[Verwijderd]

Bedankt!

En als ik die margin-left: 180px; erin houd, zodat het in Firefox ook allemaal goed blijft gaan, accepteert Internet Explorer dat dan ook?

[ Voor 5% gewijzigd door Verwijderd op 22-01-2005 16:27 ]

[Superdeboer]

Verwijderd schreef op zaterdag 22 januari 2005 @ 16:27:
En als ik die margin-left: 180px; erin houd, zodat het in Firefox ook allemaal goed blijft gaan, accepteert Internet Explorer dat dan ook?

Neej, daardoor gaat het nou mede juist fout in IE.

Maar zonder die margin-left 180px wérkt het ook in Firefox. En niet zeggen dat het niet zo is, want ik heb het zelf getest hier.

[Verwijderd]

Je hebt gelijk! Dat was een klein foutje mijnerzijds.

Het element #onder word echter wel meteen onder het element boven gezet. Misschien zie je dit niet maar het element #onder gebruikt een plaatje dat ik weggelaten heb, en komt in Firefox direct onder de header. Maar ik ga zelfs eerst een kijken want we hebben wel firefox op de mac

Bewerkt:
Ik heb hier ook het element float: left; aan toegevoegd maar ik weet niet of dat in ie6 ook wil. Ik heb het niet aangepast in de testpagina.

[ Voor 19% gewijzigd door Verwijderd op 22-01-2005 16:37 ]

[Superdeboer]

WebJ:
Het element #onder word echter wel meteen onder het element boven gezet.

My bad, sorry, daar had ik even niet op zitten letten.

Bewerkt:
Ik heb hier ook het element float: left; aan toegevoegd maar ik weet niet of dat in ie6 ook wil. Ik heb het niet aangepast in de testpagina.

Dat werkt inderdaad goed, zowel in IE als in Firefox.

[crisp]

Je kan je #onder het beste een clear:both geven

IE is berucht om de float-bugs; het IE float-model is dan ook 'buggy as hell' om het maar zo te noemen en is overduidelijk een hack geweest in een poging om CSS2 gedeeltelijk te ondersteunen.
Ook Opera's float-implementatie is niet vrij van fouten, getuige deze en deze pagina (via quirksmode).

Effectief betekent dit helaas dat CSS-based layout zonder het toepassen van workarounds voor verschillende browsers nog steeds een utopie is.

[Rowanov]

Superdeboer schreef op zaterdag 22 januari 2005 @ 16:17:
Dit heeft dus volstrekt niets met boxmodels te maken ofzo... je moet gewoon zorgen dat als je twee divs naast elkaar wilt laten floaten, je ook wel de float-property meegeeft.

Dit zei ik naar aanleiding van wat ik zelf als probleem tegenkwam. Als je nl. twee div's in een container propt en ze naast elkaar laat floaten en de content van de rechtse is te groot, dan wordt hij op een soortgelijke manier er schuin onder geplaatst.

[crisp]

Rowanov schreef op zaterdag 22 januari 2005 @ 18:59:
[...]

Dit zei ik naar aanleiding van wat ik zelf als probleem tegenkwam. Als je nl. twee div's in een container propt en ze naast elkaar laat floaten en de content van de rechtse is te groot, dan wordt hij op een soortgelijke manier er schuin onder geplaatst.

De pagina wordt gerenderd in standards-compliant mode; dat wil zeggen dat IE6 dan ook het w3c boxmodel gebruikt

[Verwijderd]

Bedankt voor jullie reacties! Ik weet weer iets meer!

[Rowanov]

crisp schreef op zaterdag 22 januari 2005 @ 19:17:
De pagina wordt gerenderd in standards-compliant mode; dat wil zeggen dat IE6 dan ook het w3c boxmodel gebruikt

Het was toch al bekend dat lezen niet een van mijn sterkste punten is