IE7 issue only: Extra space appearing horizontally

HTML & CSS
1

Hello all,

I am having an issue with IE7 and my site. I’ve done multiple searches and have tried different things to find out why my issue is happening but am at the point where I am at wits end!

The website is www.kempenfeltgroup.com

The site is built in a CMS named Kentico. I ran my css through the CSS validator and it was fine. The only thing it did not like was the @fontface properties. (would that have anything to do with it?)

What happens is IE7 creates a blank content area or extra space/width horizontally to the right of the page. My background image is set to center on the page, but because the page extends, the background image centers using the extra width that was added. This in turn makes my page look funny because the image does not align with the content.

Let me know if you require any other information!!

Thanks!

Kristina

2

Hi Welcome to Sitepoint :slight_smile:

The main issue is the way you were hiding the text with text-indent on the absolute element which iE7 doesn’t seem to like. Just move the element off screen completely.


.zoneMenu #nav span{left:-999em;}

You would be better off with the gilder/levein method though.

The second problem is the logo where you have wrapped and anchor around a block level element which is not allowed.

You need to do it like this:


<h1 id="logo"><a title="Kempenfelt Group" href="/Home.aspx"><span>Kempenfelt Group</span></a></h1>




[B]#logo{margin:0}
#logo a [/B]{
    display: block;
    height: 73px;
    width: 331px;
    float: right;
    margin: 80px 3px 0 0;
    background: transparent url('http://www.kempenfeltgroup.com/App_Themes/KGGSite/Images/master/kGroupLogo_3d.gif') top left no-repeat;
}
#logo span {
    position: absolute;
[B]    left: -9999px;[/B]
}
3

Thank you!!! Thank you!! Thank you!! It worked!

I also fixed the logo portion as well. Thanks for that tip too :slight_smile: