2011-01-30 70 views
1

我不知道這裏發生了什麼。我已經嘗試過在網上找到每一個修復程序,並且無法獲得任何工作。100%身高包裝,打破浮動兒童

放置清除不會工作,我不能用戶溢出:自動,因爲我只是定位導航的包裝。這裏有什麼不對的例子:

http://plustg.com/v2/

下面是代碼,真的可以在這裏使用一些幫助。

@CHARSET "ISO-8859-1"; 
* {margin:0;padding:0;} 
html, body 
{ 
background-color: #dcdcdc; 
padding: 0px; 
margin: 0px; 
height: 100%; 
font-family: Tahoma, Arial; 
} 

#wrapper 
{ 
border-top: 1px white solid; 
width: 1100px; 
min-height: 100%; 
margin: auto; 
background-color: #fff; 

} 

#headerBlue 
{ 
width: 1086px; 
height: 110px; 
margin: auto; 
margin-top: 7px; 
background-image: url('http://plustg.com/v2/_img/blue/header.png'); 
background-repeat: no-repeat; 
} 

#headerPink 
{ 
width: 1086px; 
height: 110px; 
margin: auto; 
margin-top: 7px; 
background-image: url('http://plustg.com/v2/_img/pink/header.png'); 
background-repeat: no-repeat; 
} 

#userStuff 
{ 
float: left; 
width: 216px; 
height: 88px; 
margin-top: 10px; 
margin-left: 350px; 
padding: 5px; 
} 

#userStuff img 
{ 
float: left; 
} 

#welcomeMessage 
{ 
float: left; 
font-size: 11px; 
color: #fff; 
display: block; 
margin-left: 10px; 
margin-top: 5px; 
} 

#notificationBar 
{ 
float: left; 
display: block; 
width: 129px; 
height: 23px; 
font-size: 11px; 
color: #fff; 
background-image: url('http://plustg.com/v2/_img/notification.png'); 
background-repeat: no-repeat; 
margin-top: 10px; 
margin-left: 10px; 
padding-left: 5px; 
padding-top: 3px; 
} 

#logo 
{ 
width: 115px; 
height: 39px; 
float: right; 
margin-top: 20px; 
margin-right: 40px; 
} 

#leftBar 
{ 
margin-top: 10px; 
width: 160px; 
float: left; 
} 

#navMain 
{ 
width: 140px; 
} 

#mainBlue 
{ 
width: 150px; 
height: 37px; 
background-image: url('http://plustg.com/v2/_img/blue/navMain.png'); 
background-repeat: no-repeat; 
font-size: 12px; 
color: #fff; 
margin-left: -11px; 
} 

#mainPink 
{ 
width: 150px; 
height: 37px; 
background-image: url('http://plustg.com/v2/_img/pink/navMain.png'); 
background-repeat: no-repeat; 
font-size: 12px; 
color: #fff; 
margin-left: -11px; 
} 

span.mainTitle 
{ 
display: block; 
float: left; 
margin-left: 22px; 
margin-top: 4px; 
} 

#navMain ul, #navMain li 
{ 
list-style: none; 
padding: 0; 
margin: 0; 
} 

#navMain ul 
{ 
padding-left: 10px; 
margin-top: -5px; 
} 

#navMain li 
{ 
font-size: 14px; 
color: #1385a9; 
padding-top: 3px; 
border-bottom: 1px dotted #1385a9; 
} 

#navMain a 
{ 
font-size: 13px; 
color: #424141; 
text-decoration: none; 
} 

#content 
{ 
width: 660px; 
height: auto; 
float: left; 
margin-top: 25px; 
margin-left: 20px; 
} 

#newsLatest 
{ 
width: 654px; 
height: 157px; 
background-image: url('http://plustg.com/v2/_img/newsbg.png'); 
background-repeat: no-repeat; 
} 

img.newsImg 
{ 
float: left; 
} 

.titleBit 
{ 
float: left; 
margin-left: 10px; 
margin-top: 10px; 
font-size: 12px; 
color: #535455; 
width: 400px; 
} 

.newsCat 
{ 
color: #e96125; 
} 

.byBit 
{ 
float: left; 
margin-left: 16px; 
font-size: 11px; 
color: #8d8e8f; 
} 

a.author 
{ 
color: #2e821a; 
} 

span.comments 
{ 
background-image: url('http://plustg.com/v2/_img/balloon-left.png'); 
background-repeat: no-repeat;; 
padding-left: 20px; 
} 

span.comments a 
{ 
color: #000; 
} 

.newsBit 
{ 
float: left; 
width: 390px; 
height: 70px; 
font-size: 11px; 
color: #535455; 
margin-left: 16px; 
margin-top: 13px; 
} 

.buttonBit 
{ 
float: left; 
width: 400px; 
margin-left: 16px; 
margin-top: 10px; 
} 

.newsMore 
{ 
color: #fff; 
display: block; 
font-size: 11px; 
background-image: url('http://plustg.com/v2/_img/newsButton.png'); 
background-repeat: no-repeat; 
width: 112px; 
height: 20px; 
padding-top: 3px; 
padding-left: 10px; 
float: right; 
} 

.newsMore a 
{ 
color: #fff; 
text-decoration: none; 
} 

#tmLatest 
{ 
width: 660px; 
margin: auto; 
margin-top: 15px; 
} 

#tmLatest img 
{ 
width: 655px; 
margin: auto; 
cursor: pointer; 
} 

.switchLatest 
{ 
height: 25px; 
font-size: 12px; 
color: #e97a49; 
padding-right: 5px; 
} 

.switchLatest a 
{ 
display: block; 
float: right; 
text-align: center; 
width: 17px; 
height: 17px; 
border: 1px solid #e97a49; 
margin-top: 3px; 
margin-left: 5px; 
color: #e97a49; 
text-decoration: none; 
} 

.switchLatest a:hover 
{ 
background-color: #e97a49; 
color: #fff; 
} 

#forumStats 
{ 
width: 388px; 
float: left; 
height: 50px; 
} 

.forumBar 
{ 
height: 23px; 
background-image: url('http://plustg.com/v2/_img/barGreen.png'); 
background-repeat: no-repeat; 
font-size: 12px; 
color: #fff; 
padding-left: 10px; 
padding-top: 3px; 
} 

#selfyLatest 
{ 
width: 248px; 
float: right; 
height: 50px; 
} 

.selfyBar 
{ 
height: 23px; 
background-image: url('http://plustg.com/v2/_img/barRed.png'); 
background-repeat: no-repeat; 
font-size: 12px; 
color: #fff; 
padding-left: 10px; 
padding-top: 3px; 
} 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>PlusTG Design v2</title> 
<link href="_inc/_css/v1.css" title="compact" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="wrapper"> 
<div id="headerBlue"> 
    <div id="userStuff"> 
    <img src="http://plustg.com/v2/_img/defaultAvatar.png" alt="defaultAvatar" /> 
    <span id="welcomeMessage">Welcome <strong>Collussus</strong></span> 
    <span id="notificationBar"><strong>1</strong> new notification</span> 
    </div> 
    <div id="logo"><img src="http://plustg.com/v2/_img/logo.png" alt="Logo" /></div> 
</div> 
<div id="leftBar"> 
    <div id="navMain"> 
    <div id="mainBlue"> 
    <span class="mainTitle"><strong>Main Menu</strong></span> 
    </div> 
    <ul class="blue"> 
    <li>&raquo; <a href="#">Home</a></li> 
    <li>&raquo; <a href="#">Selfy Maker</a></li> 
    <li>&raquo; <a href="#">Profiles</a></li> 
    <li>&raquo; <a href="#">Bookmarklets</a></li> 
    <li>&raquo; <a href="#">Advertise Us</a></li> 
    <li>&raquo; <a href="#">Contact</a></li> 
    </ul> 
    </div> 

</div> 

<div id="content"> 
    <div id="newsLatest"> 
    <img src="http://plustg.com/v2/_img/newsTestImg.png" alt="test" class="newsImg" /> 
    <div class="titleBit">&#147;<strong>[01/29/2011]</strong> <span class="newsCat">Maintenance</span>: And we're back!&#148;</div> 
    <div class="byBit">By <a href="#" class="author">Collussus</a> <span class="comments"><a href="#">51</a></span></div> 
    <div class="newsBit">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec ante sapien, eget convallis ligula. Ut consectetur risus ac purus ullamcorper non varius enim pulvinar. Etiam tristique urna sed mauris porttitor iaculis. Phasellus dui nisi, vehicula id laoreet ut, tristique in dui. In et euismod massa. Morbi pharetra sagittis dui. </div> 
    <div class="buttonBit"><span class="newsMore"><a href="#">Read More &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &raquo;</a></span></div> 
    </div> 
    <div id="tmLatest"> 
    <img src="http://img.tinierme.com/shop_gacha/gacha/2011/01/img/20110128_time/110128_time_title.jpg" alt="Gears of Time" /> 
    <div class="switchLatest"><a href="#">5</a><a href="#">4</a><a href="#">3</a><a href="#">2</a><a href="#">1</a></div> 
    </div> 

    <div id="forumStats"> 
    <div class="forumBar"><strong>Latest Forum Activity</strong></div> 
    <div class="forumContent"> 
    <div class="onePost"> 
    <img src="http://plustg.com/v2/_img/defaultAvatarS.png" /> 
    tests 
    </div> 

    </div> 
    </div> 
    <div id="selfyLatest"> 
    <div class="selfyBar"><strong>Latest Saved Selfy</strong></div> 
    <div class="selfyContent">stuff here<br />test</div> 
    </div> 

</div> 
</div> 

</body> 
</html> 
+0

「孩子」的複數是「孩子」。 (我已經爲你解決了你的頭銜。) – 2011-01-30 17:06:11

+0

ty,儘管它還沒有起到很大的作用> _> – 2011-01-30 17:09:41

回答

5

我不是100%確定我理解您的問題。難道是#wrapper上的白色背景沒有回到頁面底部?

如果是這樣的:

  • 只爲#wrapper結束標記之前,添加:<br style="clear: both" />
  • #forumStats刪除height: 50px並添加overflow: auto

這解決了它在Firefox中的問題。