...

View Full Version : Re: ~Image Replacement and IE7



quartzy
09-07-2009, 07:21 PM
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


* 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:


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

Kristofa
09-08-2009, 12:51 AM
Have you tried removing background:transparent? It might be the cause, not sure.

#header h1 em {background: url('../images/logo.gif')no-repeat left top; position: absolute; left: 0; top: 0; display: block; height: 76px; width: 114px;}

quartzy
09-08-2009, 02:54 PM
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.



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

Kristofa
09-08-2009, 04:46 PM
Really? According to W3Schools (http://www.w3schools.com/CSS/pr_background.asp) the background property is compatible with IE... :-S

quartzy
09-08-2009, 05:33 PM
Well I have not yet validated the code but background-image works with IE7 dont have IE6 but will check it out.

Rowsdower!
09-09-2009, 12:20 AM
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:
#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 :thumbsup: ).

quartzy
09-09-2009, 10:31 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum