WN - Funkar i FF men inte IE, varför?

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Funkar i FF men inte IE, varför? (https://www.wn.se/forum/showthread.php?t=35117)

Jag försöker lägga till en skugga till en bild som jag variera i bredden. Detta funkar alldeles utmärkt så klar i firefox men självklart ska explorer alltid jävlas. Av någon anledning skapar den en extra padding på 3 pixlar neråt och hela skuggeffekten förstörs. Vaför?

Värt att veta är att denna kod ligger i table som ligger i table som ligger i en table. Detta kodavsnitt är så klart inte helt klart men jag vill få bort felet innan jag börjar på detaljer.
Koden jag arbetar med är inte min från början så kan det vara så att något ärver något från någon högre makt om man säger så? Hur kan jag lättast kolla upp det i sådana fall.

Kod:

<div style="float:left">

<div style="background-color:#FFF; background-image:url(images/r_shadow.jpg); background-position:bottom right; background-repeat:no-repeat;">

<div style="background-image:url(images/l_shadow.jpg); background-position:top left; background-repeat:no-repeat; padding:8px;">

<a href="productimages/IMG_0214.JPG" rel="lightbox[bilder]"><img src="images/product2.jpg" alt="" width="120" height="90"></a>

</div>

</div>

<div>

 *Some led strips

</div>

</div>

http://img18.imageshack.us/img18/824/errorvv2.jpg

Sätt bilden till "display: block" så borde det lösa sig.

Kolla så du har rätt doctype.. annars kan det bli ojämna resultat.

Citat:

Originally posted by Syke@Feb 13 2009, 18:08
Sätt bilden till "display: block" så borde det lösa sig.

Tack så hemskt mycket!

Kan du förklara varför det blev som det blev?

Hej,
vad bra att det löste sig.

Kan inte riktigt förklara varför IE gör så. Men det är pga att bilder är inline-element, och internet explorer lägger av någon outgrundlig anledning till ett mellanrum under den raden som innehåller inline-elementet. Jag tror man även kan lösa det genom att sätta en
efter bilden (vilket gör det hela ännu konstigare), men då blir det knas i firefox et al istället.

Min förklaring blir att det helt enkelt är något man måste lära sig och vara medveten om :)

Om det vore så att det låg i en tabell som låg i en tabell som låg i en tabell så vore risken strul naturligvis stor (utöver att det är omodernt). Nu verkar det ju snarare som det handlar om divvar. Värt att hålla isär begreppen.

Tack till Syke för övrigt. Har stött på detta problem ibland men satt margin till minus för IE (vilket också konstigt nog löser problemet) - att ändra display-typ är en bättre lösning.

Citat:

Originally posted by Chidori@Feb 13 2009, 15:43
Hur kan jag lättast kolla upp det i sådana fall.

Tillägget Firebug till Firefox är utmärkt för att kolla vad som ärvs av vad. Finns massa andra sköna finesser i det också.

Tack för så bra tips men nu till mitt nästa problem osom även det hamnat så klart om att explorer inte gör som jag vill att det ska göra medans firefox funkar utmärkt.

Jag försöker göra en div som ska vara dold och sen komma fram när man klickar på en länk. problemet är inte själv upppoppningen utan positionen av den absoluta diven.

Kod:

<div class="grayback" id="reviewsdiv9">

<p class="lh20"><a href="#">Write an online review and share your thoughts with other customers.</a></p>

</div>

<!-- Hidden div -->

<div class="grayback" style="position:absolute; *width:450px; height:180px; z-index:200; background-color:#C8C8C8">

Testing :D

</div>

<!-- Hidden div ends -->

<div class="grayback" id="reviewsdiv4">

<div id="reviewsdiv2">

<div id="reviewsdiv3">

<div id="productLink5">

<div id="productLink6">

<p class="lh20"><a href="#">Upload your own actionshots!</a></p>

</div>

</div>

</div>

</div>

</div>

Som ni ser så lägger sig diven väldigt konstigt till höger fast den ska ligga rakt under. En annan sak att tillägga är att diven flyttar sig till höger om jag gör fönstret bredare men inte kant i kant utan den som procentuellt flyttar sig till höger som om att den är procentuellt inställt att vara i ett visst läge och dessutom ha ett minimum left värde.

Vad kan vara felet?
http://img98.imageshack.us/img98/1240/felbv0.jpg
http://img213.imageshack.us/img213/6162/fel2ji6.jpg

Du har väl satt right: 0px; exempelvis. Det framgår ju varken hur du positionerar divven (med left/right/top/bottom) eller i vilka refernsramar (positioneringen är relativ till vad?).

Citat:

Originally posted by martine@Feb 15 2009, 18:01
Du har väl satt right: 0px; exempelvis. Det framgår ju varken hur du positionerar divven (med left/right/top/bottom) eller i vilka refernsramar (positioneringen är relativ till vad?).

bör den inte med andra ord lägga sig som en vanlig div fast flytandes på de andra?