Solved

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

Posted on 2008-10-02
24
1,314 Views
Last Modified: 2013-11-19
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

0
Comment
Question by:smacca
  • 12
  • 4
  • 4
  • +3
24 Comments
 
LVL 5

Expert Comment

by:mverschoof
ID: 22623542
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
 

Author Comment

by:smacca
ID: 22623758
CSS has been corrected as much as possible for this design. Thanks for the suggestion.
0
 
LVL 5

Expert Comment

by:mverschoof
ID: 22623875
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:smacca
ID: 22624397
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
 
LVL 5

Expert Comment

by:mverschoof
ID: 22624449
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
 

Author Comment

by:smacca
ID: 22624783
Cheers mverschoof .
Client cannot understand why I cannot fix this - it is becoming a HUGE problem for me!!
0
 
LVL 5

Expert Comment

by:mverschoof
ID: 22624841
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
 
LVL 4

Expert Comment

by:wilson1000
ID: 22626703
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
 

Author Comment

by:smacca
ID: 22627109
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
 

Author Comment

by:smacca
ID: 22627168
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
 
LVL 22

Expert Comment

by:prairiedog
ID: 22628094
How about not using IMG src attribute, but using CSS to load the image?
0
 

Author Comment

by:smacca
ID: 22630393
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
 
LVL 4

Expert Comment

by:wilson1000
ID: 22634725
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
 

Author Comment

by:smacca
ID: 22819693
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
 

Author Comment

by:smacca
ID: 22819699
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 22824080
What is your result if you remove the anchor tag from around that image?  Does it reliably show in IE now?
bol
0
 

Author Comment

by:smacca
ID: 22832564
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
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 22834599
It looks like IE does't like that first clearing <div>. Remove it and give #Header  "clear:right".
0
 
LVL 4

Expert Comment

by:wilson1000
ID: 22835018
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
 
LVL 4

Expert Comment

by:wilson1000
ID: 22835056
I very much like Kravimir's solution :@)
0
 

Author Comment

by:smacca
ID: 22837588
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
 

Author Comment

by:smacca
ID: 22837985
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
 

Author Closing Comment

by:smacca
ID: 31502350
Exact and precise answer!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question