Hej!
Okej, ska se om jag kan förklara mitt problem.. Först och främst, jag försöker lägga in detta: SlidingDoors på en sida (Koden postad längre ner). Jag har tidigare använt mig av koden, men då uppstod inte detta problem.
Problemet:
Koden ser ungefär ut så här:
<div id="toppen">
<div id="header"> (list-apart)
<div id="texten">
Om ni kollar in list-apart koden så märker ni att #header har en float:left. Detta för att kunna placera elementen inuti #header rätt.
Grejen är att mitt element som ligger under #header, alltså #texten lägger sig till höger om #header, även om #header har width:100%. Resultatet blir alltså en lång scrollbar nertill, plus att alltså hela sidan hamnar utanför skärmen (till höger). Jag lyckades få det att funka på något sätt genom att lägga till ett nytt element #space mellan #header och #texten och sätta det till en viss höjd (50px).
Jag noterar då att elementet börjar på samma ställe som #header men lägger sig bakom. Detta är ju naturligt eftersom "float" används. Problemet är att IE inte verkar köra så utan den startar #space efter #header och då blir ju mellanrummet mellan #header och #texten olika på IE/Mozilla. Plus att hela den här #space grejen känns ganska dum. Man borde kunna fixa utan den känns det som.
Jag förstår mig fortfarande inte på floats, verkar som om de beter sig olika hela tiden.. :) Hoppas någon vet vad jag yrar om. Slutligen, koden:
html
<body>
<div id="wrapper">
<div id="displayWindow">
<img src="images/dspWinDummy.jpg"/>
</div>
<div id="navMenu">
<ul>
<li><a href="#">List #1</a></li>
<li id="current"><a href="#">List #2</a></li>
<li><a href="#">List #3</a></li>
</ul>
</div>
<div id="menuSpacer"></div>
<div id="textContainer">
Bla bla bla
</div>
</div>
</body>
css
html,body {
margin:10px;
background-image:url(../images/bgBody.jpg);
font-family:verdana;
font-size:10px;
color:#000;
}
#wrapper {
position:relative;
margin:auto;
width:750px;
height:auto;
padding-top:3px;
padding-bottom:20px;
background-color:#fff;
}
#displayWindow {
position:relative;
width:744px;
height:310px;
top:0px;
margin:auto;
border:0px solid #CFD9CF;
}
#menuSpacer {
/** Fixen för float-grejen **/
background-color:#fff;
height:35px;
}
#textContainer {
position:relative;
top:10px;
width:700px;
margin:auto;
}
/** List-Apart kod **/
#navMenu {
float:left;
width:100%;
background:#DAE0D2 url("../images/menuBg.gif") repeat-x bottom;
}
#navMenu ul {
margin:0;
padding:3px 3px 0;
list-style:none;
}
#navMenu li {
float:left;
background:url("../images/menuLeft.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#navMenu a {
float:left;
display:block;
background:url("../images/menuRight.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#406644;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#navMenu a {float:none;}
/* End IE5-Mac hack */
#navMenu a:hover {color:#333;}
#navMenu #current {
background-image:url("../images/menuLeftOn.gif");
}
#navMenu #current a {
background-image:url("../images/menuRightOn.gif");
color:#333;
padding-bottom:5px;
}