IE maakt textblok veel te smal

[Felixje]

Ik heb een site gebouwd die door Firefox en Dreamweaver goed wordt weergeven, alleen Internet Explorer weergeeft hem fout.
Het gaat om de tekst onder de foto. Bij firefox is die gewoon over de volle breedte van de div textframe, alleen IE past hem zomaar aan aan de breedte van de foto.
http://www.lindeculinair.nl/welkom.html

In de andere pagina's wordt de tekst wel over de volle breedte weergeven. (textwelkom is voor de welkompagina en text voor de anderen).

Hoe is dit probleem op te lossen? Ik heb een margin-right van 0pixels geprobeerd maar dat lost niks op. Ook wat gespeeld met position: absolute en relative maar ook dat is niet de oplossing, en zo wil ik het eigenlijk ook niet oplossen.

Hier de CSS:

code:

div#textframe {
    position:relative;
    float: left;
    top:0px;
    left:5%;
    width: 60%;
    height: auto;
    border: 5px solid;
}
div#foto {
    position:relative;
    top:0px;
    left:0%;
    width: 40%;
}
div#textwelkom {
    position:relative;
    top:20px;
    width:100%;
}
div#text {
    position:relative;
    top:20px;

[BtM909]

Weet je hoe ik dat soort IE dingen aanpak? Debuggen

Zet eens een border om je paragraaf, zet eens een border om elk element. Probeer aan de hand daarvan te herleiden waarom de width van je paragraaf de width van je plaatje overneemt.

Voor FF problemen heb je Firebug, IE heeft Firebug lite (of gebruik gewoon wat slim CSS gebruik )

Jouw probleem is trouwens een foutje van jou of Dreamweaver. Spot the error:

HTML:

<div id="foto"> <img src="afbeeldingen/sandra.jpg" alt="Sandra" width="100%"</div>

[ Voor 24% gewijzigd door BtM909 op 11-02-2009 23:26 ]

[Felixje]

BtM909 schreef op woensdag 11 februari 2009 @ 23:22:
Weet je hoe ik dat soort IE dingen aanpak? Debuggen

Zet eens een border om je paragraaf, zet eens een border om elk element. Probeer aan de hand daarvan te herleiden waarom de width van je paragraaf de width van je plaatje overneemt.

Voor FF problemen heb je Firebug, IE heeft Firebug lite (of gebruik gewoon wat slim CSS gebruik )

Jouw probleem is trouwens een foutje van jou of Dreamweaver. Spot the error:

HTML:

<div id="foto"> <img src="afbeeldingen/sandra.jpg" alt="Sandra" width="100%"</div>

Met firebug zag ik ook dat de text in de div foto zat in IE, omdat ik de afsluithaak bij img was vergeten. Firefox behandelt dit dus anders. Maar probleempje opgelost

[Ch3cker]

Ben k helemaal speciaal Internet Explorer aan t downloaden voor m, ben je me voor.. =p.

Dat zou de fout idd best wel eens kunnen zijn =)

[BtM909]

Felixje schreef op woensdag 11 februari 2009 @ 23:33:
[...]

Met firebug zag ik ook dat de text in de div foto zat in IE, omdat ik de afsluithaak bij img was vergeten. Firefox behandelt dit dus anders. Maar probleempje opgelost

Had je voor de gein eens xhtml strict en je pagina echt als xhtml moeten serveren. Dan was de error ook iets duidelijker geworden

---

Even wat algemene punten:
• divalicious all over. Doe dat nou niet; er zijn genoeg HTML elementen die je kan gebruiken en je layout is niet super ingewikkeld waardoor je allerlei wrappers nodig hebt
• waarom xhtml? Doe gewoon HTML4.01 strict, want xhtml wordt helemaal niet eens ondersteund in IE<8 (weet niet of 8 het inmiddels ondersteund )

[Sebazzz]

BtM909 schreef op woensdag 11 februari 2009 @ 23:42:
[...]
• waarom xhtml? Doe gewoon HTML4.01 strict, want xhtml wordt helemaal niet eens ondersteund in IE<8 (weet niet of 8 het inmiddels ondersteund )

Ook niet. Leve de webstandaarden. Hij biedt een bestand aangeboden als application/xhtml+xml gewoon ter download aan. XHTML is voorlopig, of misschien altijd, no-go voor de desktop. Voor mobiele apparaten is het natuurlijk een ander verhaal. Maar wat voor kans zou HTML5 dan wel hebben, want ik ben bang dat je in IE 9 niet op HTML5 support kan rekenen (IE9 moet tegen die tijd wel in ontwikkeling zijn).