SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question High resolution image cut off in IE 8 and below

    Hello,

    I just launched a new site and have some trouble with the logo in the upper left corner.

    This is my HTML:

    Code:
    <h1>
    	<a id="logo" href="/">
    		Title
    	</a>
    </h1>
    And this is my CSS:

    Code:
    #logo {
    	position: absolute;
    	top: 13px;
    	left: 17px;
    	width: 201px;
    	height: 91px;
    	text-indent: -9999px;
    	background-image: url(../images/logo.png);
    	background-size: 100% 100%;
    }
    I should mention that I uploaded the logo.png file in a size 402 x 182 px to make it look crisp on retina displays.

    This strategy works out brilliantly across most modern devices. However in Internet Explorers 8 and below only a quarter of the logo is visible. The rest is cut off.

    Is there a way to get this working at all?

    Thanks for any help.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,111
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Background-size is a CSS3 property, unknown to older browsers. Given the way you are going about this, you might as well just put the image in the HTML rather than as a background image, and then set the widths on the image rather than on the <a>.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yap, that worked great. Thanks for your help, Ralph!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,111
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Pixelateur View Post
    Yap, that worked great. Thanks for your help
    No worries. Glad it helped.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •