Lowering menu buttons height Lowering menu buttons height
 

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Main Menu

Lowering menu buttons height

Started by Hercules24, September 22, 2007, 07:17:15 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Hercules24

Is it possible to lower the height of the main menu buttons in CPG to something like the font height?
I've attached a yellow arrow to show what I mean.
I know the CPG addicts will also tell me to upgrade from 1.4.12 to 1.4.13, but I've already manually applied the security issue fix.
Thanks for looking into this.

Joachim Müller

Always post a link to your gallery - http://www.kuikens.com/pictures/

Quote from: Hercules24 on September 22, 2007, 07:17:15 PM
Is it possible to lower the height of the main menu buttons in CPG to something like the font height?
Sure, just reduce the height and line-height values (or remove them) in your stylesheet..top_menu_bttn a {
        background: #4A4A4A;
        background-image : url(images/menu_button.gif);
        background-position : left;
        padding-left : 6px;
        padding-right : 6px;
        padding-top : 0px;
        padding-bottom : 0px;
        display: block;
        /*height : 35px;
        line-height : 35px;*/
        text-decoration: none;
        color: #FFFFFF;
        font-size: 14px;
}
Use tools like the Web Developer Extension to figure such things out.

Hercules24

Thanks Gaugau, I tried that before, but the only difference I see is that the mouse-over height lowes to the 15 I changed it in, the total button height stays unchanged.
I also changed the height values in .top_menu_left_bttn a and .top_menu_right_bttn a to 15, and still nothing changed.
Finally I also edited all the menu botton/over gifs to 15 height and top panel jpgs to 15 height, but still the menu button height stays the same.
Is there something I'm overlooking?


Joachim Müller

/* Colors used in this style sheet:
    Hex 000000 = RBG   0,   0,   0 = black
    Hex 222222 = RBG  34,  34,  34 = black
    Hex 343333 = RBG  52,  51,  51 = black
    Hex 3F3F3F = RBG  63,  63,  63 = light black
    Hex 454444 = RBG  69,  68,  68 = light black
    Hex 4A4A4A = RBG  74,  74,  74 = dark grey
    Hex 5F5F5F = RBG  95,  95,  95 = dark grey
    Hex 666666 = RBG 102, 102, 102 = dark grey
    Hex 838383 = RBG 131, 131, 131 = medium grey
    Hex BDBEBD = RBG 189, 190, 189 = medium grey
    Hex BFC0C3 = RBG 191, 192, 195 = medium grey
    Hex C6B78E = RBG 198, 183, 142 = beige
    Hex E6E6E6 = RBG 230, 230, 230 = light grey
    Hex EFEFEF = RBG 239, 239, 239 = light grey
    Hex F0AF00 = RBG 240, 175,   0 = orange
    Hex ff0000 = RBG 255,   0,   0 = red
    Hex FFFFCC = RBG 255, 255, 204 = light yellow
    Hex FFFFFF = RBG 255, 255, 255 = white
*/

/* Foreground color definition */
body { color : #FFFFFF; }
.topmenu, .topmenu a { color : #FFFFFF; }
.topmenu a:hover { color : #FFFFFF; }
.tableh1, .tableh1a, .tableh1_compact, .navmenu, .navmenu a, .sortorder_cell, .sortorder_options, .statlink, .statlink a { color : #FFFFFF; }
.statlink a:hover { color : #FFFFFF; }
.tableh2, .tableh2_compact { color : #FFFFFF; }
.textinput, .listbox, .radio, .checkbox { color: #FFFFFF; }
.alblink, .alblink a, .catlink, .catlink a { color : #FFFFFF; }
a,  .bblink a, .user_thumb_infobox a  { color: #FFFFFF; }
a:hover, .bblink a:hover, .user_thumb_infobox a:hover, .alblink a:hover, .catlink a:hover { color : #FFFFFF; }
.button, .comment_button, .admin_menu_thumb, .admin_menu_thumb a, .admin_menu_thumb a:hover, .admin_menu, .admin_menu a, .admin_menu a:hover { color : #FFFFFF; }
.comment_date { color : #FFFFFF; }
.footer, .footer a, .footer a:hover { color : #FFFFFF; }

/* Background colors definition */
body { background-color: #000000; }
.textinput, .listbox, .radio, .checkbox { background-color: #000000; }
.tableh1, .tableh1_compact, .navmenu, .navmenu a, .navmenu a:hover  {         background : #000000 ; }
.tableh2, .tableh2_compact, .tablef, .img_caption_table th {         background : #242424 ; }
.tableb, .tableb_compact, .thumbnails, .img_caption_table td { background : #000000 ; }

/* Borders for input controls */
.textinput, .listbox, .button, .comment_button, .admin_menu, .admin_menu_thumb  {        border: 1px solid #666666; }
.image { border: 1px solid #000000; }
.imageborder { border: 1px solid #000000; background-color:#000000; margin-top: 30px; margin-bottom: 30px; }
.image1 { border: 1px solid #ff0000; }

.maintable, .maintablea, .maintableb {        background-color: #222222; }
.img_caption_table th, .img_caption_table td { border-top : 1px solid #000000; }

/* Fonts definition */
body { font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif; }
.tableh1, .tableh1a, .catlink, .tableh2 { font-family: Verdana, Geneva, Arial, sans-serif; }
.textinput, .listbox, .radio, .checkbox { font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif; }
.button, .comment_button, .sortorder_options, .admin_menu_thumb { font-family: Arial, Helvetica, sans-serif; }

table {
        font-size : 12px;
}

body {
        font-size : 12px;
        margin: 0px;
        padding:0px;
}

h1{
        font-weight: normal;
        font-size: 26px;
        font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        text-decoration: none;
        padding-left : 390px;
        color: #FFFFFF;
        margin: 2px;
}

h2 {
        font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
        font-weight: normal;
        font-size: 10px;
        text-align: center;
        margin: 2px;
        color: #FFFFFF;
}

h3 {
        font-weight: bold;
        font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
        font-size: 15px;
        padding-left : 390px;
        color: #FFFFFF;
        margin: 2px;
}

h4 {
        font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
        font-weight: bold;
        font-size: 12px;
        text-align: center;
        margin: 2px;
        color: #FFFF00;
}

p {
        font-size: 100%;
        margin: 2px 0px;
}

ul {
        margin-left: 5px;
        padding: 0px;
}

li {
        margin-left: 10px;
        margin-top: 4px;
        margin-bottom: 4px;
        padding: 0px;
        list-style-position: outside;
        list-style-type: disc;
}

.top_panel {
                background-image: url(images/top_panel_r1_c4.jpg);
                background-repeat : repeat-x;
                border-collapse:collapse;
                margin: 0;
                padding: 0;
}

.top_panel_left {
                background-image: url(images/top_panel_r1_c1.jpg);
                background-repeat : no-repeat;
                background-position: top left;
                margin: 0;
                padding: 0;
}

.top_panel_right {
                background-image: url(images/top_panel_r1_c2.jpg);
                background-repeat : no-repeat;
                background-position: top right;
                margin: 0;
                padding: 0;
}



.top_panel_btm {

                    background: #4A4A4A;
                    background-image: url(images/top_panel_r2_c3.jpg);
                    background-repeat : no-repeat;
                    background-position:right;
                    padding-top : 0;
            padding-bottom : 0;

}

.top_menu_left_bttn {
        white-space:nowrap;
}
.top_menu_left_bttn a {
               background: #4A4A4A;
        background-image : url(images/left_menu_button.gif);
        background-repeat : no-repeat;
        background-position : left;
        padding-left : 12px;
        padding-right : 6px;
                   padding-top :3px;
        padding-bottom : 0;
        display: block;
        height : 35px;
        line-height : 35px;
        text-decoration: none;
        color: #FFFFFF;
        font-size: 14px;

}

.top_menu_left_bttn a:hover {
        background: #4A4A4A;
        background-image : url(images/left_menu_button_over.gif);
        background-position : left;
        background-repeat : no-repeat;
        text-decoration: none;
        color: #FFFFFF;

}

.top_menu_right_bttn {
        white-space:nowrap;
}

.top_menu_right_bttn a {
        background: #4A4A4A;
        background-image : url(images/right_menu_button.gif);
        background-repeat : no-repeat;
        background-position : right;
        padding-right : 22px;
        padding-left : 6px;
        padding-top : 0px;
        padding-bottom : 0;
        display: block;
        text-decoration: none;
        color: #FFFFFF;
        font-size: 14px;
}

.top_menu_right_bttn a:hover {
        background: #4A4A4A;
        background-image : url(images/right_menu_button_over.gif);
        background-position : right;
        background-repeat : no-repeat;
        text-decoration: none;
        color: #FFFFFF;
}

.top_menu_bttn {
  white-space:nowrap;
}
.top_menu_bttn a {
        background: #4A4A4A;
        background-image : url(images/menu_button.gif);
        background-position : left;
        padding-left : 6px;
        padding-right : 6px;
        padding-top : 0px;
        padding-bottom : 0;
        display: block;
        text-decoration: none;
        color: #FFFFFF;
        font-size: 14px;
}

.top_menu_bttn a:hover {
        background: #4A4A4A;
        background-image : url(images/menu_button_over.gif);
        text-decoration: none;
        color: #FFFFFF;
}

.textinput {
        font-size: 100%;
        padding-right: 3px;
        padding-left: 3px;
}

.listbox {
        font-size: 100%;
        vertical-align : middle;
}

.button {
        font-size: 100%;
        background-image : url(images/button_bg.gif);
        background-position : bottom;
}

.comment_button {
        font-size: 100%;
        background-image : url(images/button_bg.gif);
        background-position : bottom;
        padding-left: 3px;
        padding-right: 3px;
}

.radio {
        font-size: 100%;
        vertical-align : middle;
}

.checkbox {
        font-size: 100%;
        vertical-align : middle;
}

a {
        text-decoration: none;
}

a:hover {
        text-decoration: none;
}

.bblink a {
        text-decoration: none;
}

.bblink a:hover {
        text-decoration: underline;
}

.maintable {
        margin-top: 2px;
        margin-bottom: 2px;
/*        border: 1px solid #000000; */
}

.maintablea {
        margin-top: 5px;
}

.maintableb {
        margin-bottom: 2px;
/*        border: 1px solid #000000; */
}

.tableh1 {
        padding-right: 10px;
        padding-left: 10px;
        border-bottom: 1px solid #000000;
        border-right: 1px solid #000000;
        height: 25px;
        background-image: url(images/tableh1_bg.gif);
}

.tableh1a {
        border-bottom: 1px solid #000000;
        color: #C6B78E;
}

.tableh1a td {
        border: none;
        height: 30px;
        font-size: 120%;
        font-weight: bold;
        color: #FFFFFF;
        background-image: url(images/tableh1a_bg_middle.gif);
}

.tableh1a img {
        display: block;
}

.tableh1_compact {
        padding-top: 2px;
        padding-right: 5px;
        padding-bottom: 2px;
        padding-left: 5px;
        border-bottom: 1px solid #000000;
        border-right: 1px solid #000000;
        height: 25px;
        background-image: url(images/tableh1_bg.gif);
}

.tableh2 {
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.tableh2_compact {
        padding-top: 2px;
        padding-right: 5px;
        padding-bottom: 2px;
        padding-left: 5px;
}

.tableb {
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.tableb_compact {
        padding-top: 2px;
        padding-right: 5px;
        padding-bottom: 2px;
        padding-left: 5px;
}

.tablef {
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
}

.catrow_noalb {
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.catrow {
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.album_stat {
        font-size : 85%;
        margin: 5px 0px;
}

.thumb_filename {
        font-size: 100%;
        display: block;
}

.thumb_title {
        font-weight : bold;
        font-size: 80%;
        padding: 2px;
        display : block;
}

.thumb_caption {
        font-size: 80%;
        padding: 1px;
        display : block;
}

.thumb_caption a {
        text-decoration: underline;
}


.thumb_num_comments {
        font-weight: normal;
        font-size: 85%;
        padding: 2px;
        font-style : italic;
        display : block;
}

.user_thumb_infobox {
        margin-top: 1px;
        margin-bottom: 1px;
}

.user_thumb_infobox th {
        font-weight : bold;
        font-size: 100%;
        margin-top: 1px;
        margin-bottom: 1px;
        text-align : center;
}

.user_thumb_infobox td {
        font-size: 85%;
        margin-top: 1px;
        margin-bottom: 1px;
        text-align : center;
}

.user_thumb_infobox a {
        text-decoration: none;
}

.user_thumb_infobox a:hover {
        text-decoration: underline;
}

.sortorder_options {
        padding: 0px;
        margin: 0px;
        font-weight: normal;
        font-size: 80%;
        white-space: nowrap;
}

.navmenu {
        font-weight: bold;
        border: none;
        background-image: url(images/tableh1_bg.gif);
}

.navmenu img {
        margin-top: 5px;

}

.navmenu a {
        position: relative;
        display: block;
        padding-left: 5px;
        padding-right: 5px;
        text-decoration: none;
        border-bottom: 1px solid #000000;
        border-left: 1px solid #838383;
        border-right: 1px solid #000000;
        background-image: url(images/tableh1_bg.gif);
        line-height: 25px;
        height : 25px;
}

.navmenu a:hover {
        text-decoration: none;
        border-bottom: 1px solid #3F3F3F;
        border-left: 1px solid #3F3F3F;
        border-right: 1px solid #3F3F3F;
}

.admin_menu_thumb {
        font-size: 90%;
        background-image : url(images/button_bg.gif);
        background-position : bottom;
        font-weight: bold;
        margin-top: 0px;
        margin-bottom: 0px;
        width: 85px;
}

.admin_menu_thumb a {
        text-decoration: none;
        display: block;
        position: relative;
        padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 10px;
        padding-right: 10px;
}


.admin_menu_thumb a:hover {
        text-decoration: underline;
}

.admin_menu {
        font-size: 90%;
        background-image : url(images/button_bg.gif);
        background-position : bottom;
        background-repeat: repeat-x;
        background-color: #BFC0C3;
        margin-top: 0px;
        margin-bottom: 0px;
        text-align: center;
}

.admin_menu a {
        text-decoration: none;
        display: block;
        position: relative;
        padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 2px;
        padding-right: 2px;
}

.admin_menu a:hover {
        text-decoration: underline;
}

td #admin_menu_anim {
        background-image : url(images/button_bg_anim.gif);
}

.comment_date{
        font-size: 90%;
        vertical-align : middle;
}

.image {
        margin: 2px;
}

.display_media {
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.thumbnails {
        padding: 5px;
}

.footer {
        font-size: 10px;
        margin-top: -13px;
        line-height: 85%;
}

.footer a {
        text-decoration: none;
}

.footer a:hover {
        text-decoration: underline;
}

.statlink a {
        text-decoration: none;
}

.statlink a:hover {
        text-decoration: underline;
}

.alblink a {
        text-decoration: none;
}

.alblink a:hover {
        text-decoration: underline;
}

.catlink {
        display: block;
        margin-bottom: 2px;
}

.catlink a {
        text-decoration: underline;
}

.catlink a:hover {
        text-decoration: underline;
}

.topmenu {
        line-height : 130%;
        font-size : 110%;
}

.topmenu a {
        text-decoration : underline;
}

.topmenu a:hover  {
        text-decoration : underline;
}

.img_caption_table {
        border: none;
        width : 100%;
        margin : 0px;
}

.img_caption_table th {
        font-size : 100%;
        padding-top: 4px;
        padding-right: 10px;
        padding-bottom: 4px;
        padding-left: 10px;
}

.img_caption_table td {
        padding-top: 6px;
        padding-right: 10px;
        padding-bottom: 6px;
        padding-left: 10px;
        white-space: normal;
}

.debug_text {
        border: #BDBEBD;
        background-color: #EFEFEF;
        width : 100%;
        margin : 0px;
}

.clickable_option {
        font-weight: bold;
        cursor : default;
}

.listbox_lang {
        color: #C6B78E;
        background-color: #4A4A4A;
        border: 1px solid #4A4A4A;
        font-size: 80%;
        font-family: Arial, Helvetica, sans-serif;
        vertical-align : middle;
}

#SELECT_LISTS {
        width: 300px;
        height: 50px;
        text-align:right;
        float: right;
}


#SUB_MENU {
            background-image: url(images/top_panel_r2_c2.jpg);
        background-position: left;
        padding-left: 10px;
}
#SYS_MENU {
        position:relative;
        width:800px;
        height:35px;
        left: 35px;
        top: 5px;
        margin:-17px;
        padding:0;
        z-index:1;
        visibility: hidden;
}

#SELECT_FLAGS {
        text-align: center;
}

#vanity a {
        display:block;
        width:57px;
        height:20px;
        margin: 3px 20px;
}
#vanity img {border:0}
#v_php {float:left;background-image:url(../../images/powered-php.gif);}
#v_php:hover {background-image:url(../../images/h_powered-php.gif);}
#v_mysql {float:left;background-image:url(../../images/powered-mysql.gif);}
#v_mysql:hover  {background-image:url(../../images/h_powered-mysql.gif);}
#v_xhtml {float:right;background-image:url(../../images/valid-xhtml10.gif);}
#v_xhtml:hover {background-image:url(../../images/h_valid-xhtml10.gif);}
#v_css {float:right;background-image:url(../../images/valid-css.gif);}
#v_css:hover{background-image:url(../../images/h_valid-css.gif);}
works for me

Hercules24

Then my PC is probably cursed or something, when I removed the: height : 35px; line-height : 35px; from the .top_menu_bttn a values the only thing that changes is the mouse over height that is lowered to around the font size.
The total button height stays 35px in IE, FF, Opera & Netscape when I view the page.

Joachim Müller

Works as expected for me, working directly on the stylesheet on your page (using the Web Developer Extension for Firefox). I have attached screenshots: before.jpg shows a height of 21 pixels for the menu bar (with your stylesheet in place), after.jpg shows the menu bar with 18 pixels height (using the stylehseet edit I posted).
Not sure what else to recommend.

Hercules24

Hi Gaugau, I probably did not formulate my question well enough, I try to make a screenshot of what I mean.
The height of the button (which shows when seeing the mouse-over or refreshing your page by F5) can be easily adjusted and is currently 21px as shown in both our screenshots.
What I ment was to lower what's probably called something like 'menu button background height' and is currently 35px as shown by the yellow bar on the right.
It's probably being filled by images like 'menu_button.gif', but editing the height of all those gifs from 35 to 15 didn't change anything.
I'm sorry for being unclear, but I hope this screenshot helps a bit.

Joachim Müller

The height of 35 pixels has been deliberately added by you. Take a look at the HTML output of your page (snippet):<div id="MENUS">

<div id="SUB_MENU">                         <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>

                                        <td><img src="themes/kuikens/images/menu_spacer.gif" width="2" height="35" border="0" alt="" /><br /></td>
                                        <td class="top_menu_bttn">
                                                <a href="http://www.kuikens.com" title="Kuikens.com Homepage">Home</a>
                                        </td>
                                        <td><img src="themes/kuikens/images/menu_spacer.gif" width="2" height="35" border="0" alt="" /><br /></td>
                                        <td class="top_menu_bttn">

                                                <a href="http://www.kuikens.com/advertising.html" title="Advertise Here">Advertising</a>
                                        </td>
                                        <td><img src="themes/kuikens/images/menu_spacer.gif" width="2" height="35" border="0" alt="" /><br /></td>
                                        <td class="top_menu_bttn">
                                                <a href="index.php?cat=0" title="Picture Gallery Home">Albums</a>
                                        </td>
                                        <td><img src="themes/kuikens/images/menu_spacer.gif" width="2" height="35" border="0" alt="" /><br /></td>
                                        <td class="top_menu_bttn">

                                                <a href="http://www.kuikens.com/ceo.html" title="CEO Kuikens.com">CEO</a>
                                        </td>
                                        <td><img src="themes/kuikens/images/menu_spacer.gif" width="2" height="35" border="0" alt="" /><br /></td>
                                        <td class="top_menu_bttn">
                                                <a href="http://www.kuikens.com/events.html" title="Party Calendar">Events</a>
                                        </td>
                                        <td><img src="themes/kuikens/images/menu_spacer.gif" width="2" height="35" border="0" alt="" /><br /></td>
                                        <td class="top_menu_bttn">

                                                <a href="http://www.kuikens.com/pics.html" title="Picture Gallery FAQ">FAQ</a>
                                        </td>
                                        <td><img src="themes/kuikens/images/menu_spacer.gif" width="2" height="35" border="0" alt="" /><br /></td>
                                        <td class="top_menu_bttn">
                                                <a href="http://www.kuikens.com/gala.html" title="Gala Foto's">Gala Foto's</a>
                                        </td>
                                        <td><img src="themes/kuikens/images/menu_spacer.gif" width="2" height="35" border="0" alt="" /><br /></td>
                                        <td class="top_menu_bttn">

                                                <a href="http://www.kuikens.com/guest.html" title="Guestbook">Guestbook</a>
                                        </td>
                                        <td><img src="themes/kuikens/images/menu_spacer.gif" width="2" height="35" border="0" alt="" /><br /></td>
                                        <td class="top_menu_bttn">
                                                <a href="http://www.kuikens.com/info.html" title="About Kuikens.com">Info</a>
                                        </td>
                                        <td><img src="themes/kuikens/images/menu_spacer.gif" width="2" height="35" border="0" alt="" /><br /></td>
                                        <td class="top_menu_bttn">

                                                <a href="http://www.kuikens.com/links.html" title="Links">Links</a>
                                        </td>
                                        <td><img src="themes/kuikens/images/menu_spacer.gif" width="2" height="35" border="0" alt="" /><br /></td>
                                        <td class="top_menu_bttn">
                                                <a href="http://www.kuikens.com/models.html" title="TFP Models">Models</a>
                                        </td>
                                        <td><img src="themes/kuikens/images/menu_spacer.gif" width="2" height="35" border="0" alt="" /><br /></td>
                                        <td class="top_menu_bttn">

                                                <a href="thumbnails.php?album=topn&amp;cat=0" title="Most Viewed Pics">Most Viewed</a>
                                        </td>
                                        <td><img src="themes/kuikens/images/menu_spacer.gif" width="2" height="35" border="0" alt="" /><br /></td>
                                        <td class="top_menu_bttn">
                                                <a href="http://www.kuikens.com/other.html" title="Other Funny Stuff">Other Stuff</a>
                                        </td>
                                        <td><img src="themes/kuikens/images/menu_spacer.gif" width="2" height="35" border="0" alt="" /><br /></td>
                                        <td class="top_menu_bttn">

                                                <a href="http://www.kuikens.com/partylog.html" title="Party Reports">Party Logs</a>
                                        </td>
                                        <td><img src="themes/kuikens/images/menu_spacer.gif" width="2" height="35" border="0" alt="" /><br /></td>
                                        <td class="top_menu_bttn">
                                                <a href="http://www.kuikens.com/wallpaper.html" title="Wallpapers">Wallpapers</a>
                                        </td>
                                        <td><img src="themes/kuikens/images/menu_spacer.gif" width="2" height="35" border="0" alt="" /><br /></td>
                                        <td width="100%">&nbsp;</td>

                                </tr>
                        </table> </div>
<div id="SYS_MENU">          |  <!-- BEGIN home -->
        <a href="http://www.kuikens.com" title="Go to the home page">Home</a> |
  <!-- END home -->                  <!-- BEGIN login -->
        <a href="login.php?referer=index.php" title="Log me in">Login</a>
  <!-- END login -->  | </div>

</div>
Can you see the lines that are responsible for the height? You have set the spacer to have a height of 35 pixels with the line<img src="themes/kuikens/images/menu_spacer.gif" width="2" height="35" border="0" alt="" />
Edit themes/kuikens/theme.php and edit it accordingly.
Get rid of the line breaks there as well - it makes little sense to set a particular height and then come up with a line break afterwards, over which you have little control.

This entire thread sounds a bit like the bad joke "Doctor, doctor, whenever I hit myself on the head it hurts so badly...". ::)

Hercules24

Thanks Gaugau, things are starting to fall in place.
I don't know much about coding or programming, so it's just a bit of experimenting for me and slowly starting to understand things on the way.
Menu button hight is showing now as desired, so the problem is solved.
My current theme is a modification from 'igames' where the lines:
<img src="themes/kuikens/images/menu_spacer.gif" width="2" height="35" border="0" alt="" /><br /></td>
Are already there, so I didn't notice them.