WN - CSS i IE uppför sig illa!

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - CSS i IE uppför sig illa! (https://www.wn.se/forum/showthread.php?t=37213)

Hej!

Div'en content lägger sig av någon anledning längst nere i botten till vänster
i IE, någon som har en lösning på det åt mig? :( Funkar utmärkt i FF!

Kod:

body {background-color: #bebebe; margin:0px;}



#container {position: fixed; top: 0; left: 0; width: 775px; height: 400%; background-color: #FFFFFF; z-index: 1;}

#header {position: fixed; top: 0; left: 0; width: 775px; height: 85px; background-color: #FFFFFF; z-index: 1;}

        #logo {position: relative; float:left;}

        #lang {position: relative; float:right; top:5px; right:5px; font-family:Verdana; font-size:11px;}

  #bb {position: relative; float:right; top:50px; right:5px; background-color:#c50047; width:570px; height:16px; line-height: 14px; text-align:right; font-family:Verdana; font-size: 10px; color:#ffffff;}

#menu {position: fixed; top: 85px; left: 0; width: 205px; height: 400%; background-color: #FFFFFF; z-index: 1;}

#content {position: fixed; top: 85px; left: 200px; width: 570px; background-color: #FFFFFF; font-family:Verdana; font-size:12px; z-index: 1; border-left:1px solid #c50047; text-indent:5px; min-height:250px;}

Kod:

<div id="container">

<div id="header">

<div id="logo"><img src="/img/logo/logo.png"width="182" height="77" hspace="8" vspace="8" alt="My Site"></div>

<div id="lang">Visit in <a href="?en">English</a> | <a href="?sv">Svenska</a></div>

<div id="bb">Tisdagen den 2 Juni</div>

</div>

<div id="menu">MENU GOES HERE</div>

<div id="content">

#CONTENT#

<br/>

<br/>

</div>

</div>

Kollade inte jättenoga men försök med att minska bredden på #content genom att sätta en egen width för ie. #width: 565px;

Ladda hem Webdeveloper-pluginet för firefox ;) Där finns en finfin funktion.. "Outline Block Level Elements"

Hmm, nepp..
Vart ett litet fel i CSS'en, men att rätta till det hjälpte inte. :(

Här är den nya:

Kod:

body {background-color: #bebebe; margin:0px;}



#container {position: fixed; top: 0; left: 0; width: 775px; height: 400%; background-color: #FFFFFF; z-index: 1;}

#header {position: fixed; top: 0; left: 0; width: 775px; height: 85px; background-color: #FFFFFF; z-index: 1;}

        #logo {position: relative; float:left;}

        #lang {position: relative; float:right; top:5px; right:5px; font-family:Verdana; font-size:11px;}

  #bb {position: relative; float:right; top:50px; right:5px; background-color:#c50047; width:570px; height:16px; line-height: 14px; text-align:right; font-family:Verdana; font-size: 10px; color:#ffffff;}

#menu {position: fixed; top: 85px; left: 0; width: 198px; height: 400%; background-color: #FFFFFF; z-index: 1;}

#content {position: fixed; top: 85px; left: 200px; width: 570px; background-color: #FFFFFF; font-family:Verdana; font-size:12px; z-index: 1; border-left:1px solid #c50047; text-indent:5px; min-height:250px;}

content div'en hamnar dock fortfarande längst ner i IE. :(

Måste du ha position: fixed och sen position: relative? känns som om du gör det krångligare för dig själv ;)

Har inget bra tips eller lösning med bara koden rakt-upp-och-ner sådär dock..

Funderar också varför du har height: 400% ?

Citat:

Originally posted by taz76@Jun 3 2009, 16:51
Funderar också varför du har height: 400% ?

Därför att... öhm... jag har slintit på tangenten. :blink: :rolleyes:

Vet inget annat sätt som inte buggar i någon webbläsare, men som ändå låter lang, logo & bb ändra sig i förhållande till skärmens upplösning, så att dom alltid ligger på rätt plats inom header.

Jag tycker att din positionering känns väldigt bökig. Använd enbart float och height istället och skriv en ren markup.

Måste även tillägga att allt ska inte vara divvar heller. Bara för att någon har sagt att "sluta koda med tabeller, kör med div-taggar" så betyder det inte att varenda rad ska vara fylld med <div id="content"><div id="maincontainer"><div id="mainoutercontainerwrappercontentmain"></div></div></div> osv.

Skulle rek du slänger upp en url till sidan i tråden =)

Vilken doctype har du på sidan?

Nu vet jag inte vilken IE version du snackar om här.. men <=IE6 har inte stöd för fixed positionerade element (IE7 strict mode, om ja inte minns helt fel). Snackar vi också om positionerade element (inte static då, som är default) så är IE6's stackorder prutt.

Gör om gör rätt! visa en screenshot på designen/layouten ifråga så kanske du tom kan få lite hjälp på traven ;)

Det första tipset jag skulle ge dig är att göra en CSS reset så att får samma utgångspunkt i alla browsers, speciellt IE har den fula ovanan att ha default padding etc på vissa element.

Okej, jag har nu lyckats lösa problemet. Men istället har jag nu problem med att jag inte får #container'n att vara 100% oavsett scroll eller inte. Den är bara 100% av webbläsarfönstret, men om texten fortsätter över dem 100% så att jag får en scrollbar så fortsätter bara #container'n dit scrollen börjar. Hoppas ni förstår.

Här är CSS'en:

Kod:

html, body {height: 100%; margin:0; padding:0;}

body {background-color: #bebebe;}



#container {

        height:100%;

        min-height:100%;

        width:775px;

        background-color: #cc0033;

        }



#header {

        position: absolute;

        top: 0;

        left: 0;

        width: 775px;

        height: 85px;

        background-color: #FFFFFF;

        z-index: 1;

        }



        #logo {position: relative; float:left;}

        #lang {position: relative; float:right; top:5px; right:5px; font-family:Verdana; font-size:11px;}

  #bb {position: relative; float:right; top:50px; right:5px; background-color:#c50047; width:570px; height:16px; line-height: 14px; text-align:right; font-family:Verdana; font-size: 10px; color:#ffffff;}



#menu {

        position: absolute;

        top: 85px;

        left: 0;

        width: 198px;

        background-color: #FFFFFF;

        z-index: 1;

        }



#content {

        position: absolute;

        top: 85px;

        left: 200px;

        width: 570px;

        background-color: #ffffff;

        font-family:Verdana;

        font-size:12px;

        z-index: 1;

        border-left:1px solid #c50047;

        text-indent:5px;

        min-height:250px;

        }