When I try to move "Dinning Org" a little bit up because it's too close to the bottom line by adjusting padding-top from 15px to 10px, it does not move it up, but instead narrows the line height. Please click the attached picture for them shown on screen. How can the content be shown in middle vertically and also the "Organizer" button lines nicely with it? How to change the css sheet to put these two align to left and right side separately instead by space?
Please click on the attachment to see how it's shown on Firefox: 1.jpg
Padding is applied inside the 'box' and margins are outside so if you change the padding then that will give you the result you have. If you want to move closer to the top then reduce your margin-top instead.
Also you are declaring .menu_tp class twice in your css, these need to be combined into one 'rule'
Thanks, rtrethewey and simplypixie for your help.
I change them as your suggestion, but it seems change nothing. Please check the attached picture for the result. Where is the problem? I look at the box model, the result just doesn't match. 2.jpg
Any number of things in a page can affect the rendering of an element. The doctype, cascade, surrounding tagging, and invalid code to name a few. If you want a diagnostic, then post a link to the page so we can see everything that is going on in the page.