5 replies [Last post]
JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 11 years 8 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

A good day, guys.. Well, I'm redesigning my site and am testing some CSS rules to "beautify" my site. Everything seems fine until I encountered this bump. The page loads and shows okay in Mozilla FireBird or Mozilla, but fails in IE. Could someone guide me on how to make this work in IE. Any help would be very much appreciated.

page: test page
css: my css

EDIT: Both the page and the CSS validate okay accdg to W3C.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 14 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Page Behaves Differently in IE

Hi JaGGeR,
First thing I would try is adding top and left values to

Quote:
.menu-item a.item:hover span
I think as you have left them out they are defaulting to 0 and then moving of the screen with the negative margin.

Hope that helps

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 11 years 8 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

Page Behaves Differently in IE

Tried setting the top and left values but there is still no display in IE. And tried setting the top and left values only (without the margins), the "pop up" stays in one place only with changing text but still no display in IE. This has really got me stomped (making it work for IE). And I'm considering not doing this pop-ups anymore. Sad

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 14 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Page Behaves Differently in IE

Hi JaGGeR,
Have you seen this article by Eric Meyer Pure CSS Popups

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 11 years 8 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

Page Behaves Differently in IE

Just discovered it thru you. So far, it's quite informative. Will be trying out some of the routines. Thanx for the link. Will be reporting my progress as soon as I have finished. Wink

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 11 years 8 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

Page Behaves Differently in IE

I cleaned up the CSS rules and added some revisions. The problem was solved. The thing I don't fully understand is the solution. Apparently, IE needs to somehow "redraw" the menu item in order to display the pop up. The solution was the addition of this:

.menu a:hover {
   background: #B1C5DF;
}
This value is 1 greyscale higher than the original value of #B0C4DE.

And the difference in the box model rendering by IE and other more standards-compliant browser was solved by this (effect on more standards-compliant browser i.e. mozFB):

html>body .sub-body .menu a:hover span {
   margin: -21px 0px 0px 129px;
}

See the effect at:
page: new test page
css: new css

Thanx for the help, Tony