Argh! Hvorfor klarer ikke IE å vise websider skikkelig?

[Lurifaksen]

Jeg vet ikke hva jeg gjør galt, men hver gang jeg skal til å begynne å endre på skins og bilder på websider, blir resultatet mongo eller delvis feil når siden vises i Internet Explorer.

 

Opera derimot, viser den selvsagt helt perfekt.

 

Se her: http://test.unlock.no

 

Noen som kan foklare hvordan jeg kan få fikset hjørnene på "rammen" slik at de bli "kompatibel" med IE også?

 

Her er utdrag fra koden som lager tabellene:

echo "<div class="spacer">

<table cellpadding="0" cellspacing="0" border="0" >

<tr>

<td class="toplf"><img src="images/blank.gif" width="100%" height="100%" alt="" style="display: block;"/></td>

<td class="topcr"><img src="images/blank.gif" width="1" height="12" alt="" style="display: block;"/></td>

<td class="toprt"><img src="images/blank.gif" width="100%" height="100%" alt="" style="display: block;"/></td>

</tr>

<tr>

<td class="bodylt"><img src="images/blank.gif" width="11" height="1" alt="" style="display: block;"/></td>

<td class="bodycr">";

}



function closetable(){

echo "</td>

<td class="bodyrt"><img src="images/blank.gif" width="11" height="1" alt="" style="display: block;"/></td>

</tr>

<tr>

<td class="bottomlt"><img src="images/blank.gif" width="100%" height="100%" alt="" style="display: block;"/></td>

<td class="bottomcr"><img src="images/blank.gif" width="1" height="12" alt="" style="display: block;"/></td>

<td class="bottomrt"><img src="images/blank.gif" width="100%" height="100%" alt="" style="display: block;"/></td>

</tr>

</table>

</div>";

 

Som dere ser, er stikkordet her høyden og bredden på bildene. Jeg har satt det til 100% - når jeg satt det til den størrelsen bildene egentlig er, kom det bare en merkelig firkant rundt alle bildene i hjørnene, slik som på dette bildet:

[yNx]

...Fordi Opera følger standarden, mens IE følger M$ standarden, altså Frontpage spagettikode.

 

Edit Har du prøvd å IKKE definere lengde og bredde på bildene, da?

[Lurifaksen]

Ved å ikke definere lengde/bredde, ble resultatet ganske artig i IE:

 

 

Bildet finnes ikke, men det vises allikevel liksom... :o

I opera vises ingen av bildene.

[Dikky]

 

Funker btw 100% perfekt med Firebird

[Lurifaksen]

 

Funker btw 100% perfekt med Firebird

 

Det med å ikke definere høyde/bredde testet jeg kun lokalt... Skulle ikke forundre meg om det er kun IE som ikke klarer å vise den siden som ligger på linken over...

[Lurifaksen]

 

Må nesten le...

 

Nå har jeg justert på masse rart, inkludert instillinger i css filen som jeg tror var grunnen til at firkantene oppstod. Prøvde i Opera, og YES! Det funker!

 

Så prøvde jeg i IE. Resultatet kan dere se selv...

http://test.unlock.no

 

Skjønner ikke hvorfor akkurat de to bildene skal lage problemer nå, siden de er jo identisk satt opp som sidene av rammen.

(top.png/bottom.png og right.png/left.png)

[yNx]

Hva med....

 

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td colspan="3"><img scr="top.png"></td>

</tr>

<tr>

<td><img src="left.png"></td>

<td width="100">link1<br>

link2<br>

link3<br>

link4<br>

osv...<br>

</td>

<td><img src="right.png"></td>

</tr>

<tr>

<td colspan="3"><img src="bottom.png"></td>

</tr>

</table>

 

Tilpassing til css og bredden må du justere selv. :wink:

[funkweb]

Sjekke CSS din.

 

f.eks legge til

 

.toplf{

width: 11px;

background-repeat: no-repeat;

background-image: url(topleft.png);

background-position: right;

}

 

osv... (Det vil si bodylt, bottomlt)

 

Så vil du merke noe rart med de i midten.

lol da jeg oppdaget det.

 

Den ene er 7 px og andre er 11px.

Ta og slett left.png

Kopier right.png til left.png og rotate den 180 grader.

 

Voila.

[Lurifaksen]

yNx: Det ble litt feil...

Var ikke akkurat sånn jeg hadde tenkt til, for da må det justeres ganske masse i koden...

 

funkweb:

 

Vel, det flyttet litt rundt på bildene, og bildene ble litt feiljustert. Feiljusteringen kan jo fikses, men jeg gidder ikke å begynne med det, for det pokkers "gapet" øverst og nederst er jo der fremdeles!

 

Grunnen til at left.png var større enn right.png, var fordi det passet ikke helt, og det var den enkleste måten å fikse det på... (har fikset det nå)

[funkweb]

funkweb:

 

Vel, det flyttet litt rundt på bildene, og bildene ble litt feiljustert. Feiljusteringen kan jo fikses, men jeg gidder ikke å begynne med det, for det pokkers "gapet" øverst og nederst er jo der fremdeles!

 

Grunnen til at left.png var større enn right.png, var fordi det passet ikke helt, og det var den enkleste måten å fikse det på... (har fikset det nå)

 

Well, da gjorde du noe galt.. alt det jeg sa tidligere..fikset alt da.

Hos meg ser det ihvertfall bra ut.

http://home.broadpark.no/~tbla/

[Lurifaksen]

ARGH!!

 

Nå fikk jeg vekk det gapet, men nå er høyre og venstre bildene feiljustert. Og det ser forskjellig ut i opera og IE.

 

Nå bruker jeg din css fil, så jeg antar det er php filen min det er noe feil i.

[funkweb]

Mente du at oppe i høyre og venstre er for langt ? i forhold til resten ?

[Duke Soforth]

Hmmmm, dette ser totalt sett unødig tungvint ut... hvorfor basere seg på et sånt totalt virvar av tabeller???? For egen del synes jeg vel den layout du har valgt antagelig kan gjøres betydelig lettere med layers og posisjonering i CSS, ta for eksempel en kikk på denne siden for basis-css med tre kolonner, heading og footer. La hver "boks" være en egen div-layer i sin respektive kolonne. Kanten rundt som du nå gjør med bilder kan enkelt gjøres i css med border, både Mozilla og Opera lar deg lage borders med avrundede hjørner direkte fra css, dessverre er dette ikke støttet i en steinalderbrowser som IE/Win. (---> så da kan runde hjørner være en bonus til fornuftige web-brukere

 

Et tips dog: IE/Win får ofte litt problemer når den skal rendre sider dersom du inkluderer <?xml ...> prologen. Forsøk å slette denne, det har ingen betydning for Opera og Mozilla.

 

Ellers kudos for at du forsøker å gjøre siden i xhtml1.1... (selv om den ikke validerer riktig ennå)