资源管理器 8,9 上标题处的空行
我的网站是 bodto.com.tr。我在资源管理器 8,9 上的标题处有一个空行。我一直在寻找可能导致此问题的原因,因此非常感谢任何反馈。
<div id="header">
<div class="headerTop">
<div class="headerTopSignIn"></div>
<div class="headerTopList">
<ul>
<li></li>
</ul>
</div>
<div class="headerSearch">
<asp:Panel id="searchPanel" runat="server" DefaultButton="searchButton">
<asp:TextBox id="searchBox" runat="server"/>
<asp:Button id="searchButton" runat="server" OnClick="Search_Click" Text=""/>
</asp:Panel>
</div>
</div>
<div><a href="/"><img src="/images/image.png" width="288" height="70" alt=""/></a></div>
<div class="headerLogoOthers">
<a href=""><img alt="" title="" src="/images/tb.png" /></a>
<a href=""><img alt="" title="" src="/images/ts.png" /></a>
<a href=""><img alt="" title="" src="/images/oib.png" /></a>
</div>
<div id="LanguageSelector">
<form method="get" action="/"><select id="LanguageDropDownList" name="lang" onchange="javascript:location='/?lang=' + this.options[this.selectedIndex].value" ><option value="en">English (en)</option><option value="tr" selected="selected" >Türkçe (tr)</option></select><noscript><input type="submit" value=">"></noscript></form>
</div>
<div id="mainmenu">
<ul class="topNavigation"><li class=""><a href="/b.aspx?lang=tr" title=""></a></li><li class=""><a href="/bd.aspx?lang=tr" title=""></a></li></ul>
</div>
</div>
这是将 margin-bottom: 0 设置为 #header 后的 css
#header {margin-bottom: 20px;position: relative;}
#header a,#header a img{border: none;}
#header #sitedescription{float: right;text-align: right;margin: 7px;}
#header #sitedescription h1 {font-weight: normal;position: relative;font-size: 16px;line-height: 0.5em;}
#header #mainmenu{margin: 0px;padding: 0px;}
#header .mainmenucorner{margin: 0px;padding: 0px;background: url(/images/mainmenu_corner.gif) top left no-repeat;height: 20px;clear: both;position: relative;top: -15px;left: -25px;width: 20px;margin-bottom: -40px;}
#header #mainmenu ul{width: 950px;float: left;margin-bottom: 15px;/*margin-top: 20px; */padding: 0px;//margin-left: -25px;}
#header #mainmenu ul li{list-style: none;background-image: url(/images/icons/mainmenu_itembg.png);background-position: right bottom;background-repeat: no-repeat;float: left;font-size: 14px;}
#header #mainmenu ul li a{padding: 15px 15px;display: block;color: #fff;text-decoration: none;background: url(/images/mainmenu_item_bottomshadow.jpg) bottom left no-repeat;margin-bottom: -13px;padding-bottom: 28px;}
#header #mainmenu ul li.current{background-color: #a9a4a3;}
#header #mainmenu ul li.home a{background-image: url(/images/icons/home_dark.png);background-position: 16px 16px;background-repeat: no-repeat;padding-left: 35px; }
#header #mainmenu ul li:hover{color: #FFF;text-decoration: none;background-color: #a9a4a3;}
.headerTop { overflow hidden; height: 27px; font-size: 0; margin-bottom: 10px; position: relative; color: #005AAB; font-size: 12px; border-bottom:1px solid #d5d5d5; }
.headerTopSignIn { width: 350px; margin-top: 5px; position: absolute; left: 0px;}
.headerTopSignIn a { color: #FECA08; }
.headerTopList ul{ margin-top: 5px; padding: 0; position: absolute; left: 400px;}
.headerTopList ul li{ display: inline; }
.headerTopList ul li a { border: none; padding: 15px; color: #FECA08; background-image: url(/images/arrow.png); background-repeat: no-repeat; background-position: left center; text-decoration: none; }
.headerTopList ul li a:hover { padding: 15px; background-image: url(/images/arrow_hover.png); background-repeat: no-repeat; background-position: left center; text-decoration: none; }
.headerLogo img { }
.headerSearch { padding-left: 20px; position: absolute; top: 0; right: 0; }
.headerLogoOthers { position: absolute; float:left; margin: 5px; top: 50px; right: 0; }
#LanguageSelector{float:right; margin: 0; padding: 0; }
,我看到一些奇怪的东西。
1- 更改为 header margin-bottom: 0 之前, 更改之前
2-更改标题后 更改后
这是CSS
/* *** FLASH *** */
#flash { height: 437px; float: left; }
/* *** FLASH CONTENT *** */
#flashcontent { width: 660px; float: left; }
/* *** SIDEBAR FLASH *** */
.sidebarFlash { font-size: 12px; width: 285px; height: 400px; margin-left: 5px; float: left; background-color: #FECA08; overflow: hidden; }
.sidebarFlash span.header { padding: 2px; color: #FECA08; background:#000000; display:block;}
.sidebarInnerTop { height: 240px; padding: 5px; background-color: #FECA08; }
.sidebarInnerTop h1 { padding: 5px 0 5px 20px; background-image: url(/images/icons/arrow2_se.png); background-position: left center; background-repeat: no-repeat; }
.sidebarInnerTopMenuNav { padding-left: 0; margin-left: 0; list-style-type: none; background-color: #FFF; }
.sidebarInnerTopMenuNav li { }
.sidebarInnerTopMenuNav li a { padding: 8px 15px 8px 20px; border-bottom: 1px dotted gray; display: block; background-image: url(/images/arrow.png); background-repeat: no-repeat; background-position: left center; text-decoration: none; }
.sidebarInnerTopMenuNav li a:hover { background:#595E6A none repeat scroll 0 0; background-image: url(/images/arrow_hover.png); background-repeat: no-repeat; background-position: left center; text-decoration: underline; }
.sidebarInnerTopMenuNavSub { padding: 0; margin: 0; background-color: #FFF; }
.sidebarInnerTopMenuNavSub li { list-style: none; }
.sidebarInnerTopMenuNavSub li a { padding: 8px 15px 8px 20px; border-bottom: 1px dotted gray; display: block; background-image: url(/images/arrow.png); background-repeat: no-repeat; background-position: left center; text-decoration: none; }
.sidebarInnerTopMenuNavSub li a:hover { background:#595E6A none repeat scroll 0 0; background-image: url(/images/arrow_hover.png); background-repeat: no-repeat; background-position: left center; text-decoration: underline; }
.sidebarInnerBottom { overflow: hidden; }
.sidebarInnerBottom span.header { padding: 2px; color: #FECA08; background:#000000; display:block;}
My website is bodto.com.tr. I have a empty line at header on explorer 8,9. I have been searching what might cause it so any feedback much appreciated.
<div id="header">
<div class="headerTop">
<div class="headerTopSignIn"></div>
<div class="headerTopList">
<ul>
<li></li>
</ul>
</div>
<div class="headerSearch">
<asp:Panel id="searchPanel" runat="server" DefaultButton="searchButton">
<asp:TextBox id="searchBox" runat="server"/>
<asp:Button id="searchButton" runat="server" OnClick="Search_Click" Text=""/>
</asp:Panel>
</div>
</div>
<div><a href="/"><img src="/images/image.png" width="288" height="70" alt=""/></a></div>
<div class="headerLogoOthers">
<a href=""><img alt="" title="" src="/images/tb.png" /></a>
<a href=""><img alt="" title="" src="/images/ts.png" /></a>
<a href=""><img alt="" title="" src="/images/oib.png" /></a>
</div>
<div id="LanguageSelector">
<form method="get" action="/"><select id="LanguageDropDownList" name="lang" onchange="javascript:location='/?lang=' + this.options[this.selectedIndex].value" ><option value="en">English (en)</option><option value="tr" selected="selected" >Türkçe (tr)</option></select><noscript><input type="submit" value=">"></noscript></form>
</div>
<div id="mainmenu">
<ul class="topNavigation"><li class=""><a href="/b.aspx?lang=tr" title=""></a></li><li class=""><a href="/bd.aspx?lang=tr" title=""></a></li></ul>
</div>
</div>
Here is the css
#header {margin-bottom: 20px;position: relative;}
#header a,#header a img{border: none;}
#header #sitedescription{float: right;text-align: right;margin: 7px;}
#header #sitedescription h1 {font-weight: normal;position: relative;font-size: 16px;line-height: 0.5em;}
#header #mainmenu{margin: 0px;padding: 0px;}
#header .mainmenucorner{margin: 0px;padding: 0px;background: url(/images/mainmenu_corner.gif) top left no-repeat;height: 20px;clear: both;position: relative;top: -15px;left: -25px;width: 20px;margin-bottom: -40px;}
#header #mainmenu ul{width: 950px;float: left;margin-bottom: 15px;/*margin-top: 20px; */padding: 0px;//margin-left: -25px;}
#header #mainmenu ul li{list-style: none;background-image: url(/images/icons/mainmenu_itembg.png);background-position: right bottom;background-repeat: no-repeat;float: left;font-size: 14px;}
#header #mainmenu ul li a{padding: 15px 15px;display: block;color: #fff;text-decoration: none;background: url(/images/mainmenu_item_bottomshadow.jpg) bottom left no-repeat;margin-bottom: -13px;padding-bottom: 28px;}
#header #mainmenu ul li.current{background-color: #a9a4a3;}
#header #mainmenu ul li.home a{background-image: url(/images/icons/home_dark.png);background-position: 16px 16px;background-repeat: no-repeat;padding-left: 35px; }
#header #mainmenu ul li:hover{color: #FFF;text-decoration: none;background-color: #a9a4a3;}
.headerTop { overflow hidden; height: 27px; font-size: 0; margin-bottom: 10px; position: relative; color: #005AAB; font-size: 12px; border-bottom:1px solid #d5d5d5; }
.headerTopSignIn { width: 350px; margin-top: 5px; position: absolute; left: 0px;}
.headerTopSignIn a { color: #FECA08; }
.headerTopList ul{ margin-top: 5px; padding: 0; position: absolute; left: 400px;}
.headerTopList ul li{ display: inline; }
.headerTopList ul li a { border: none; padding: 15px; color: #FECA08; background-image: url(/images/arrow.png); background-repeat: no-repeat; background-position: left center; text-decoration: none; }
.headerTopList ul li a:hover { padding: 15px; background-image: url(/images/arrow_hover.png); background-repeat: no-repeat; background-position: left center; text-decoration: none; }
.headerLogo img { }
.headerSearch { padding-left: 20px; position: absolute; top: 0; right: 0; }
.headerLogoOthers { position: absolute; float:left; margin: 5px; top: 50px; right: 0; }
#LanguageSelector{float:right; margin: 0; padding: 0; }
After setting margin-bottom: 0 to #header, I see something weird.
1- before changing to header margin-bottom: 0,
Before changing
2- after changing to header
After changing
Here is the css
/* *** FLASH *** */
#flash { height: 437px; float: left; }
/* *** FLASH CONTENT *** */
#flashcontent { width: 660px; float: left; }
/* *** SIDEBAR FLASH *** */
.sidebarFlash { font-size: 12px; width: 285px; height: 400px; margin-left: 5px; float: left; background-color: #FECA08; overflow: hidden; }
.sidebarFlash span.header { padding: 2px; color: #FECA08; background:#000000; display:block;}
.sidebarInnerTop { height: 240px; padding: 5px; background-color: #FECA08; }
.sidebarInnerTop h1 { padding: 5px 0 5px 20px; background-image: url(/images/icons/arrow2_se.png); background-position: left center; background-repeat: no-repeat; }
.sidebarInnerTopMenuNav { padding-left: 0; margin-left: 0; list-style-type: none; background-color: #FFF; }
.sidebarInnerTopMenuNav li { }
.sidebarInnerTopMenuNav li a { padding: 8px 15px 8px 20px; border-bottom: 1px dotted gray; display: block; background-image: url(/images/arrow.png); background-repeat: no-repeat; background-position: left center; text-decoration: none; }
.sidebarInnerTopMenuNav li a:hover { background:#595E6A none repeat scroll 0 0; background-image: url(/images/arrow_hover.png); background-repeat: no-repeat; background-position: left center; text-decoration: underline; }
.sidebarInnerTopMenuNavSub { padding: 0; margin: 0; background-color: #FFF; }
.sidebarInnerTopMenuNavSub li { list-style: none; }
.sidebarInnerTopMenuNavSub li a { padding: 8px 15px 8px 20px; border-bottom: 1px dotted gray; display: block; background-image: url(/images/arrow.png); background-repeat: no-repeat; background-position: left center; text-decoration: none; }
.sidebarInnerTopMenuNavSub li a:hover { background:#595E6A none repeat scroll 0 0; background-image: url(/images/arrow_hover.png); background-repeat: no-repeat; background-position: left center; text-decoration: underline; }
.sidebarInnerBottom { overflow: hidden; }
.sidebarInnerBottom span.header { padding: 2px; color: #FECA08; background:#000000; display:block;}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
在
#header
div 上设置margin-bottom: 0
可以解决该问题。Setting
margin-bottom: 0
on your#header
div fixes the problem.