WordPress.org

1. aptdesignonline
   Member
   Posted 1 month 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
   Member
   Posted 1 month 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 1 month 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 1 month 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!

Reply

You must log in to post.