Space between DIV tags

HTML & CSS
1

I’ve search a lot, and know there are articles out there to fix this issue, but I can’t find a fix.

http://tinyurl.com/ayfajzu

Scroll down to the menu. There are gaps between the top and middle div, and middle and bottom divs. I’ve tried margins, padding, borders, spacer divs…nothing seems to be working

Here is my CSS:

#menuborder {
position: relative;
width: 100%; /* for IE 6 */
margin-left: auto;
margin-right: auto;
}

.menutop {
position: relative;
height: 40px;
width: 690px;
background-image: url(http://216.172.172.109/~ctoddm/wp-content/themes/striking/images/bg-content-top.png);
}

.menumiddle {
position: relative;
background-image: url(http://216.172.172.109/~ctoddm/wp-content/themes/striking/images/bg-content-middle.png);
width:690px;
background-repeat:repeat-y;
}

.menubottom {
position: relative;
height: 40px;
width: 690px;
background-image: url(http://216.172.172.109/~ctoddm/wp-content/themes/striking/images/bg-content-btm.png);
padding: 0 1px 0 1px;
}
2

Try this:



<div class="menu_manager" style='background-color:#f00; margin-top: -25px'>
3

There are empty paragraph tags between the menutop and menumiddle that are creating the space. Deleting the <p></p> should fix it.

4

I didn’t add these. WordPress or TinyMCE must have? I don’t even see them when editing the page.

5

This worked great! Minus the color, and the bottom needed to adjust the # of pixels. Beautiful :slight_smile: Thank you so much

6

I am pleased it worked, the colour was just to visually make the alignment easier :slight_smile:

7

And that it did :slight_smile: