Unordered Lists and Ordered Lists Break In IE7 and IE6

HTML & CSS
1

LINK-

Can someone take a look and let me know why the ul and ol tags (or maybe it is the list items) fall apart in IE7 and IE6? In advance, I appreciate everyones help!

Todd

2

I’m not a scripting expert, and I don’t have IE<8 so I’m relying on Dragonfly and Browsershots here, but my guess would be that it could be because you have used getElementsByClass, which is not supported by older versions of IE

3

I’m guessing that it would have nothing to do with the JavaScript and everything to with the CSS styles. Again, just a guess…

4

When I asked for screenshots in IE6 and IE7 in Browsershots (you can see them at http://browsershots.org/http://www.templephotography.net/pricing/ for a short while), on both occasions there was an alert box thrown up by the script that deals with curvyCorners. As I said, I don’t have those versions of IE, so I was just guessing at what might have gone wrong.

5

I got seven script error warnings, five due to curvyCorners and two were cufon, when using IE Tester. So check the scripts documentation on how they should be used.

Page is broken in IE6, slightly damaged in IE7 and nearly okay in IE8.
Just had a look at web stats for one of my sites, registering 3.9% on IE6 :D, so we may be there soon. (but other sites say 6 - 8% IE6)

EDIT I get even more script warnings on the portfolio page - visitors are just going to leave in frustration with all these error messages.

6

To sort the bad broken bits in IE, try using conditional statement to feed it different margins or padding for the bits inside the big rounded corner box - images are pushed over to the right and cause the rest of the content to drop down a bit sometimes.

7

Okay, I removed the Curvy Corners JavaScript (not sure why that was not working) and I have tested the page with a conditional comment for IE6 and it appears to work better but I am not completely sure why.

LINK-
http://www.templephotography.net/pricing/index.102910.html

I reduced margins and widths on the DIVs #left and #right until the content was no longer spilling over and wrapping underneath each other, but again I am not sure if this was a great fix.

Can someone take a look at the original link below and tell me why the content in the DIV #right is wrapping under the DIV #left content? Is it a double margin bug? I tried adding the display: inline; and it did not do the trick.

LINK-
http://www.templephotography.net/pricing/index.html

Thanks for looking into this for me!

Todd