webForum webForum sponsras med lina och serverplats av Binero AB

Gå tillbaka   webForum > Utveckling > Webbutveckling > HTML, XHTML & CSS

HTML, XHTML & CSS Forum för diskussioner/frågor kring XHTML, HTML och CSS.

Svar
 
Trådverktyg Visningsalternativ
Äldre 2012-05-03, 00:26   #1
supercajo
Medlem
 
Registrerad: 2005-01-18
Inlägg: 118
Lösningar: 0
Problem med css och explorer gällande Div-element och dess positionering

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
Kod:
#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:

Kod:
<div id="bildOchTextContaine">
<div id="Annonsbild"><img src="/images/marketing_1.png" /></div>
<div id="Annonstext">Vi kan utveckla din hemsida...</div>
__________________
Med vänlig hälsning

---Jonas---
supercajo besöker inte forumet just nu   Svara med citat
Äldre 2012-05-03, 05:54 Markerad som löst av supercajo   #2
voigtann1
Forumvärd
 
voigtann1s avatar
 
Registrerad: 2001-06-14
Ort: Helsingborg
Inlägg: 8 502
Lösningar: 537
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
__________________
"det går inte att lära en gammal norrlänning byta namn på irc" - gammalt kinesiskt uttryck
voigtann1 besöker inte forumet just nu   Svara med citat
Äldre 2012-05-03, 16:37   #3
supercajo
Medlem
 
Registrerad: 2005-01-18
Inlägg: 118
Lösningar: 0
Tackar så mycket för hjälpen!
__________________
Med vänlig hälsning

---Jonas---
supercajo besöker inte forumet just nu   Svara med citat
Svar
webForum > Utveckling > Webbutveckling > HTML, XHTML & CSS

Trådverktyg
Visningsalternativ

Forumregler
Du får inte posta nya trådar
Du får inte posta svar
Du får inte bifoga filer
Du får inte redigera dina inlägg

BB-kod är
Smilies är
[IMG]-kod är av
HTML-kod är av

Forumhopp


Alla tider är i GMT +1. Klockan är nu 01:14.


Powered by: vBulletin Version 3.8.6
Copyright © webForum