• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 518
  • Last Modified:

menu item does not stretch to full size on hover.

notice that the menu layout is different from visual web developer's output (local) than IIS output's

visual web developer
the visual web developer
iis
 iis
trying to make the menu on iis stretch to the size of menu item on hover.
css
---
.Item {
	line-height:13px;
	text-align:center;
	margin-left:0px;
	height:73px;
	background-color:transparent;
	padding-top:9px;
}

.level1 
{
    background-image:url(../images/buttongradient01_jpg.jpg);
    background-repeat:repeat-x;
    
    color:black;
	font-size:12px;
	font-weight:bold;
	font-family:Arial;
	text-transform:uppercase;
	text-align : center;
	border-width:1px;
	/*padding-top: 10px;*/
	/*padding:20 50px 30 55px;*/
	height:22px;
	width:180px;
	margin-right: 10px;
    /*margin-left:10px;*/
    
}



.level1 a:hover
{
    background-image:url(../images/buttongradientreverse01_jpg.jpg); 
    background-repeat:repeat-x;
    color:#B04905;
    
	font-size:12px;
	font-weight:bold;
	font-family:Arial;
	text-transform:uppercase;
	border-width:1px;
	/*padding:10 10px 10 15px;*/
    height:22px;
	width:180px;
   
}

Open in new window

0
doramail05
Asked:
doramail05
  • 5
1 Solution
 
myaspnetCommented:
use like this
*
{
padding: 0px;
margin: 0px
}
0
 
doramail05Author Commented:
after trying with the padding and margin

that is what i have
.level1 
{
    background-image:url(../images/buttongradient01_jpg.jpg);
    background-repeat:repeat-x;
    
    color:black;
	font-size:12px;
	font-weight:bold;
	font-family:Arial;
	text-transform:uppercase;
	text-align : center;
	border-width:1px;
	/*padding-top: 10px;*/
	/*padding:20 50px 30 55px;*/
	/*height:30px;*/
	/*width:180px;*/
	/*margin-right: 10px;*/
    /*margin-left:10px;*/
    padding-right : 0px;

	padding-left : 0px;	

	padding : 30px;
	
	padding-top: 15px;
   

}



.level1 a:hover
{
    background-image:url(../images/buttongradientreverse01_jpg.jpg); 
    background-repeat:repeat-x;
    color:#B04905;
    
	font-size:12px;
	font-weight:bold;
	font-family:Arial;
	text-transform:uppercase;
	border-width:1px;
        
	
    height:30px;
	width:180px;

	padding-right : 0px;

	padding-left : 0px;	

	padding : 30px;
	
	padding-top: 15px;
   
}

Open in new window

menuiis03.jpg
0
 
doramail05Author Commented:
up to here,

still bit to go with stretching the hover effect to the whole menu item
.Item {
	line-height:-13px;
	
}


.level1 
{
    background-image:url(../images/buttongradient01_jpg.jpg);
    background-repeat:repeat-x;
    
    color:black;
	font-size:12px;
	font-weight:bold;
	font-family:Arial;
	text-transform:uppercase;
	text-align : center;
	border-width:1px;
	/*padding-top: 10px;*/
	/*padding:20 50px 30 55px;*/
	/*height:30px;*/
	/*width:180px;*/
	/*margin-right: 10px;*/
    /*margin-left:10px;*/
	position :static;
    padding-right : 0px;

	padding-left : 0px;

	padding-right : 0px;	

	padding : 30px;
	
	padding-top: 10px;
   
	padding-bottom : 5px;

}



.level1 a:hover
{
    background-image:url(../images/buttongradientreverse01_jpg.jpg); 
    background-repeat:repeat-x;
    color:#B04905;
    
	font-size:12px;
	font-weight:bold;
	font-family:Arial;
	text-transform:uppercase;
	border-width:1px;
        position :static; 
	
    height:30px;

	width:180px;
	
	padding-right : 0px;

	padding-left : 0px;	

	padding : 30px;

	padding-top: 12px;

	padding-bottom : 5px;
   
}

Open in new window

menuiis05.jpg
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.

 
havj123Commented:
Its wrong.

Add this to both .level1 & .level1 a:hover original classes (before the above padding changes):

padding:0px;
margin:0px;

0
 
doramail05Author Commented:
but it became like that,
menuoniis6.jpg
0
 
doramail05Author Commented:
solve with this,

.level1 
{
    /**/
    color:black;
	font-size:12px;
	font-weight:bold;
	font-family:Arial;
	text-transform:uppercase;
	text-align : center;
	border-width:1px;
    margin-right:5px;
	position :relative;
    padding-right : 0px;
	padding-left :20px;
	padding-right : 20px;	
	padding-top: 10px;
  
	padding-bottom : 5px;

		width:180px;
	
}

li.static
{
    margin-right:5px;
   background-image:url(../images/buttongradient01_jpg.jpg);
    background-repeat:repeat-x;
}

li.static:hover
{
    margin-right:5px;
   background-image:url(../images/buttongradientreverse01_jpg.jpg);
    background-repeat:repeat-x;
}

Open in new window

0
 
doramail05Author Commented:
solved with othe post
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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