Strange spacing issue in IE 7
I have strange spacing issue occurring between servers.
I use IE 8 and FF 7.0.1 Everything looks fine in FF in all 3 environments
For IE 8: Everything looks fine on my local machine (running IIS 7) Everything looks fine on my build server (running IIS 7) The spacing occurs on my staging server (running IIS 6)
In my web.config I've set the following code:
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=8" />
</customHeaders>
</httpProtocol>
That seems to work on IIS 7 but is unsupported for IIS 6. Because I'm not a server admin, I've been trying to determine what I can fix on the code-side and it's led me to the css I'm using.
<header>
<img src="@Url.Content("~/Images/header_my_logo.png")" alt="my_logo" id="my_logo" />
<img src="@Url.Content("~/Images/my_button.jpg")" alt="my_logo2" id="my_logo2" width="160" height="57" />
<nav>
<ul id="menu">
<li class="aHome">
@Html.ActionLink("Goals", "Index", "Home")</li>
<li class="blank">
@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</nav>
On the CSS end:
#my_logo, #my_logo2
{
float:right;
/*--- margin: 5px 15px 15px 15px; ---*/
margin: 5px 15px 0px 15px;
}
and
ul#menu
{
border-bottom: 1px solid #51759B;
width: 563px;
padding: 2px 0;
position: relative;
margin: 45px 0 0;
text-align: left;
}
ul#menu li {
display: inline;
list-style: none;
}
ul#menu li a, ul#menu li a:hover {
padding: 15px 30px;
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #51759b;
border-radius: 0 0 0 0;
-webkit-border-radius: 0 0 0 0;
-moz-border-radius: 0 0 0 0;
}
ul#menu li a
{
-moz-background-size: 100px 35px;
background-size: 100px 35px;
background-repeat: no-repeat;
background-origin:border-box;
text-decoration: no开发者_如何学运维ne;
}
.aHome a {
background-image: url(/ILP/Images/nav_hometab.png);
color:#fff !important;
}
My logos appear side-by-side in the upper-right corner. The navigation (tabs) appear below those. It's between the logos and the tabs where I'm seeing spacing (and also a slight issue with line height in-general for my tabs as the top is shaved off). I will try to get an image posted shortly.
I really appreciate any help!
If <add name="X-UA-Compatible" value="IE=8" /> works to fix it on IIS7, and you're looking for a fix you can add to your HTML, look no further than:
<meta http-equiv="X-UA-Compatible" content="IE=8">
Add it to your <head>.
Though, it would be better to completely get rid of X-UA-Compatible (or set it to IE=edge, which means "use the newest available version"), and fix your site to work in all versions of Internet Explorer. Forcing IE9 and newer to display as IE8 is not a good thing.
I think this might be the infamous IE whitespace bug rearing it's ugly head. Try putting the entire menu code on one line and see if that fixes it. e.g.
<ul id="menu"><li class="aHome">@Html.ActionLink("Goals", "Index", "Home")</li><li class="blank">@Html.ActionLink("Contact", "Contact", "Home")</li></ul>
Have you tried setting the img logos to display:block or adding vertical-align:top ?
加载中,请稍侯......
精彩评论