CSS Browser Specific Problems

Jamatu

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

phileplanet

Umm...why not just make the image smaller?

sprinqles

I would second phileplanet's suggestion to make the image smaller. The image overlaps your 3rd column in Firefox and when you browse it with explorer, it stays at the bottom maybe because of the image's size. Try resizing the image so it would fit your second column better. Smile

Jamatu

It's kind of hard when my website is based around funny pictures, their will alot of different sized pictures that people upload and for me to edit each one would be quite difficult.

I have thought about using javascript to decrease the size of the image if it's too large. Even if I do, the IE6 problem will still be there.