WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Forced/Fixed Height for Menu? (4 posts)

  1. aptdesignonline
    Member
    Posted 4 years ago #

    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;
    }
  2. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    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.

  3. jbbrwcky
    Member
    Posted 4 years ago #

    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.

  4. aptdesignonline
    Member
    Posted 4 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic