IE5, XHTML, CSS2 -> strul

Hej!
Håller på och utvecklar en hemsida som fungerar klockrent i ex. IE6. Men i IE5 så går allt åt skogen. Lagren blir för långa! Är det något man kan fixa på något sätt, för annars ligger jag väldigt illa till :l

Siten ifråga
Screen shots från IE5 (tack visslaren)

Lite OT:

Det är väl inte så många som använder IE5 fortfarande? :q
Enligt w3 var det ca 30% i juli förra året, och jag har för mig att den siffran har sjunkigt rejält sedan dess.

Har tyvärr ingen lösning på ditt problem :(

Men här är en artikel som beskriver hur du kan ladda ner och köra en MSIE5 parallellt med din MSIE6:a så att du kan testa själv iallafall...

Kan trösta dig med att problemet inte dyker upp i MSIE5.5 iallafall :)

I ditt style sheet har du skrivit

.box-topleft,
.box-top,
.box-topright,
.box-left,
.box-right,
.box-bottomleft,
.box-bottom,
.box-bottomright {
	width: 100%;
	height: 100%;
}

Jag förstår inte varför du har skrivit så, och om du plockar bort det försvinner problemet med "höga divar" i IE 5.
Och sidan fungerar fortfarande i Firebird 0.7, IE 6 och Opera 7 :)

dectgap skrev:

I ditt style sheet har du skrivit

.box-topleft,
.box-top,
.box-topright,
.box-left,
.box-right,
.box-bottomleft,
.box-bottom,
.box-bottomright {
	width: 100%;
	height: 100%;
}

Jag förstår inte varför du har skrivit så, och om du plockar bort det försvinner problemet med "höga divar" i IE 5.
Och sidan fungerar fortfarande i Firebird 0.7, IE 6 och Opera 7 :)

Tyvärr inte!
Det strular i IE6 (ev. IE5 också?) på vissa av boxarna. Se bifogad bild.

Josef skrev:

Lite OT:

Det är väl inte så många som använder IE5 fortfarande? :q
Enligt w3 var det ca 30% i juli förra året, och jag har för mig att den siffran har sjunkigt rejält sedan dess.

Mjo, i min målgrupp är det nog en hel del som sitter med lite äldre browsers.

dectgap > Nu verkar det fungera :e
Tar man bort height-attributet ur det kodstycket du anmärkte på så fungerar det (tycks det iaf). Tar man bort width-attributet också, så blir det dock som på bilden ovan.

tack!

Lika bra att ta nästa problem på en gång. I IE5 så blir inte länkar med classen "menulink" indragna, vilket de gör i de andra läsarna jag testat med. Kan man göra något åt det utan att hårdkoda in blanksteg för att få dem indenterade?

<div id="menuroot">
	<a href="#" onclick="return sw('personal',this);" class="menuChoice">» Personal</a><br />
	<div id="personal" class="menu">
		<a href="#" class="menulink">Skolledning</a><br />
		<a href="#" class="menulink">Lärare</a><br />
		<a href="#" class="menulink">Elevvård - SYV</a><br />
		<a href="#" class="menulink">Bibliotek</a><br />
		<a href="#" class="menulink">Administration</a><br />
		<a href="#" class="menulink">Serviceteam</a><br />
	</div>
	<a href="#" class="menulink">Länkar</a>
</div>

<!-- i Stilmallen-->

.menu {
	padding-left: 5px;
}
.menulink {
	margin-left: 11px;
}

De länkarna som ligger i div-lagret "personal" blir visserligen indenterade, men bara 5px, de borde bli indenterade totalt 16px (5+11).

margins och paddings är inte MSIE5:s starka sida direkt...
Gissar att den inte gillar marginaler på ett inline-element (a).

Vad händer om du sätter

display:block

på a.menulink ?

Förresten...
Om du nu ändå bara håller på och "knäpper buggar" för IE5 och börjar specialkoda för att gå förbi egenheter/bugar i den, så slipper du mycket elände med att dina fixar för IE5 också passar på att sabba för andra webbläsare om du lägger specialfnulen inom en villkorlig kommentar i HTML-koden såhär:

<!--[if IE 5]>
<style type="text/css">
a.menulink {display:block}
</style>
<![endif]-->

Lägg den efter taggarna som länkar in din ordinarie stilmall bara ;)

Dokumentation för "villkorliga kommentarer" - se http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp

jarvklo skrev:

Vad händer om du sätter

display:block

på a.menulink ?

Nja, visserligen blev länkarna indenterade, men samtidigt fick de en stor margin runt omkring sig (typ en tom rad ovanför, och en under länken). Provade att leka lite med margins, men det blev inte riktigt klokt. Tror jag helt enkelt skiter i den lilla designbuggen, det är ju trots allt inte hela världen. :)

Villkorliga kommentarer var fräsigt, man lär sig något nytt varje dag. Tack :)

Peeer, du skulle kunna använda en lista istället - det låter som en ypperlig idé i detta fallet.

Att du fick tomma rader ovanför och under länkarna beror på <br>-taggarna, som inte behövs om du anger display: block på länkarna.

Men som sagt: testa att använda en lista istället.
Lite (eller snarare "mycket") inspiration kan du få här:
http://css.maxdesign.com.au/listamatic/