Solved

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

Posted on 2008-10-02
24
1,299 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
Comment Utility
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
Comment Utility
CSS has been corrected as much as possible for this design. Thanks for the suggestion.
0
 
LVL 5

Expert Comment

by:mverschoof
Comment Utility
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
 

Author Comment

by:smacca
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
How about not using IMG src attribute, but using CSS to load the image?
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:smacca
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
I very much like Kravimir's solution :@)
0
 

Author Comment

by:smacca
Comment Utility
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
Comment Utility
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
Comment Utility
Exact and precise answer!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to count occurrences of each item in an array.

772 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now