Website Bugged In IE6

[Verwijderd]

Laat ik beginnen met jullie te laten weten dat ik vrij nieuw ben in zowel het grafische en coding gebied. Daarnaast probeer ik altijd zelf een oplossing te googlen maar hier kom ik toch echt niet zelf uit samen met google.

Mijn probleem is als volgt. Ik heb nu al twee websites gemaakt om te oefenen met DIV's en CSS. Bij allebei heb ik precies hetzelfde probleem: ze zijn bugged in IE6. Nu kan ik een missie opstarten waar iedereen in de wereld een nieuwere browser moet installeren, maar ik ben bang dat dat me iets teveel tijd kost . In IE7 en Firefox (3) is hij prima zoals ik hem wil hebben. De pagina stretched zoals hij hoort. In IE6 daarentegen niet. Wanneer mijn tekst gedeelte word volgepropt met behoorlijk veel tekst waardoor dit uitrekt, rekt hij wel uit maar het stopt ergens in het midden van de tekst terwijl in andere browsers de hele tekst zichtbaar is en eventueel nog wat hieronder zit.
Ik heb geen IE6 op deze computer, ik zal hem desnoods nog wel even installeren om een screenshot te maken voor jullie zodat het misschien iets duidelijker is wat ik nou precies bedoel. De site is overigens te vinden op http://www.evolution-erased.com/zen6/ & een 2e met hetzelfde probleem op http://www.evolution-erased.com/test/. De html code van de zen6 website is als volgt:

---

code:

<div id="wrapper">

    <div id="header"></div>
    <div id="content"></div>
    <div id="stretch"></div>
    <div id="contentright"></div>
    <div id="typearea">
    
        <div id="textarea">
        
            <span class="texttitle"></span>
            <br />
            <br />
            <span class="textintro"></span>
            <br />
            <br />        
            <span class="text"></span>
        </div>
            <br />
            <br />
        <div id="bottombar"></div>
    </div>

</div>

---

en de CSS:

---

code:

body                {
    margin-left:0px;
    margin-top:0px;
    background-image:url(images/bg.jpg);
    background-repeat:repeat-x;
}

#wrapper            {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    top:8px;
    width:1036px;
}

#header             {
    position:absolute;
    width:1036px;
    height:129px;
    background-image:url(images/header.jpg);
}

#content            {
    position:absolute;
    width:48px;
    height:39px;
    background-image:url(images/contentzen6.jpg);
    top:144px;
    left:4px;
}

#stretch            {
    position:absolute;
    width:976px;
    height:34px;
    left:52px;
    top:149px;
    background-image:url(images/stretch.jpg);
    background-repeat:repeat-x;
}

#contentright       {
    position:absolute;
    width:3px;
    height:29px;
    top:149px;
    left:1028px;
    background-image:url(images/contentright.jpg);
}

#typearea           {
    position:absolute;
    width:1022px;
    top:183px;
    left:6px;
    background-color:#ddebf7;
}

#textarea           {
    position:relative;
    top:23px;
    left:41px;
    width:749px;
}

#bottombar          {
    position:relative;
    width:1022px;
    height:29px;
    top:49px;
    background-image:url(images/bottomstretch.jpg);
    background-repeat:repeat-x;
}

.texttitle          {
    font-family: "Arial Black", Gadget, sans-serif;
    color:#134c7e;
    font-style:italic;
}

.textintro          {
    font-family:Tahoma, Geneva, sans-serif;
    font-weight:bold;
    font-size:12px;
}

.text               {
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
}

---

Iemand enig idee wat ik fout doe? *bereid zich voor*

[Onbekend]

XHTML en IE6 is weliswaar geen geweldige combinatie, maar je code zou voor IE6 goed te krijgen moeten zijn.

Probeer eens wat met de margins aan de rechter-en onderkant en experimenteer eens met de height.

[crisp]

Waarom gebruik je overal absolute/relative positioning? Dat is meer voor als je vlakken over elkaar heen weer wilt geven, maar hier lijkt het me absoluut onnodig en zou je gewoon 'in the flow' kunnen werken ism margins en paddings.

Verder zie ik ook alleen maar DIV's en SPAN's. Heb je wel eens gehoord van semantiek ?

Een mooie verzameling specieke IE-bugs + workarounds vind je overigens op PIE - een goed beginpunt om je in te lezen over de nukken van o.a. IE6

[ Voor 20% gewijzigd door crisp op 09-12-2008 20:47 ]

[mcDavid]

voor testen in IE bestaan handige programmatjes:
http://www.my-debugbar.com/wiki/IETester/HomePage
http://tredosoft.com/Multiple_IE
www.browsershots.org

Nog handiger was natuurlijk geweest als IE niet zo'n absurde eigen mening over HTML had, maargoed je kunt niet alles hebben.

Verder ben ik het met crisp eens w.bt. de positionering. Lukraak alles absolute positioneren is vragen om ellende. Zeker in IE6, die gaat daar heel slecht mee om. Floaten geeft ook wel eens ellende, maar dat is meestal makkelijker op te lossen. Al was het alleen al omdat het voor jezelf ook overzichtelijker is.

[CH4OS]

Onbekend schreef op dinsdag 09 december 2008 @ 19:37:
XHTML en IE6 is weliswaar geen geweldige combinatie, maar je code zou voor IE6 goed te krijgen moeten zijn.

Probeer eens wat met de margins aan de rechter-en onderkant en experimenteer eens met de height.

Op zich is er niets verkeerds aan natuurlijk. In het voorbeeld is overigens ook geen DOCTYPE declaratie, dus je zal deze info wel uit het voorbeeldje hebben.

Overigens word het voor de browsers ook pas xHTML als de server de juiste headers verstuurd.

Ligt het trouwens aan mij, of zijn er echt veel layers gebruikt dmv de DIV-tag?
Volgens mij moet het mogelijk zijn om met minder layers de layout te kunnen centreren (bijvoorbeeld).

[ Voor 13% gewijzigd door CH4OS op 11-12-2008 13:02 ]