Crazy IE bug, go figure!!

[getelemental]

Hello everyone!

I have an ANNOYING bug in IE that you can view here:
drupal.freightsecurity.net (http://drupal.freightsecurity.net)

First off, before the page loads, make sure the cursor is outside of the browser window.

Once the page loads, the corners of block elements on the left side of the page are not rounded as they should be. BUT, the text IS in the right position. Also, the main menu is stuck, positionally, too high.

Now move the cursor into the browser window.

At this point, the corners properly round and the main menu area drops into place.

HOWEVER...

The text that was correctly inside the block elements has now moved way off whack and the actual main menu links have jumped to the top of the page!!

Now, if you hover the cursor over any of the main menu links, they will fall into their proper place.

Here is another interesting tidbit of information that I discovered tonight. If you load the page, with the cursor outside of the browser window, then go to another IE browser tab and change pages in that tab, the elements on the page in question will be in their proper positions if you return back to the original tab. CRAZY!!

If it is advisable to post code, please let me know and I will. In the meantime, I can tell you that the text in the left blocks that shift are using 'position:relative' and do not encounter the error if I remove this style.

Please let me know if there is any other information that I could provide that might shed any light on this. I've been working on getting these IE issues fixed for too long now and am out of ideas.

Thanks in advance!
Erik

[Frank62]

Erik,

Are you sure that the problems aren't due to one or more of the 29 code errors the W3C-validator finds?

See http://validator.w3.org/#validate_by_uri .

- Frank

[WebJoel]

W3C Validator cites errors that are explicit, but often, dismissable, -at least as far as short-term functionality is concerned. TIDY cites a number of potentially page-busting 'warnings' that could have alot to do with things not working/looking right... Screenshot image:

[getelemental]

Sorry to post this with all of these validation issues. I am going over all of this right now and will post back my findings.

Thanks!

[Frank62]

That sounds more than reasonable, Joel. Which Tidy do you use that gives such a beautiful output? I have one in my HTML-Kit, but that does not give such a nice graphical list.

[getelemental]

I would be interested in the TIDY as well, that way I can see if I have resolved the issues that are in your screenshot.

[WebJoel]

Google "TIDY" and "HTML Validator by TIDY". Available as a stand-alone, or as an installable extention with FIREFOX (<-- my preferred method).

"TIDY" offers a 'one-button click' to automatically REPAIR all "warnings". Actual "errors" you need to fix manually, -in case TIDY fixes them incorrectly (unrecognized tags, etc., -things TIDY does not recognize).
"warnings" are often 'ignored' by browers, -but sometime (well, fairly often!), a "warning" is a page-busting event.

[getelemental]

Thanks for the Tidy info Joel! I have it installed and have been working through the warnings that it gave me. I have the majority of them addressed now and it seems like the outstanding ones stem from the use of NiftyCube which generates the rounded corners without use of image files. This functionality is coming from a Drupal module and I have logged an issue at drupal.org to see if anyone there has any insight.

Joel, if you or anyone else reading this has any other suggestions or can see anything else amiss, please let me know!

Thanks again for everyones attention.

[Frank62]

Erik,

If it looks like a Nifty Corners problem, smells like one and tastes like one, it probably is one. The upside of the story is that there is a much simpler way of getting round image corners: cut them. With MS Photo Editor of W98. I found a stand-alone version on the internet a couple of months ago, but I can't remember where.

Once open, Image > Crop > Corners >Style > Round. With Size you can set the radius of the rounding.

Much less code, too.

- Frank

[WebJoel]

CSS3 will offer a round border edge as a regular declaration 'border-radius-something'. Mozilla/Firefox and Safari 3 already support this:

<div style=" background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;" >

Wait another 10 years and IE v.+14 (-beta) might...