Pagina W3C HTML 4.01 valid maar problemen in IE 6

[Verwijderd]

Ik heb de volgende layout gemaakt: klik hier, deze layout doet het goed in IE 7, Firefox 2 en Safari, maar IE 6 vertikt het om mn layout netjes weer te geven. Ik heb de pagina bij W3C gecheckt, en werd HTML 4.01 Transitional valid bevonden, hoe komt het toch dat IE 6 dan problemen met het weergeven van mijn layout heeft, en hoe kan ik die problemen oplossen?

[Ascathon]

Ik zie het verschil niet. Nou ja, de afstand op sommige plekken is wat groter, maar dat ligt volgens mij puur aan IE7. Rare fouten enzo kan ik geen vinden.Sorry, ik moet beter lezen. Tis wat mn opvolger beneden zegt. Het kan ook liggen hoe de browser het in elkaar duwt.

[ Voor 28% gewijzigd door Ascathon op 14-02-2007 14:55 ]

[Alex)]

Internet Explorer 6 houdt zich niet volledig aan de standaarden wat dat betreft. Ik heb hier geen IE 6 dus ik kan het niet even voor je checken, maar ik heb een vermoeden dat het wat CSS-problemen betreft. Kijk eens op www.positioniseverything.net door de bugs (met soms erg vreemde namen), daar staan soms ook workarounds bij.

Kun je een screenshot posten van hoe het is in IE 6?

[Verwijderd]

Bovenstaande afbeelding laat zien hoe de layout in IE 6 wordt weergegeven, hieronder een kleine samenvatting:

• Het content vlak wordt niet gelijk uitgelijnd met de header;
• Slechts enkele menu links krijgen een dashed underline (erg vreemd);
• Het advertentie vlak wordt naar onder geduwt, deze moet gelijk met de top van het content vlak komen.

[Mint]

Kijk eens in je CSS voor die banner(s), misschien dat je dit op kunt lossen met margin-right ?
(eerste wat er in me opkomt)

[geez]

Het eerste dat in mij opkomt is de manier hoe IE6 omgaat met borders, ze worden aan de buitenkant geplaatst (er komen dus pixels in grootte bij), itt bijv. Firefox welke ze aan de binnenkant plaatst en de grootte van het element dus niet beinvloed. Ik bookmark hem even om straks verder te kijken. Moet nu naar mijn werk

[Verwijderd]

Ik denk dat je te maken hebt met de double float-margin bug van IE6
http://www.positionisever...lorer/doubled-margin.html

je #main heeft een float: left en een margin. IE 6 heeft een wazige *2 margin functionaliteit

Geef je #main een display:inline en het zou gefixed moeten zijn (met conditional comments zou het helemaal netjes zijn)

dit is overigens een wazige manier om links en rechts een margin te geven

Cascading Stylesheet:

margin:5px;
margin-bottom:0px;
margin-top:0px;

gebruik dan:

Cascading Stylesheet:

margin: 0 5px;

[ Voor 22% gewijzigd door Verwijderd op 14-02-2007 16:22 ]

[Verwijderd]

Verwijderd schreef op woensdag 14 februari 2007 @ 16:20:
Ik denk dat je te maken hebt met de double float-margin bug van IE6
http://www.positionisever...lorer/doubled-margin.html

je #main heeft een float: left en een margin. IE 6 heeft een wazige *2 margin functionaliteit

Geef je #main een display:inline en het zou gefixed moeten zijn (met conditional comments zou het helemaal netjes zijn)

dit is overigens een wazige manier om links en rechts een margin te geven

Cascading Stylesheet:

margin:5px;
margin-bottom:0px;
margin-top:0px;

gebruik dan:

Cascading Stylesheet:

margin: 0 5px;

Bedankt. Punt 1 & 3 van de problemen zijn zo goed als opgelost, tenminste ik ben er tevreden mee. Alleen krijgen nu nog niet alle links een dashed underline in IE 6. Iemand een idee waar dit nog aan kan liggen?

[Alex)]

IE gaat niet goed om met borders rondom een <a>, zet die links eens in een <ul>, zodat je dit krijgt:

HTML:

<ul id="menulinks">
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

En in je CSS:

Cascading Stylesheet:

ul#menulinks
{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul#menulinks li
{
  border-bottom: 1px dashed #000;
}

Volgens mij zou dit moeten werken (niet getest)

[Verwijderd]

Hmm Alex) het vreemde wil dat het al zo in mn HTML en CSS staat

[Alex)]

Hmm inderdaad, ik heb je broncode eigenlijk niet echt bekeken, dus ik dacht dat je die border-bottom op je links had gezet ipv op je <li>'s. Dan zou ik het zo 1-2-3 niet weten...

[crisp]

hasLayout bug; geef je #menu ul eens een width:100%;

[Verwijderd]

Hartelijk dank probleem is opgelost. Je reactie zette me aan het denken, ik bedacht me dat IE 6 de ul niet de juiste width mee gaf. Nu heb ik dat geen 100% gemaakt want dan begint mn adsense div weer te zeuren, maar 150px ten opzichte van de menu div waarin de ul staat die 160 pix is. Nu staat alles redelijk naar mn zin in de gewenste browsers.