Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    Re: ~Image Replacement and IE7

    Cant find out why the image on the image replacement I done, is not showing in IE7, it works with FF and safari.
    Can anyone help, been looking on the www but have not found anything yet.
    CSS
    Code:
    * html body, * {padding: 0; margin: 0;}/*remove defaut padding and margins*/
    * html #footer {height: 1%;}/*give IE haslayout*/
    body           {font-family: Microsoft Sans Serif, Arial, Tahoma, sans-serif; font-size: 0.88em; color: 
                    #000; line-height: 1.5; text-align: center;}
    #wrapper {margin: 10px auto; text-align: left; position: relative; width: 1024px;}
    #header  {color: #333; width: 100%; float: left; height: 82px; position: relative;}
    #search  {position: absolute; top: 30px; right: 0; width: 250px; height: auto; font-size: 0.88em;}#header h1     {height: 76px; width: 110px; position: relative; font-size: .5em;}
    #header h1     {overflow: hidden;}
    #header h1 em  {background: transparent url('../images/logo.gif')no-repeat left top; position: absolute; left: 0; top: 0; display: block; height: 76px; width: 114px;}
    .logtitle      {font-family: helvetica,arial,sans-serif; font-size: 90%; font-weight:bold; color: #0033CC; 
                    position: absolute; top: 26px; left: 110px;}
    Never noticed it before so it must have been like this for ages.
    The HTML is:
    Code:
    <div id="wrapper">
    	<div id="header">
    		<h1><a href="index.html" title="Header">Home page<em 
    		title="Home page"></em></a></h1>
    		<p class="logtitle">&quot;When learning through sports, anything is possible.&quot;</p>
    		<p class="sitemap"><a href="policies.html">Accessibility</a> |
    		<a href="sitemap.html">Site Map</a> | Text Resize<span class="normal"><a 
    		href="javascript:void(0);" 
    		onclick="javascript:body.style.fontSize='.88em'">A</a></span><span class="medium"><a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1em'">A</a></span>
    <span class="big"><a href="javascript:void(0);" 
    onclick="javascript:body.style.fontSize='1.25em'">A
    </a></span></p><a name="top"></a><div id="search"><script src="js-files/search.js" type="text/javascript"></script><form action="http://www.google.com/search" method="get" 
    				onsubmit="Gsitesearch(this)">
    				<input name="q" type="hidden" /><input class="qfront" 
    				name="qfront" type="text" /><input class="submit" type="submit" 
    				value="Search" /></form>
    		</div>
    The link I have is www.ten embee.org.uk removing the spaces. Hope someone can help me with this.

  • #2
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    Have you tried removing background:transparent? It might be the cause, not sure.
    Code:
    #header h1 em  {background: url('../images/logo.gif')no-repeat left top; position: absolute; left: 0; top: 0; display: block; height: 76px; width: 114px;}
    Learning along the way...

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    No, the solution you offered did not work, but I have found fix, IE7 wants everthing to be set out in full. So that is what I done.

    Code:
    #header h1 em  {background-image: url('../images/logo.gif'); 
    background-repeat: no-repeat; 
    background-position: left top; 
    position: absolute; left: 0; top: 0; 
    display: block;
    height: 76px; width: 114px;}
    Consequently with browser I have the logo now works.

  • #4
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    Really? According to W3Schools the background property is compatible with IE... :-S
    Learning along the way...

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    Well I have not yet validated the code but background-image works with IE7 dont have IE6 but will check it out.

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by quartzy View Post
    Well I have not yet validated the code but background-image works with IE7 dont have IE6 but will check it out.
    In general, validation of the HTML should be the first stop to fixing CSS issues. This always includes a valid doctype, too, which you may have. I haven't checked your code yet.

    In any case, this might have been the problem to begin with:
    Code:
    #header h1 em  {background: transparent url('../images/logo.gif')no-repeat left top; position: absolute; left: 0; top: 0; display: block; height: 76px; width: 114px;}
    Note the lack of a space between these two style settings. I don't think that would fly for all browsers. Some will make a "best guess" of the code and others will just ignore invalid code. This could easily be an example of that. Try fixing the spacing and use the one-liner method and see if that works (once you have validated, of course ).
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    Never thought that a space would affect the code, but I have now validated the css, and it is OK, using the method I had outlined, (the corrected method) I am happy as it works with 3 browsers and maybe more.


  •  

    Posting Permissions

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