PDA

View Full Version : Internet Explorer Div Spacing Problems



cmcconnell
Aug 13th, 2009, 08:10 PM
Here is the site: http://www.cmcconnell.com/web/web.html

You'd think I could figure this out, but I am having trouble with the spacing underneath each portfolio item, which are all #portfolio-item-box.

There should be 20px of space under each portfolio item, and it works fine to add 20px of either padding or margin or even a 20px white bottom border in Firefox - but I can't get this to work in IE. Is this margin collapse even though it doesn't work with padding or a white border??

Urgent issue - please help!

Rowsdower!
Aug 13th, 2009, 08:20 PM
First things first, we have 40 errors showing up right now in the HTML:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.cmcconnell.com%2Fweb%2Fweb.html&charset=%28detect+automatically%29&doctype=Inline&group=0&ss=1&verbose=1

The majority of these appear to be due to using certain IDs more than once in a page. Change these items to classes instead of IDs (and remember to change the "#" to a "." in the CSS for each). The rest of the errors look to be some issues with the footer's menu. I'll let you sort those out. :D

Now, from what I can see you have only added margin-bottom:20px; to "portfolio-item-box" which would be the cause of the problem (margin collapsing as you mentioned earlier). Change that to padding-bottom:20px; and you should be all set.

Also, you have a bit of "divitis" in there. For example, using a div to wrap an image for your portolio items is totally unnecessary. You might want to streamline things like that a bit.