I have been coding from scratch my new website - a fairly big task for a newbie web designer. I have finally finished the main layout, and when I validated it at the w3 validation page, it said that I had no code errors in the XHTML. However, I think there is something wrong with my CSS code, as while the site displays correctly in Firefox, Opera, Safari, Netscape, and other Gecko-based browsers (Camino, K-Melon, and yes, I know Opera/Safari aren't Gecko-based), it is completely messed up in IE 6 and 7. The two major problems are thus (pictures below):
1. The image 'sider1.jpg', a placeholder image on the top menu, always displays in its entirety, even when the screen resolution dictates it cannot. This offsets the menu, and makes the page layout look out of sync. Also, the image below, 'sider2.jpg' is displaying next to sider1 instead of below it.
2. The main content (div #content) is displayed BELOW the left menu bar under a strange blue line - even though the float attribute is specified.
The page can be found here
, the CSS code here
. A picture of the site running in Firefox is here
, the same page in IE 7 is here
. Sorry for picture size, and the dithering - I needed to keep the filesizes low. I can post larger versions, as well as pictures in other browsers, if needed.
Thanks in advance for the help!