[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 188
  • Last Modified:

CSS problem

The attached code snippet is my css for menu bar.

It works fine with 1 line, like the word, "Home", "Contacts", etc. When it comes to longer menu item like "Product & Services", after selection, the word will drop down a little. I have attached 2 images for reference, one is before selection and one is after selection, where the word will have a brownish background.

 Default menu The problem with products & services.
#menu-template {
	width: 900px;
	height: 141px;
	float: left;
	background: url("../images/bg2-2.gif") no-repeat;
}
#menu-template #horizontal_navi {
	width: 896px;
	height: 50px;
	float: left;
	position: relative;
	margin-top: 50px;
/*	background: #c8c1b9 url("../images/navi_bg.gif") no-repeat top left;*/
	padding:0 2px;
}

#menu-template #horizontal_navi ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#menu-template #horizontal_navi li {
	float: left;
	text-align: center;
	vertical-align: middle;
}
#menu-template #horizontal_navi li a.but_hnavi {
	width: 98px;
	height: 40px;
	padding-top: 10px;
	margin: 0;
	color: #895b3c;
	font:14px Times;
	text-decoration: none;
	display: block;
	border-left: 3px solid #ffbfbe;
}
#menu-template #horizontal_navi li a:hover.but_hnavi, #menu-template #horizontal_navi li a.current {
	/*background-color: #9b978e;*/
	background: #ffffff url("../images/hover.gif") no-repeat;
	width: 98px;
	height: 40px;
	padding-top: 10px;
	color: #895b3c;
	font:14px Times;
	border-left: 3px solid #ffbfbe;
}
#menu-template #horizontal_navi li a.but_hnavi2 {
	width: 98px;
	height: 35px;
	padding-top: 15px;
	margin: 0;
	color: #895b3c;
	font:14px Times;
	text-decoration: none;
	display: block;
	border-left: 3px solid #ffbfbe;
}
#menu-template #horizontal_navi li a:hover.but_hnavi2, #menu-template #horizontal_navi li a.current {
	/*background-color: #9b978e;*/
	background: #ffffff url("../images/hover.gif") no-repeat;
	width: 98px;
	height: 35px;
	padding-top: 15px;
	color: #ffffff;
	font:14px Times;
}

Open in new window

0
rolandmy
Asked:
rolandmy
2 Solutions
 
Gurvinder Pal SinghCommented:
i am assuming that .current is the class that is assigned to a menu item to make it highlight.

just add display block it these styles
0
 
rolandmyAuthor Commented:
what do u mean by just add display block it these styles?
0
 
rolandmyAuthor Commented:
added display: block;

still the same...no change.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
rolandmyAuthor Commented:
Attached is my whole css file. Hope it can be clear for you.
style.css
0
 
MrunalCommented:
this is the problem is css only.
To track this quickly, check your site / page in Mozilla Firefox with firebug.

also check if padding top is correct what you want for css :

#menu-template #horizontal_navi li a.but_hnavi2 {
      width: 98px;
      height: 35px;
      padding-top: 15px;  // this line ..........
0
 
rolandmyAuthor Commented:
The whole thing went haywire if I change padding -top. Let me try firebug. Will get back to you.
0
 
rolandmyAuthor Commented:
Don't see any errors. The menu part for "company profile" and "product and services" still drop down after selection. Help!
0
 
Kyle HamiltonData ScientistCommented:
give this a whirl:

 
#menu-template {
        width: 900px;
        height: 141px;
        float: left;
        background: url("../images/bg2-2.gif") no-repeat;
}
#menu-template #horizontal_navi {
        width: 896px;
        height: 50px;
        float: left;
        position: relative;
        margin-top: 50px;
/*      background: #c8c1b9 url("../images/navi_bg.gif") no-repeat top left;*/
        padding:0 2px;
}
#menu-template #horizontal_navi ul {
        list-style: none;
        margin: 0;
        padding: 0;
}
#menu-template #horizontal_navi li {
        float: left;
        text-align: center;
        vertical-align: middle;
}
#menu-template #horizontal_navi li a{
        color: #895b3c;
        font:14px Times;
        text-decoration: none;
        display: block;
        border-left: 3px solid #ffbfbe;
        margin: 0;
}
#menu-template #horizontal_navi li a.but_hnavi {
        width: 98px;
        height: 40px;
        padding-top: 10px;
}
#menu-template #horizontal_navi li a.but_hnavi2 {
        width: 98px;
        height: 35px;
        padding-top: 15px;
}
#menu-template #horizontal_navi li a:hover.but_hnavi, 
#menu-template #horizontal_navi li a:hover.but_hnavi2, 
#menu-template #horizontal_navi li a.current {
        /*background-color: #9b978e;*/
        background: #ffffff url("../images/hover.gif") no-repeat;
        color: #ffffff;
}

Open in new window


0
 
rolandmyAuthor Commented:
Solved it by changing height and padding-top to 35px and 15px respectively for my menu item.

Thanks mroonal. Thanks kozai.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now