2011-01-30 73 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中的问题。