CSS problem with margin-bottom in Firefox & Chrome

[LMercer]

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!

[Excavator]

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.

.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;
	
}