SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Location
    Ontario, Canada
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 issue only: Extra space appearing horizontally

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi Welcome to Sitepoint

    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.

    Code:
    .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:

    Code:
    <h1 id="logo"><a title="Kempenfelt Group" href="/Home.aspx"><span>Kempenfelt Group</span></a></h1>
    Code:
    #logo{margin:0}
    #logo a {
        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;
        left: -9999px;
    }

  3. #3
    SitePoint Member
    Join Date
    Jan 2011
    Location
    Ontario, Canada
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you!!! Thank you!! Thank you!! It worked!

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •