Css positionering, relativ istället för absolut

Länk till sidan som strular: Eagle Ranch - Mare Barn

På sidan ovan så har jag som ni ser en "boxrad", eller en lång rad av boxbilder. Ett av stona i boxarna (eller en av boxbilderna) har ett föl och det visar jag med att ha en liten fölbild som ligger ovanpå mammans boxbild (bilden fungerar även som en länk till fölets sida, vilket är varför jag inte ritar dit fölet direkt på mammans bild).

Koden för fölbilden ser ut så här:

<div style="position: absolute; width: 50px; height: 50px; z-index: 100; left: 147px; top: 273px; background-image: url('foal-snowflake.gif')" id="lager6"></div>

Koden ligger precis före koden för tabellen där alla boxbilderna ligger i, har även testat att lägga koden precis före mammans boxbild, inne i tabellen.

Det fungerar jättebra i Safari, Chrome, Opera, Netscape, Flock och Firefox. Laddade ner dem nyligen för att testa hemsidan i olika webbläsare och såg att fölet var väldigt högt upp. Jag hade faktiskt satt fölet väldigt högt upp, just där alla dessa webbläsare visade det, eftersom explorer satte den rätt när den var så där högt upp. Därför fixade jag till det och placerade (jag använder Ms Frontpage bör nämnas) fölbilden där den skulle vara direkt i frontpage. Och då visade alla webbläsarna bilden helt rätt, med undantag för explorer som satte bilden under mammans bild som om den vorit relativ (vet däremot inte om den verkligen blev relativ eller om den råkade hamna där eftersom explorer tydligen sänker ner absoluta bilder).

Blev lite mycket text nu kanske men... :P
Så alltså, mitt problem är att fölbilden inte placeras där den ska (uppepå mammans boxbild, Unicorn) i Internet Explorer, utan istället under mammans boxbild. I alla andra webbläsare jag testat med fungerar det däremot perfekt; fölbilden visas exakt där jag vill ha den...

Vad är felet? Har jag missat något i koden? Behöver förslag på vad jag kan göra för att få det att fungera i explorer också, Har testat med allt möjligt nu känns det som >.>

Börja med att lägga in en DOCTYPE, det brukar hjälpa en hel del.

Åh tack! Det fungerade! :D

Men åh... upptäckte nu att fölbilden följer med när man scrollar åt sidan, och stannar inte på samma plats där den ska <.<
Hur ska man fixa det? Har själv ingen aning x_x

det tolkar jag som att fölbilden är positionerad i förhållande till hela sidan, inte den "box" den borde ligga i

Jo, det verkar ju så, men hur ska man göra för att den ska positioneras i förhållande med boxen? :P

skriva korrekt HTML ;)
men om en div skall ligga absolut i förhållande till en annan så tror jag detta är rätt väg att gå

<style>
.BoxDiv{position:relative;
width:150px; height 150px;
}
.FoelBild{
position:absolute;
Top:100px
Left:100px
width:50px;
height:50px;

</style>

<div class="BoxDiv">
<div class="FoelBild">
</div>
</div>

helt otestat dock
jag orkade inte riktigt kolla ordentligt på din befintliga källkod eftersom den var minst sagt rörig. Av det jag såg så verkar det som att du skulle vinna en hel del på att rensa ut alla <font> ur koden samt försöka flytta ut så mycket av din css som möjligt till en separat fil

Som jag faktiskt nämnde i första meddelandet så använder jag frontpage = det är inte jag som har rört till, det är frontpage, och jag har ingen vidare lust att sitta och rätta till det när jag ändå aldrig är in där och grejjar mer än några småfixar, och så det här då ;)

Testade lite med koden du gav mig, vet inte riktigt hur du hade tänkt att jag skulle placera den och så, men med det jag försökte (sätta fölbildskoden mellan divtaggarna, sätta classerna på fölbildsdiven och mammans box och lite diverse annat i den stilen) så blev det antingen ingen skillnad eller att boxbilden följde med fölbilden när man scrollade.

Det märks nog att jag inte hållt på med css på väldigt länge :x

Det är det som är problemet med frontpage, iaf i äldre versioner. Programmet lägger till en massa kod så det ser ut som programmet "vill" vilket gör att man får sitta och leta i sin egen kod

Jag skulle nog löst det så här

<table border="0" width="100%">
  <tr>
    <td>
       <div class="class="BoxDiv">
		<a href="chaybra/002.htm"><img border="0" src="box-unicorn.jpg" width="200" height="267"></a>
       <div class="FoelBild">
           <a href="chaybra/003.htm"><img src="foal-snowflake.gif" /></a>
        </div>
</td>
	</tr>
</table>

Din tabell med en cell känns som att den borde kunna tas bort helt

Nope, tabellen kan inte tas bort. Jag var tvungen att lägga till den eftersom boxbilderna annars läggdes nedanför varandra (eftersom de var bredare än divboxen), och jag ville ha en horizontell scroll. Så den är inte ett dugg onödig ^^,

Och jag testade det där, men det funkar inte bättre :(

EDIT: Jag testade nu med att göra en riktig iframe istället, det funkar perfekt! :D

Däremot så måste jag fråga hur man får en egen färg på scrollern till en iframe, det funkar inte med de style-attributen jag testat med o_O

Natheyecea skrev:

Däremot så måste jag fråga hur man får en egen färg på scrollern till en iframe, det funkar inte med de style-attributen jag testat med o_O

Hmm... wF:s sökfunktion är din vän :bire

http://www.webforum.nu/showthread.php?s=&postid=803660#post803660 + att du lägger scrollbar-CSSen i varje fil som kan laddas in i iframen ;)

Testa: http://member.webforum.nu/2241/colored_iframe.html (färgning av rullister funkar enbart i MSIE ;) )

Åh, tack, hade helt glömt bort att det var så man skulle göra haha x)

Nu funkar sidan som den ska i alla fall (förutom att alla webbläsarna, förutom explorer, sätter bilden en aning för långt ner, men det gör inte så mycket), det är bara opera som dummar sig, men den har jag ingen lust att bry mig om :P

Tack så hemskt mycket alla! :birp