DIV+CSS的奇怪问题。
小弟新学DIV+CSS,改了一个东西,发现出现非常奇怪的问题,请大虾赐教:
DIV:
<DIV id=HeadTop>
<DIV id=Logo><a href="{$Hope_SitUrl$}" target=_top><img src="{$Hope_SitUrl$}{$Hope_Skin$}IMAGE/Logo.jpg"/></a></DIV>
<DIV id=HeadBar>
<DIV id=HeadNavBar>
<UL>
<LI class=NoSep><A href="../ProClass_list.aspx"
target=_parent>我要买</A> </LI>
<LI><A href="/vipuser/YX_sell.aspx"
target=_parent>我要卖</A> </LI>
<LI><A id=MyTaoBao
href="/vipuser/default_vip.aspx"
target=_top>会员中心</A> </LI>
<LI><A href="/bbs" target=_top>购物社区</A> </LI>
<LI><A href="/help" target=_top>帮助中心</A> </LI>
<LI id=AdvanceBox>
</LI></UL></DIV>
<DIV id=QuickLinks>
adsfsalkdfjsa
<UL>
<LI><iframe src="{$Hope_SitUrl$}Login_Stat.aspx" frameborder="0" width="300" height="25" scrolling="no" ></iframe>
<!-- <script language="javascript" src="{$Hope_SitUrl$}Login_Stat.aspx" charset="utf-8" ></script>--></LI>
<LI><A href="Shop.aspx" target=_parent>品牌商城</A> </LI>
<LI><A href="News/" target=_parent>购物资讯</A> </LI>
<LI><A href="HighlevelSearch.aspx" target=_parent>高级搜索</A> </LI></UL></DIV></DIV></DIV>
CSS:
#Head #HeadTop{
position:relative;
margin:10px auto 0;
text-align:left;
height: 62px;
overflow: hidden;
}
#Head #Logo{
width: 240px;
height: 62px;
float: left;
margin-left: 2px;
}
#Head #HeadBar{
height: 62px
float: right;
margin: 0 3px 0 240px;
}
#Head #HeadNavBar{
height:30px;
float: top;
margin-left: 350px;
}
#Head #HeadNavBar li {
float:left;
height:21px;
display:inline;
margin: 0 3px;
background: url(../IMAGE/top_menu_r.png) no-repeat right top;
}
#Head #HeadNavBar li a{
display:block;
padding: 0 6px 0 7px;
float:left;
height:21px;
line-height:21px;
color: #111;
font-size: 12px;
background: url(../IMAGE/top_menu_l.png) no-repeat left top;
}
#Head #HeadNavBar a#MyTaoBao {
padding-left: 18px!important;
background: url(../IMAGE/top_menu_mytb_l.png) no-repeat left top;
}
#Head #HeadNavBar li a:hover{
color: #e60;
}
#Head #HeadNavBar li#AdvanceBox {
background: none;
margin-right: 2px;
}
#Head #HeadNavBar li#AdvanceBox form {
margin:0;
padding:0;
}
#Head #HeadNavBar li#AdvanceBox .HeaderSearchBox {
margin-right: 2px;
width: 8em;
border: 1px solid #bbb;
padding: 2px 2px 2px;
color: #000;
}
#Head #HeadNavBar li#AdvanceBox input.DC {
color: #888 !important;
}
#Head #HeadNavBar li#AdvanceBox .HeaderSearchBtn {
margin: 0;
width: 40px;
}
#Head #HeadNavBar li#AdvanceBox li {
background: none!important;
}
#Head #QuickLinks{
height:30px;
float:bottom;
overflow: hidden;
margin-left: 50px;
}
#Head #QuickLinks ul {
float: right;
}
#Head #QuickLinks ul li{
float: left;
margin-left:10px;
line-height: 21px;
}
#Head #QuickLinks li a:link, #Head #QuickLinks li a:visited {
font-style:normal;
font-weight:normal;
font-size: 12px;
color:#04d;
}
#Head #QuickLinks li a:hover, #Head #QuickLinks li a:active {
color:#e60;
}
#Head #QuickLinks li.HasMsgWW, #Head #QuickLinks li.HasMsgMail {
background:url() left center no-repeat;
padding-left:18px;
color:#390;
font:bold 9px Arial;
padding-top: 0px;
}
最大的问题:
QuickLinks不显示。只有HeadNavBar显示正常。
在改的过程中发现一个很怪的现象:
#Head #HeadBar{
height: 62px
float: right;
margin: 0 3px 0 240px;
}
这里,我发现height: 62px后少了一个分号,随手加上后,HeadNavBar 也不显示了。
请赐教!!