Doctype difficulties

[Evanzgurl]

I have never used DOCTYPES on my websites, but I noticed that with my current coding, adding padding to an image only shows up in Firefox, but not in IE (ex: http://avrilhq.com - "T in the Park Photos" update on 10 Jul 2007). I noticed that other sites with this effect have doctypes.

When I added a doctype (any doctype - I've tried them all), the padding shows in the images in IE, and everything looks fine, however it now looks like this: http://img338.imageshack.us/img338/2159/messedupvq8.jpg in Firefox. It seems like nothing can look right in both browsers. Is something I can do to fix this? Thanks in advance?

[MidiMagic]

The problem is not doctypes, but the actual difference in the way IE and Firefox treat box objects.

When you define the size of a box object, IE uses that size as the outside edge of the margin. So the margin, border, and padding are all INSIDE that dimension.

When you define the size of a box object, FF uses that size as the inside edge of the padding. So the margin, border, and padding are all OUTSIDE that dimension.

So the trick is to make sure the box object you define a size for has no margin, border, or padding.

Your images are breaking apart, which means they are not uploaded as single images. Why are you doing that? It's stupid. Upload images as complete image files, and they will stay together.

I can see where padding or margins on objects causes the sliding over of some objects. Use the following style as a class to take away these attributes from your box objects, and they will fit together properly:

.fxbox {margin: none; border: none; padding: none;}