fmz 14

Having resolved the positioning in the last question, I have an element that disappears in IE.

There is a ul#social-links that is positioned in the upper right hand corner of the red box. It shows up fine in FF and Safari but does not show in IE7 or IE8. If you mouse over the area the mouse responds.

Any clues why the content is not showing?


3 answers

Guffa 316
This was chosen as the best answer

It's because the background images of the links aren't included from the style sheet. I'm not sure why the style is considered invalid, but you can try to put a space between the url and repeat:  { background: url(../_images/soc-email.jpg)no-repeat bottom center; width: 44px; }

to:  { background: url(../_images/soc-email.jpg) no-repeat bottom center; width: 44px; }

And the same for the other links, of course.

Answered over 9 years ago by Guffa
  • Hi Guffa, Amazing what difference a single space will make. Thank for the help. fmz over 9 years ago

It might be a bug in IE. I've come across this problem when using an absolutely positioned list in the vicinity of a floated element. A simple fix for this problem is to insert an empty <div> between the two. I can't test in IE right now, so best if you try it yourself first. Here's a link explaining the possible bug:

Answered over 9 years ago by Joost van der Borg
danwellman 5600

Also, you should float the <li> elements in the social list rather than floating the <a> elements inside them

Answered over 9 years ago by danwellman
  • Thanks for the good tip here. fmz over 9 years ago
  • no problem :) danwellman over 9 years ago