css inherit is getting me down

Question

I am currently working on a menu that uses superfish. It is completely customizable via css but I am experiencing a very very frustrating problem.

The 2nd tier menu somehow inherits values from I-know-not-where and whatever I do to change it completely destroys the entire layout. It looks as if the text is somehow an entire line further down then it should be. The mouseover style is working as it should be however.

Another frustrating thing is that I need to move the text from the tier1 menu items to the bottom of the bar - nothing I have tried so far has moved only the text and not the entire item. If anyone has a solution for that it would be greatly appreciated as well.

you can see what I mean here: http://redaxo.witconsult.de/ it concerns the tier 2menues on menu item 2 and 5 (Leistungen & Kontakt)

here is the code I believe is responsible for the problem: the entire code here: http://redaxo.witconsult.de/files/superfish.css

Thanks a ton!!!

.sf-menu {
    float:          left;
    margin-bottom:  1em;

}

.sf-menu a {
    text-indent: 7px;
}


.sf-menu a, .sf-menu a:visited  {
    /* visited pseudo selector so IE6 applies text colour*/
    color: #333;
}

.sf-menu li {       /*///////////// menu lvl 1 /////////////*/
    color:          #333;
    width:          118px;
    line-height:    85px;
    font-weight:    normal;
    font-size:      14px;
    text-decoration:none;
    background:     url(../images/menu/menuitem.png);
}

.sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active {
    color:          #DDD;
    line-height:    85px;
    background:     url(../images/menu/menuitem-mo.png);
}

.sf-menu li li {    /*///////////// submenu lvl 2 ///////////////////*/
    color:      #ddd;
    font-size:  12px;
    top:        50px;
    height:     26px;
    background:     url(../images/png_black40per.png);
}

.sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active {
    color: #333;
    line-height: 26px;
    background: url(../images/png_white40per.png);

Firefox's [Firebug](http://getfirebug.com/) extension should let you see where the inherited styles are coming from. — drudge, Mar 17 '11 at 23:28
`line-height: 85px;` this will prevent the text in the menus from being at the bottom. — Sam, Mar 18 '11 at 02:01
Thank you very much! The line-height attribute was the root of my problem... I solved it by replacing them by just "line =". Now however I have the problem that all the texts are always aligned at the top of the element. valign does not work and I dont see any other way to move the text to the bottom / middle. Shouldn't vertical-align: bottom; acchieve this? Somehow the text does not respond at all to vertical-align. :( — j00ls, Mar 18 '11 at 22:21

score 1 · Accepted Answer · answered Mar 19 '11 at 13:07

1

In response to your new problem - that the text is at the top now instead of the bottom - change the height of your anchor elements <a> and add some padding-top:

/* superfish.css line 59 */
.sf-menu a {
    color:#DDDDDD;
    text-indent:7px;
    height:         50px; /* ADDED */
    padding-top:            35px; /* ADDED */
}
/* superfish.css line 78 */
.sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active {
    color:          #DDD;
    height:         50px; /* CHANGED */
    background:     url(../images/menu/menuitem-mo.png);
    padding-top:            35px; /* ADDED */
}

... if you can't edit superfish.css add a rule like this one somewhere else:

#site-content .sf-menu li a {
    height:         50px;
    padding-top:            35px;
}

PS Please update the question body to reflect the changes in your question ;)

answered Mar 19 '11 at 13:07

Richard JP Le Guen

28,364
7
89
119

Thanks, I will try it out right away! :) Concerning your PS.: is it common here to remove the old question and replace it with the new one, or should I just add the new problem up above? Sorry, I really like how this site works but I'm new here and still need to figure out what the best use standards are. – j00ls Mar 19 '11 at 18:19
@j00ls - Usually, ask a new question is the more conventional way to go about things. But since I answered your "new" question... I'm not sure. – Richard JP Le Guen Mar 19 '11 at 19:33
Thanks, I couldnt just copy-paste, a few more changes were needed but I got the general idea. I got height and padding working together now working the way they should. :) – j00ls Mar 20 '11 at 15:05
@j00ls - Hey, I appreciate the accepted answer, and it's a little rude of me to ask, but could you toss me a +1? I have enough rep to be satisfied, but I'm hoping to get a [bronze CSS badge](http://stackoverflow.com/badges/333/css) - for which I need +1s, not accepted answers. It's your call though :) – Richard JP Le Guen Mar 20 '11 at 18:16

css inherit is getting me down

1 Answers1