The basic layout of this web page is done. However, I am trying to make it a more fluid design, so if a potential user was to increase their text size the basic layout remains intact. So I removed the height attribute of 15px from the nav div. Now if a user increases their text size the nav menu does not jump out of it's container - I think that looks much better. Although in doing so it brings about a problem. In Firefox, and viewing in a small screen resolution, the navigation :hover background does not fully fill it's space. For some reason (unknown to me) the nav div grows in height by one pixel on the bottom when the screen size is made smaller. Surprisingly IE7, 6, and 5 display it how I prefer, by completely filling it's nav menu container, (in other words, the nav div stays the same size regardless of screen size in IE7 6 and 5). Safari and Opera display it the same as firefox regardless of screen size. Now I can just give the nav div back it's height of 15px and this solves the problem, but like I said, I am trying to make a more fluid design. I have tried everything (for hours and hours) and have not been able to find a solution. Can someone please take a look and let me borrow some of your expertise? Thanks! http://www.buildingblockshomedaycare.com/centered.html
I new it - it was probably something simple and staring me right in the face. All I had to do was remove the line-height from the body tag and walla - looks perfect and the same across all the browsers now. I will just add back the line-height to the p, ol, and anything else I need it for. Your help was NOT instrumental in helping me find the solution - Thank you very much. Yipeee!