I am designing a page that I have working pretty much the way I want it to in firefox, but it has some issues on IE. Here is a link to the page:
I have 3 main problems in IE:
1. the main box that holds the CD information (3rd set of boxes down from top of page) breaks on to a new row instead of flowing next to the box to the left of it, the way it does in firefox. I thought IE might be seeing the widths or margins I'd set differently, so I've tried playing with that, but no luck.
2. I am creating the background that goes behind both of these boxes with three images - a header, footer and main one that does a repeat:y behind the two boxes. I place these three images in a div that holds the two content boxes. The end result is that both boxes look like they are of equal height, no matter how much content is in either of them. This actually works in IE, but what is odd is that the height of the header and footer are both twice the height of their images (they are supposed to be 8px high - I've speced that in the css, but IE makes them 16px or so)
3. I am using a similar background technique for the "song listings" that are in the CD info box. I do a rollover that has a background image that changes on rollover. Again, this works fine in Firefox, but as you can see, is pretty jacked up in IE. Again, I thought it might be a width issue, so I tried playing with the widths of the different divs that make up the rows, but no effect. Also, another strange thing - the first row displays correctly in IE. But the second row, the exact same code, gets jacked up.
I know this is a pretty long post, but if anyone can give me any insight to the above, it would be much appreciated.
thanks in advance
You've got a lot of
You've got a lot of validation errors - you need to fix them up before we can go any further (namely, you can't nest divs inside anchors).