Hello and welcome to our community! Is this your first visit?
Register
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
    Posts
    51
    Thanks
    5
    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
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    First things first, we have 40 errors showing up right now in the HTML:
    http://validator.w3.org/check?uri=ht...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.

    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
    •