Added Space Below Divs

Question

I have a layout in which the navigation is a set of divs stacked on top of each other. Typical stoy, "It works with every browser ever except the worst ones, IE." I want it to not have any space in between the divs in IE.

Here is the URL: http://www.drmsmaggio.com/

I had this problem before when I didn't declare the doctype, but that isn't the problem here because there is a doctype set.

Any help is greatly appreciated.

Answer 1

You could try applying a little bottom margin to your divs and get rid of the 'spacer' divs that sit between your menu divs.

margin-bottom: 7px;

Answer 2

It looks like right after "What is Chiropractic?" there is a paragraph with text that is black. That should be some of your problem ;o)

Answer 3

First, I would move to a 4.01 strict doctype instead of the transitional one. Transistional triggers quirks mode in all the browsers which means that you end up with interesting little problems like this.

Second, I would use a reset style sheet to remove most of the inherited padding / margins. Then I would set those padding / margins using CSS where it was necessary.

btw, you should see this question. Joel Coehoorn had a great response about how to build consistently rendered pages.