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
    Jan 2011
    Posts
    38
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Question CSS problem with margin-bottom in Firefox & Chrome

    See: http://purebredcats.org

    In the table under "Cat Health" in the unordered list, there's a div around the table and the bottom and top lines of the div are supposed to be blue. The top one shows, but the bottom one does not in Firefox and Chrome.... it does show in IE, but <sigh> that means to me that I've got an error (or more) that IE forgives me for but the stricter browsers do not. I can't find it. I've spent a good part of the day researching online and trying to find what is causing it. I've trie several work-arounds with no success. PLEASE help!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello LMercer,
    Looking at the page http://purebredcats.org/cat_health.htm ...
    Quite a few problems there, the biggest may be the lack of DocType. Have a look at what the validator finds - http://validator.w3.org/check?verbos...cat_health.htm

    See the links about validation in my signature line. There are also links about DocTypes and Tables there.

    You have .menu set at width: 250px; but the content you put in it is much wider than that. The box model shows how content cannot be larger than it's containing element - margin/padding/border all count when figuring sizes.

    Try commenting out that width and see how it looks.
    Code:
    .menu {
    /*width: 250;*/
     border-top: 2px solid #9197AC; 
     border-bottom: 2px solid #9197AC; 
     background: #FFFFFF;
      margin-left: 30; 
      margin-top: 5; 
      margin-right: 25; 
      margin-bottom: 5;
    	
    }
    Last edited by Excavator; 01-02-2011 at 09:28 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    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
    •