Need help with IE

nloding · May 31st, 2006, 03:26 PM

I am building a website with CSS menus. There is a :hover pseudo-element applied so that when the mouse moves over it, two things happen: if there is a submenu, it appears; and the background of the menu item "highlights" using a 1px wide graphic repeated. Works brilliantly in Firefox, Safari, Opera, and Netscape -- but in IE, whenever the cursor moves from one menu item to another, the entire containter div "flashes" like it is reloading.

Also in IE, the center column with main content is missing completely, but it is there in all the other browsers. It was there when I originally developed the code, then I uploaded it and have been tweaking it since -- and it disappeared ... no idea what I touched.

I should be able to figure this out, but I can't -- I've been staring at the code for way too long and need some extra help.

So ... HELP!!! :)

Here's the site:

http://dev.internationalbowl.org/index.html

THANKS!

--Nathan Loding

PS: While you're at it, critique the layout and design elements, as this is a professional site -- any and all input is welcome!

richard.york · May 31st, 2006, 06:38 PM

The image flashing sounds like the flicker bug:
http://dean.edwards.name/my/flicker.html

Missing content:
Sometimes putting a relative position on the missing content and applying a z-index will correct that.

For other possible remedies, check out the bugs on http://www.positioniseverything.net

Can't check out your site right now, I'm on my PowerPC Mac, at the moment, and can't load up Windows.

HTH!

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

nloding · June 1st, 2006, 04:37 PM

The flicker bug does look like the issue. I'll talk with the server admin about that fix. As for the missing content, it is already in a relative position, with a z-index of 0 ... perhaps the containter div has a z-index of 1, hence it's missing. I'll change that tonight, see what happens.

nloding · June 2nd, 2006, 01:59 PM

I set the z-index to 1 higher than the container div, and the white middle column still does not show up. I browsed through Position Is Everything and didn't see anything that applied to my specific situation. I think I messed up my code somewhere and can't see it. Anyone want to take a gander?? PLEASE??? :)

richard.york · June 2nd, 2006, 02:10 PM

Try invoking "layout" in IE, I think the best way to do this now is to apply the proprietary zoom property. There are other ways to do it, but with IE7 coming out and the changes associated with it, zoom is about the only one that won't affect content as viewed in both IE6 and IE7.

Apply zoom: 1; to the missing <div>, and its parents up to <body>.

Google on hasLayout Internet Explorer for more information on the mysterious hasLayout property.

HTH!

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

meow · June 2nd, 2006, 02:17 PM

Either make this image smaller: http://dev.internationalbowl.org/ima...test_gif-2.gif or make the sidebars more narrow. Your margin-padding math is probably wrong. Not sure exactly how this works, it isn't the box model thing, but IE doesn't like it when it gets to tight. You can comment out the image in the source and you'll see that fixes the problem.

--
http://yupapa.com

nloding · June 2nd, 2006, 03:26 PM

Rich -- tried that, but it didn't work :( However ...

meow -- THANK YOU! It was the image. I found that if I commented out the "position: relative" statement, the column showed up, but wasn't aligned properly to the top. Commenting out the image fixed it -- so I will drop the width of that image 20px or so. THANKS!