We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

menu item does not stretch to full size on hover.

doramail05
doramail05 asked
on
Medium Priority
527 Views
Last Modified: 2012-05-11
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

Comment
Watch Question

Commented:
use like this
*
{
padding: 0px;
margin: 0px
}

Author

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

Author

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

Commented:
Its wrong.

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

padding:0px;
margin:0px;

Author

Commented:
but it became like that,
menuoniis6.jpg
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

Author

Commented:
solved with othe post
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.