Forced/Fixed Height for Menu?

  • Resolved aptdesignonline

    (@aptdesignonline)


    16 years, 7 months 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;
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • Michael

    (@alchymyth)

    16 years, 7 months 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.

    jbbrwcky

    (@jbbrwcky)

    16 years, 7 months 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.

    Thread Starter aptdesignonline

    (@aptdesignonline)

    16 years, 7 months 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!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Forced/Fixed Height for Menu?’ is closed to new replies.