webForumDet fria alternativet

Problem med css och explorer gällande Div-element och dess positionering

HTML & CSSur HTML, XHTML & CSS

2 svar · 755 visningar · startad av supercajo

Medlem sedan jan. 2005114 inlägg
Frågan#1

Hej på er Coder's!

Har lyckats få min css att passa alla webbläsare förutom IE. Överraskade?? - Ne tror inte det.

Jag har en container som innehåller två div element.
Dessa två div-element delar på utrymmet.
Det vänstra div-elementet visar en bild.
Det högra elementet visar en rad text.

Så långt inga problem.

Men..

I alla webbläsare visas det högra elementet som innehåller textraden på önskvärt sätt som är helt bredvid det vänstra elementet (bilden) på önskvärd marginal från toppen av containern så att textraden ser ut att vara i centrerad höjd till bilden i det högra elementet.

I Explorer visas det högra div-elementet en bra bit nedanför det vänstra elementet och mer eller mindre nedanför containern fast det inte borde vara möjligt.

Alltså...

Så vill jag att explorer ska visa det högra elementet som alla andra webbläsare, men vet av erfarenhet att det är en drömvärld att få det att fungera felfritt i alla webbläsare.

Men att det skiljer så radikalt förvånade mig så därför undrar jag vad jag missat när IE inte beter sig så som jag vill? Vad ska jag göra för att resultatet ska bli snarlikt som i övriga webbläsare?

PS. Har ändrat samtliga titlar i kodexemplen för att eventuella nybörjare lättare ska förstå felet och kunna åtgärda det :)

#bildOchTextContainer{
    width: 100%;
    background: url('images/bgArrow_1.png') no-repeat;
    background-position: 460px 110px;
    float: left;
}
#Annonsbild{
    width: 400px;
    margin-top: 20px;
    float: left;

}
#Annonstext{
    width: 500px;
    font-size: 22px;
    text-align: center;
    margin-top: 100px;
    margin-left: 50px;
    float: right;
}

Min html-kod där jag anropar mina css-block:

<div id="bildOchTextContaine">
<div id="Annonsbild"><img src="/images/marketing_1.png" /></div>
<div id="Annonstext">Vi kan utveckla din hemsida...</div>
Medlem sedan juni 20019 519 inlägg
#2

Du kan börja med att ta bort float left och width på 100% på bildOchTexttContainer, block element tar 100% av dess förälder så du behöver ju inte köra en float på den i huvudtaget

sen byt plats Annonsbild och AnnonsText, float right element skall vara före float left

Medlem sedan jan. 2005114 inlägg
#3

Tackar så mycket för hjälpen!

137 ms totalt · 3 externa anrop · v20260731065814-full.b746b907
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
134 ms — hämta tråd, inlägg och bilagor (db)