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>
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
Tackar så mycket för hjälpen!