Logo images not displaying in Internet Explorer - they are set using css background feature.

Hi,

Quick background - I am extremely proficient in css and xhtml so this one is quite strange.

Please note the following link in both IE and any other browser:

   http://www.hesgroup.com.au


In Internet Explorer, the logo images (in top right of each page) are being displayed.
In all other browsers (Firefox, Opera, Safari, Chrome, Netscape) they are displayed.

It seems like this is a bug in IE as the logo is sometimes displayed and other times it is not - it is a very random problem.

The logo is displayed using the IMG src attribute so I cannot envisage any problems here.
The logo is positioned using CSS (see code).
The logo can be viewed by going directly to the url (so it definitely exists and there is no problem with link):

  http://www.hesgroup.com.au/images/logo.jpg
  http://www.hesgroup.com.au/images/home_logo.jpg

Any help would really be appreciated.

Thanks for your time.

Cheers.
Steve
/*-------------------------------------------------*/
 
A.logo
{
	position: absolute;
	top: 24px;
	left: 12px;
}
 
IMG.logo
{
	width: 157px;
	height: 142px;
}
 
IMG.homeLogo
{
	width: 249px;
	height: 224px;
}

Open in new window

smaccaAsked:
Who is Participating?
 
David S.Commented:
It looks like IE does't like that first clearing <div>. Remove it and give #Header  "clear:right".
0
 
mverschoofCommented:
I would suggest you check your CSS with the W3schools validator. It found 5 errors and 54 warnings.
Url: http://jigsaw.w3.org/css-validator/

Hop this helps, Michael
0
 
smaccaAuthor Commented:
CSS has been corrected as much as possible for this design. Thanks for the suggestion.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
mverschoofCommented:
You're welcome

Still the same problem? I would suggest running the html validator too. You never know. It may be a missing closing tag causing problems or something stupid like that.
http://validator.w3.org/

Good luck
0
 
smaccaAuthor Commented:
All xhtml fixed as much as possible - remaining errors are produced by .NET web controls (ie. border). \
Stil not working though - ouch!!

Thanks for your comments.
0
 
mverschoofCommented:
I'll look into this more deeply this weekend. I can't do this sooner so i would ask the other experts to chime in with any advice if they have any.
0
 
smaccaAuthor Commented:
Cheers mverschoof .
Client cannot understand why I cannot fix this - it is becoming a HUGE problem for me!!
0
 
mverschoofCommented:
Maybe you can ask the moderators to mail the high level experts. Normally this is done after a specific amount of time (or days) when nothing is submitted.
This will take too long since you have a client waiting for the site. I don't care if they get the points as long as your problem get's fixed as soon as possible.

Good luck
0
 
wilson1000Commented:
Hi smacca,

A possible solution is to assign the <a> tag x and y width values.

IE has a funny way of referring to background images and in some situations like yours, the image will disappear erratically.

Use the following declaration.

a.logo {
position: absolute;
top: 24px;
left: 12px;
width: 249px;
height: 224px;
display:block;
}

Let me know how you get on :@)
0
 
smaccaAuthor Commented:
Hi Wilson,

Have tried this already and did not work - it was actually the first thing I thought of - great minds! lol!
I have actually left this CSS block in there now but still not working.

Thanks for your time.
0
 
smaccaAuthor Commented:
I have also made the background orange to indicate the area. You can see in IE when the logo is missing, the whole block element disappears.
Am pretty sure this will be an absolute positioning but with IE.

Anyone know who the channels for having IE bugs investigated??
0
 
prairiedogCommented:
How about not using IMG src attribute, but using CSS to load the image?
0
 
smaccaAuthor Commented:
Hey prairie dog, not sure if css background will help as the entire block element is missing when the image disappears.
Because of this behaviour, I am growing more confident this may be a 'absolute positioning' bug with Internet Explorer.

A basic HTML Image tag should always display - there should never be a problem here - if there were bugs with this element, they would have been found decades ago.
All bugs are usually with css rendering - I really do think the absolute position of the logo is the problem.

Would love to hear your comments. Any experts out there that can shed light on this subject.
0
 
wilson1000Commented:
Hi Smacca,

I had this problem before and I had to apply an explicit width value to the parent of the element that was disappearing. also... If memory serves me correctly, I found that applying the position of relative to the image helped too.

Try setting:

position:relative;

to the <img> tag

Let me know the results
0
 
smaccaAuthor Commented:
Hi,

Thanks everyone for your great input - I have tried everything suggested and none have worked.
I am very confident this is a IE CSS Positioning BUG!!

Can anyone provide an email for Microsoft IE Development team???

Would love an EXPERT (I have been using CSS for nearly 10 years - so am very proficient) to have a look at.
Perhaps I am overlooking something very simple - however, if I was overlooking something, you would assume that all non-IE browsers would fail, which they do not.

PLEASE HELP EXPERTS!!!! Very desperate.

I have even emailed Scott Guthrie today asking for some help or at least to forward to development team.

Thanks again all for your time.

0
 
b0lsc0ttIT ManagerCommented:
What is your result if you remove the anchor tag from around that image?  Does it reliably show in IE now?
bol
0
 
smaccaAuthor Commented:
Have removed anchor altogether and still no luck. Positive this is a bug with IE! Getting desperate for solution now - may have to edit layout. Thanks for comments.
0
 
wilson1000Commented:
Hi smacca

I'm not too sure what other CSS declarations you have in your style sheets that might be effecting the positioning of this logo.

I have been able to get your logo to appear by setting the following modifications

Styles
------------


div.logo {
  position: absolute;
  top: 10px;
  left: -239px;
}
 
a.homeLogo {
  display:block;
  background: url("http://www.hesgroup.com.au/images/home_logo.jpg") top left;
  width: 249px;
  height: 224px;
}
--------------

I have moved the logo to the following position just within the header and relocated using the above CSS :

<div id="Header">
      <div class="logo"><a href="#" class="homeLogo"></a></div>

---------------

Without downloading and examining your code, I won't be able to offer you an explanation as to why this disappears in IE.

Hopefully this will be a solution you find satisfactory.
0
 
wilson1000Commented:
I very much like Kravimir's solution :@)
0
 
smaccaAuthor Commented:
Hi guys,

I will look at solutions today - just providing a quick response - the reason I did not use a background-image is because I wanted to make the logo a link to the homepage (i.e. anchor) - I guess without using javascript (onclick='location.href=homepage') and hand css cursor problems.

Thanks again for your great input - I am excited about solutions - great work.
0
 
smaccaAuthor Commented:
Thank you so much everyone for the fantastic help.
I will award points on participation and weight of solution.

To resolve, I had to set "clear:right" for the "#Header" and "#GlobalMenu".

Great work all! What a blessing EE is!
0
 
smaccaAuthor Commented:
Exact and precise answer!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.