Support » Themes and Templates » Forced/Fixed Height for Menu?

  • Resolved aptdesignonline

    (@aptdesignonline)


    Howdy,

    I’m having some real problems with a menu I’m using to list my static Pages. I’m using the Sndbox theme and styling it with CSS.

    You can see the site I’m working on here:
    http://e3ncw.com/page/1

    What I’m working on is trying to force that top menu to be exactly 31 pixels tall so that the background image for each ul li shows fully.

    I think I’m missing something easy here? The CSS I’m using is below, thanks for your help!

    #topmenu {
    	width: 900px;
    	font-size: 14px;
    	text-transform: uppercase;
    	color: #a82125;
    	text-align: right;
    
    	height: 31px;
    	line-height: 31px;
    }
    
    #topmenu ul {
    	margin: 0px;
    	height: 31px;
    	line-height: 31px;
    }
    
    #topmenu ul li {
    	display: inline;
    	background: url(images/menu-bckgnd.jpg) repeat-x 0 bottom;
    	margin-left: 5px;
    
    	height: 31px;
    	line-height: 31px;
    }
    
    #topmenu ul li a {
    	text-decoration: none;
    	color: #a82125;
    }
    
    #topmenu ul li a:hover {
    	color: #563839;
    }
Viewing 3 replies - 1 through 3 (of 3 total)
  • Michael

    (@alchymyth)

    Forum Moderator

    adding some ‘padding’ to the style changes the height of nav buttons:

    #topmenu ul li {
    	display: inline;
    	background: url(images/menu-bckgnd.jpg) repeat-x 0 bottom;
    	margin-left: 5px;
    
    	padding: 8px 0px 7px 0px;
    }

    the ‘height’ and ‘line-height’ can be removed without effect.
    checked in firefox only.

    To force something to be an exact height try this bit of css:

    #snippet {
     min-height:31px;
     max-height:31px;
     height:auto !important;
     height:31px;
     overflow:hidden;
    }

    I haven’t tested it with max-height, just with min-height, but it should work.

    Thanks for the help guys!

    I added some padding to the left and right, and for some reason I was then able to use the

    height: 31px;
    	line-height: 31px;

    to set the height exactly. Pretty sure I tried that before…

    Thanks again for the quick assistance!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Forced/Fixed Height for Menu?’ is closed to new replies.