[IE 6] Site doet raar in IE 6 - Softwareontwikkeling

zondag 22 februari 2009 17:02

Acties:

0 Henk 'm!

Topicstarter

Hallo,

Ik ben bezig deze site te hermaken: http://www.dezwaluw.org/
Naar dit: (link offline)

Hij werkt goed in FF en IE 7, maar in IE 6 komt de content een heel stuk lager dan verwacht. De pagina is in XHTML 1.0 Strict:

HTML:

1
2
3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
...

Maar indien ik dit weglaat, komt de content ook in IE 7 een stuk lager. Ik heb totaal geen idee hoe dit komt, dus hopelijk zien jullie wat ik verkeerd doe

Thx!

[ Voor 6% gewijzigd door lensy op 24-02-2009 12:25 ]

zondag 22 februari 2009 17:27

Acties:

0 Henk 'm!

Verwijderd

Is het geen min-height probleem?

http://www.search-this.co...css-min-height-explained/

"Although IE (Internet Explorer) 5 and 6 don't understand the CSS min-height property they can easily be made to understand it by simply using height instead."

zondag 22 februari 2009 17:33

Acties:

0 Henk 'm!

lensy

Topicstarter

Heb ik al eens gechecked, maar dat is het niet

[ Voor 9% gewijzigd door lensy op 22-02-2009 17:33 ]

zondag 22 februari 2009 18:56

Acties:

0 Henk 'm!

tonyisgaaf

IE6 plaatst de content onder div#menu en div#logo. Die staan nl. stiekem ergens anders dan waar jij ze verwacht... Check maar eens in Firefox of Safari.
Kortgezegd is de CSS een beetje een zooitje. Niet qua opbouw en validatie natuurlijk, maar qua logica en voorspelbaar browser gedrag.
Je doet een aantal zaken anders dan ik ze zou doen:

Je centreert de div#container met "position: absolute" en een negatieve margin, waardoor de hoogte van je body effectief nul wordt. Centreren kan dan beter met "position: relative" (oftewel default) en "margin: 0 auto".
Waarom is je div#middle gefloat?
Waarom de div#menu in div#middle gepositioneerd en daarin vervolgens de ul#nav1 weer m.b.v. een negatieve top-margin over de div#head gepositioneerd (en gefloat?)?
Waarom is div#content met een negatieve top relatief gepositioneerd?

Wat je probeert te maken is een simpele tweekoloms site met header en footer. Alhoewel het niet eens "faux columns" zijn, is dat toch een mooie term om te beginnen met zoeken.

Mijn advies: houd je HTML, maar begin opnieuw met de CSS. Enige wijziging in de HTML zou het verplaatsen van het #menu de ul#nav1 naar de #header zijn.
Probeer te denken in containers. Container over de volle breedte van de parent container => standaard DIV gedrag. Meerdere containers naast elkaar => width + eventuele float. Vergeet dan niet de parent container mee te laten rekken met de gefloate content => overflow: (hidden|auto).

NL Weerradar widget Euro Stocks widget Brandstofprijzen widget voor 's Dashboard

maandag 23 februari 2009 01:12

Acties:

0 Henk 'm!

lensy

Topicstarter

Bedankt voor de vele tips, heb de CSS nu wat opgekuist (had veel zitten prutsen).
De content komt echter nog altijd lager, ook al is mijn code zoals er hier staat: http://www.gigadesign.be/2006/03/faux-columns-maken/
De Content wordt dus nog altijd onder het menu geplakt, waarom snap ik echter niet...

(link offline)

Cascading Stylesheet:

#middle {
    background: url(img/content.jpg) repeat-y;
    min-height: 450px;
    width: 981px;
    overflow: (hidden|auto);
}

#menu {
    width: 200px;
    margin-left: 20px;
}

#content {
    margin-left: 275px;
    width: 700px;
}

[ Voor 9% gewijzigd door lensy op 24-02-2009 12:25 ]

maandag 23 februari 2009 10:26

Acties:

0 Henk 'm!

Da Weef

Ik denk dat je ipv de bovenstaande css je beter zoiets kunt gebruiken:

Cascading Stylesheet:

#menu {
    float:left;
    width: 200px;
    margin-left: 20px;
}

#content {
    float:right;
    width: 700px;
}

Verder kan de afwijking met IE ermee te maken hebben dat lists (waarmee je het menu opbouwt) standaard marges en paddings meekrijgen die in IE afwijken. Ik reset standaard alle margins en paddings, waarna je ze zelf in kunt stellen (zie ook: http://www.computerfaq.be/css/css-reset-bestand/). Ik denk dat je even moet spelen met de marges of paddings van #nav2...

.

maandag 23 februari 2009 12:22

Acties:

0 Henk 'm!

lensy

Topicstarter

Heb float eens geprobeerd, blijft hetzelfde probleem bij IE 6: (link offline)

Ik zie wel niet hoe de marges en paddings van de lists ervoor zorgen dat de content onder het menu komt... Hoe bedoel je precies?

Iemand anders die wat ideeën heeft?

[ Voor 8% gewijzigd door lensy op 24-02-2009 12:26 ]

maandag 23 februari 2009 12:34

Acties:

0 Henk 'm!

Da Weef

De float was geen oplossing voor je probleem, maar is in dit geval denk ik een mooiere oplossing. De oplossing zit in de marges van je list. Bovendien is het sowieso mooier om bij lists zelf je marges en paddings te zetten, zodat de site er cross-browser hetzelfde uitziet...

Cascading Stylesheet:

ul#nav2 {
    margin:0px;
    padding-left:0px;
}

.

maandag 23 februari 2009 12:42

Acties:

0 Henk 'm!

lensy

Topicstarter

Ja zal ik doen, maar dat lost het niet op: (link offline)

[ Voor 30% gewijzigd door lensy op 24-02-2009 12:26 ]

maandag 23 februari 2009 13:39

Acties:

0 Henk 'm!

Da Weef

En als je de menu div links float?

.

dinsdag 24 februari 2009 00:59

Acties:

0 Henk 'm!

lensy

Topicstarter

Heb ik hier al geprobeerd zei ik toch

(link offline)

Nog ideeën? Echt heel raar, uiteindelijk gaat het iets heel stom zijn zeker?

[ Voor 14% gewijzigd door lensy op 24-02-2009 12:26 ]

dinsdag 24 februari 2009 10:17

Acties:

0 Henk 'm!

Da Weef

Jeetje inderdaad echt té kneuzig...

De tabel in de content div is breder dan de 700px die je deze div eigenlijk wilt laten zijn... Ik denk dat je geen rekening hebt gehouden met de standaard cell-spacing... (ook daarom gebruik ik graag een css-reset)

Was er een beetje vanuit gegaan dat je zelf wel had gechecked of het aan (de breedte van) de tabel lag...

Kortom, verwijder of verminder cellspacing of cellpadding, of maakt de plaatjes wat smaller...

Ps. Layout hoort in de css, ook (of beter gezegd juist) die van tabellen...

.

dinsdag 24 februari 2009 12:24

Acties:

0 Henk 'm!

lensy

Topicstarter

Hmmm daar lag het idd aan, zoals verwacht iets stoms

Thx!

dinsdag 24 februari 2009 12:25

Acties:

0 Henk 'm!

Guillome

test

Wees niet bang als je site niet werkt in IE6:
http://webwereld.nl/nieuw...aren-oorlog-aan-ie-6.html

If then else matters! - I5 12600KF, Asus Tuf GT501, Asus Tuf OC 3080, Asus Tuf Gaming H670 Pro, 48GB, Corsair RM850X PSU, SN850 1TB, Arctic Liquid Freezer 280, ASUS RT-AX1800U router

dinsdag 24 februari 2009 12:43

Acties:

0 Henk 'm!

Da Weef

Guillome schreef op dinsdag 24 februari 2009 @ 12:25:
Wees niet bang als je site niet werkt in IE6:
http://webwereld.nl/nieuw...aren-oorlog-aan-ie-6.html

Volgens mij moet je juist wel bang worden als je dat artikel leest... Nog steeds een vijfde van de internetters wereldwijd gebruikt blijkbaar IE6, dat is een niet te verwaarlozen deel lijkt me. (overigens is dit deel in Nederland iets kleiner)

Leuk dat er nu drie Noorse sites actief advies geven om up te graden, maar ik heb een donkerbruin vermoeden dat weinig effect zal hebben, zeker m.b.t. tot gebruikers in Nederland

.

dinsdag 24 februari 2009 12:49

Acties:

0 Henk 'm!

Guillome

test

Dat zal niet lang meer duren

If then else matters! - I5 12600KF, Asus Tuf GT501, Asus Tuf OC 3080, Asus Tuf Gaming H670 Pro, 48GB, Corsair RM850X PSU, SN850 1TB, Arctic Liquid Freezer 280, ASUS RT-AX1800U router

dinsdag 24 februari 2009 13:12

Acties:

0 Henk 'm!

RainerSGF

Kijk toch nog maar eens naar hetgeen 'tonyisgaaf' heeft gepost, volgens mij zit daar toch de oplossing in.
Probeer zeker eens wat te experimenteren met de 'margin'-waarden + volgens mij is het het best werken met twee afzonderlijke style-sheets (CSS) --> één voor firefox enzo, en één voor expliciet internet explorer (waarmee je dus met problemen kampt).

In je html-pagina's ga je dan gebruik maken van het volgende:

Systeem - I'm learning, I learn it from a book :)

dinsdag 24 februari 2009 13:34

Acties:

0 Henk 'm!

lensy

Topicstarter

Het is opgelost hoor RainerSGF

En ik ben niet echt een fan van 2 afzonderlijke style sheets...

Ook van de IE gebruikers die mijn site bezoeken gebruikt er nog 1/5 IE 6.0