HTML & CSSur HTML, XHTML & CSS
11 svar · 829 visningar · startad av Hammarstrom87
Hej!
Blir inte klok på detta. Min container-div vägrar att följa med innehållet.
I IE funkar det men inte i FF.
-----Index.asp--------------------------------------------
\<!-- Container --\>
\<div id="container"\>
\<!-- Main content --\>
\<br /\>
\<!--#Include File="globalMain.asp"--\>
\<!-- End Container --\>
\</div\>
-----Style.css--------------------------------------------
BODY
{
background-color: #5b842d;
background-image: url(img/ljifBg.jpg);
background-attachment:fixed;
background-repeat: repeat-x;
background-position: center top;
background-repeat: repeat-y;
font-family: verdana;
font-size: 11px;
color: #3f3f3f;
line-height: 16px;
margin: 0px;
font-size: 12px;
line-height: 18px;
}
a:link { text-decoration: none; color: #fff}
a:visited { text-decoration: none; color: #fff}
a:active { text-decoration: none; color: #fff}
a:hover { text-decoration: none; color: #f5e056}
.menyBtn {color: #fff; font-weight: bold}
#container
{
width: 1024px;
height: 100%
min-height: 100%;
position: relative;
left: 50%;
margin-left: -512px;
margin-right: auto;
background-color: #ffffff;
}
--------------------------------------------------------------
Någon som kan hjälpa till?
Vad menar du med följa med?
Du har uttryckligen sagt till att container skall vara 1024px bred och fylla hela wievporten på höjden till 100%
Inte så mycket utrymme för att följa något, skulle jag säga. Vill du att diven skall shrink-wrappa till innehållet?
Vilken doctype använder du dig av?
headbug, ja exakt så menar jag. Som det är nu täcker diven 1/3 av fönstret.
voigtann1: Strict.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Gjorde om din CSS och la upp ett test:
http://voigt.se/sandbox/wf/Hammarstrom87/100_height/
Är det något i stil med detta du är ute efter? (Få nog göra en IE CSS fil för att lösa eventuella problem med IE).
Notera också att din height i din orginal CSS saknar en avslutande tagg ( ; )
Fint, så långt är det ju kanon.. Men det blir fortfarande så att när texten blir längre en sidan (100%) så följer inte diven med, varken i FF eller IE.
Jag testade att lägga till:
html,body #container {height: auto}
Men detta resulterade bara positivt resultat i IE.
Några fler förslag?
kör med min-height: i container, och gör en IE fix, ny fil på samma länk som ovan.
Okej, jag har hittat problemet.. Men det verkar inte vara nåt roligt sådant.
För det är när jag lägger en div med float: left inuti containern som det blir problem.
Ett stort problem eftersom jag skulle behöva 3st div i bredd.
Men hur kan det komma sig.. i IE händer det som sagt inte.
Idéer?
Du få nog komma med din renderade kod. Att placera divar med float left påverkar inte detta direkt, men du kan prova lägga en extra div/br med en css med clear: both;
Okej, får inte till det. Här är hela koden.
Style.css
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
BODY
{
background: url(img/ljifBg.jpg) fixed repeat-y center top #5b842d;
font-family: verdana;
font-size: 11px;
color: #3f3f3f;
font-size: 11px;
line-height: 15px;
}
a:link { text-decoration: none; color: #fff}
a:visited { text-decoration: none; color: #fff}
a:active { text-decoration: none; color: #fff}
a:hover { text-decoration: none; color: #f5e056}
.menyBtn {color: #fff; font-weight: bold}
#container
{
width: 1024px;
min-height: 100%;
margin: 0 auto;
background: #ffffff;
border-left: 1px solid #5b842d; border-right: 1px solid #5b842d
}
#banner_loggo
{
float: left;
width: 445px;
height: 156px;
background-color: #fff;
background: url(img/banner_loggo.jpg) no-repeat;
}
#banner_nextmatch
{
float: left;
margin-left: -1px;
width: 384px;
height: 156px;
background-color: #fff;
background: url(img/banner_nextmatch.jpg) no-repeat;
}
#banner_meny
{
clear: both;
width: 802px;
height: 36px;
margin-left: 29px; margin-bottom: 0px;
background-color: #fff;
background: url(img/banner_meny.jpg) no-repeat;
}
#banner_login
{
background: url(img/login_bg.jpg) no-repeat;
width: 155px;
height: 193px;
padding: 15px; padding-top: 30px;
}
#femSenaste
{
float: left;
margin-right: 17px;
width: 300px;
height: auto; min-height: 200px; _height: 200px;
padding: 10px; padding-right: 0px;
background: url(img/aktuellt_resultat_bg.jpg) no-repeat;
}
index.asp
<body>
<!-- Container -->
<div id="container">
<!-- Contains banner area -->
<div style="width: 830px; margin: 0px; float: left;">
<!-- Logotype -->
<div id="banner_loggo"></div>
<!-- Länk på loggo -->
<a href="index.asp" style="border: 0px solid"><div style="cursor:pointer; position: absolute; width: 110px; height: 115px; margin-left: 60px; margin-top: 24px"></div></a>
<!-- Next match -->
<div id="banner_nextmatch">
<!--#include file="inc/nextmatch.asp"-->
</div>
<!-- Meny -->
<div id="banner_meny">
<!--#include file="inc/meny.asp"-->
</div>
<!-- Ends banner area -->
</div>
<!-- Contains login area -->
<div style="width: 190px; margin: 0px; float: left;">
<!-- Login form -->
<div id="banner_login">
<!--#include file="inc/login.asp"-->
</div>
<!-- Ends login area -->
</div>
<!-- Main content -->
[B]// När jag tar bort "float: left" är det inga problem.[/B]
<div style="width: 250px; [B]float: left[/B]">
Texten som inte håller sig inom diven.
</div>
<!-- End Container -->
</div>
</body>
Lägg en clear: both under din
// När jag tar bort "float: left" är det inga problem.
<div style="width: 250px; float: left">
Texten som inte håller sig inom diven.
</div>
Det löste allt :)
Tack så mycket för hjälpen!