Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2009
    Thanked 0 Times in 0 Posts

    Internet Explorer Div Spacing Problems

    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!

  2. #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Some say it's everything.
    Thanked 397 Times in 390 Posts
    First things first, we have 40 errors showing up right now in the HTML:

    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.

    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts