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)

Chidori

2009-02-13 15:43

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

Syke	2009-02-13 17:08

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

taz76

2009-02-13 17:17

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

Chidori

2009-02-13 17:51

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?

Syke	2009-02-13 20:34

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 :)

martine

2009-02-14 21:30

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.

Alex	2009-02-15 03:10

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å.

Chidori

2009-02-15 13:40

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

martine

2009-02-15 17: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?).

Chidori

2009-02-15 18:37

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?

martine

2009-02-15 21:14

Citat:

Ursprungligen postat av Chidori

Citat:

Ursprungligen postat av martine

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?

Nej, ett positionerat element beter sig annorlunda än vanliga divvar. En vanlig div tar exempelvis upp så bred yta som är möjligt utan att gå utöver det element som det befinner sig i - en positionerad div däremot tar endast upp så stor bredd som innehållet kräver (liknande en floatad div).

Det finns ett antal olika typer av visning/beteende:

1. block-element (beter sig som en div)
2. inline-element (beter sig som span)
3. ersatta (replaced) element, t.ex. img och input
4. positionerade element
5. flytande (floated) element
6. inline-block-element (beter sig som inline-element men har en "box" som block-element)
7. tabell-element

Alla dessa typer beter sig i alla fall i någon mån annorlunda och vill man få verklig kontroll sin html/css så kan det löna sig att lära sig skillnaderna.

För positionerade element gäller det framförallt att tänka på i vilken kontext den befinner sig, dvs i förhållande (relativt) till vilket element (med hjälp av position: relative) sätts koordinaterna (top/left/right/bottom). En positionerad div "flyter" inte på något utan bildar en ny positioneringskontext som är lösgjord/avlägsnad från sin urspungliga plats.

Chidori

2009-02-16 00:14

Ok tack för tipsen, lyckades lösa det MEN inte helt :D

Jag gjorde "write an online review and..." till en relativ div och satte in popup rutan in i den och satte left till 0 och top till 25. Men varför skapas det nu ett mellanrum mellan de 2 divarna "See all.." och "write an..."?
http://img21.imageshack.us/img21/812/fel3sg1.jpg

Kod:

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

<p class="lh20"><a href="#">See all 56 customer reviews...</a></p>

</div>

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

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

<!-- Hidden div -->



--



#reviewsdiv7, #reviewsdiv8, #reviewsdiv9{

        border-right:#7F7F7F 1px solid; 

        border-left:#7F7F7F 1px solid; 

        border-bottom:#7F7F7F 1px solid;

}

#reviewsdiv9{

        position:relative;

}

Edit:
Jag löste det genom att definiera höjden på diven.

HMH	2009-02-19 08:43

Citat:

Originally posted by Syke@Feb 13 2009, 21:34
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.

Anledningen är inte så outgrundlig som man kan tro. :)
Det är helt enkelt så att IE "alignar" bilden till baslinjen på texten, dvs det görs plats för g,j,p,q,y osv. (Texten är ju i detta fall obefintlig, men som jag förstår det så tycker Explorer ofta om att skapa textnoder av blanksteg.)
En annan lösning utöver display:block är således att bottenjustera bilden:

Kod:

img { vertical-align: bottom; }

Kan inte säkert säga om det stämmer, men jag misstänker att problemet inte skulle uppstå om man tog bort alla blanksteg/radbryt mellan taggarna i den div som innehåller r_shadow.jpg...?

Alla tider är GMT +2. Klockan är nu 11:27.