Home/ Questions/Q 6681015
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T04:32:32+00:00

I have strange spacing issue occurring between servers. I use IE 8 and FF

  • 0

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: none;
}

.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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0