I recently converted my website from a table based layout to a XHTML Strict CSS based layout. I have two problems with CSS on my website that I need help with.
Here is the CSS file for reference: http://pics.uk.to/styles/main.css
Problem 1
My website displays incorrectly in IE6 I use a container to hold everything in place with a 40px border each side. This works fine in Firefox and IE7 but in IE6 the left border doesn't look how it's supposed to and has parts that stick out. This doesn't happen on all pages only on certain ones.
Problem 2
This layout error happens across all browers. In Firefox whenever an image is displayed that is larger than the div content container it overlaps the right navigation bar and the main container if large enough.
In IE6 & IE7 the image gets pushed below the right navigation bar and the main container if large enough.
What I want to happen when an image is too large is the right navigation bar and the main container should get pushed to the right so the visitor will need to use the scroll bar.
Firefox
IE6 & IE7
Here is the CSS file for reference: http://pics.uk.to/styles/main.css
Problem 1
My website displays incorrectly in IE6 I use a container to hold everything in place with a 40px border each side. This works fine in Firefox and IE7 but in IE6 the left border doesn't look how it's supposed to and has parts that stick out. This doesn't happen on all pages only on certain ones.
Problem 2
This layout error happens across all browers. In Firefox whenever an image is displayed that is larger than the div content container it overlaps the right navigation bar and the main container if large enough.
In IE6 & IE7 the image gets pushed below the right navigation bar and the main container if large enough.
What I want to happen when an image is too large is the right navigation bar and the main container should get pushed to the right so the visitor will need to use the scroll bar.
Firefox
IE6 & IE7
