[RESOLVED] css problem with menubar

[wilku]

Hello.

I'm trying to create horizontal menu bar with css. It wouldn't be a problem with tables, but I'm trying to go with the wind and operate with css only. Here's my content for the menu:

<div id="header">
<div id="header_l">
<img src="img/hd_logo.gif">
<span class="menu1">Zbiorniki</span>
<img src="img/hd_div1.gif"> <!-- this is the first division bar -->
<span class="menu1">Studzienki</span>
<img src="img/hd_div1.gif"><span class="menu1">Rurociągi</span>
<img src="img/hd_div1.gif"><span class="menu1">Przepływ grawitacyjny</span>
<img src="img/hd_div1.gif"><span class="menu1">Przepływ ciśnieniowy</span>
<img src="img/hd_mid.gif"> <!-- this is the s shaped thing that changes background -->
</div>
<div id="header_r">
<span class="menu2">Drukuj</span>
<img src="img/hd_div2.gif"> <!-- second division line -->
<span class="menu2">Przelicz</span>
</div>
</div>

and the associated css:

#header {
width: 100%;
height: 50px;
background-image: url("img/hd_bg2.gif");
}
#header_l {
float: left;
height: 50px;
background-image: url("img/hd_bg1.gif");
}
#header_r {
text-align: right;
float: right;
height: 50px;
}
.menu1 {
vertical-align: top;
padding-top: 15px;
height: 50px;
background-image: url("img/hd_bg1.gif");
}
.menu2 {
vertical-align: top;
padding-top: 15px;
height: 50px;
background-image: url("img/hd_bg2.gif");
}

Now it looks like this: http://img231.imageshack.us/img231/9701/testkv5.png

The problem is with class menu1 and menu2. As you see vertical-align:top works (that's the text that is at the top), but padding-top doesn't work - I would like text to appear somewhere near the middle of it.
What I tried and didn't work:
- setting vertical-align to middle - text just went at the bottom :(
- setting margin-top of header_r and header_l id 15 px and the same ammount of pixels negative margin on menu1 and menu2 - it kind of worked, but left 15px of the menu background below the menu bar.

If you have any suggestions or want to say "this should be done entirely different", don't hesitate to do so. I'm just starting with css.
Thank you.
Tomasz Wilk

EDIT: I noticed that there were spaces between 15 and px but it didn't help musch, correcting this.

[sneakyimp]

You should try using Firefox and install the plugin called Firebug. This will allow you to inspect each element on the page you are viewing and determine what CSS is being applied to a given element. IT also shows the inheritance from any parent elements as well.

In this particular case, I think your problem is that you are also using float. I don't know exactly how float works - it confuses me. If you remove the float descriptors then you'll probably get more predictable behavior.

[wilku]

Thanks for the replay. The float was used to make left and right part of the menu appear at one level, not one beneath the other.
I still don't know why padding didn't worked, but I solved the problem with position: relative and top: 15px; on menu1 and menu2 class.