html css menu issue

[evilgandhi]

hey there awesome people!!

i'm having problem on my rollovers to get my menu working?

the text and image seem to move a few pixels to the left on hover?

any help would be greatly appreciated...

http://gandhiproductions.herobo.com/...test/menu.html

thank you

Gandhi

[Excavator]

Hello evilgandhi,
Do you like it better when you remove that negative margin? See highlighted in red -

nav li a:hover {
	position:absolute;
	height:100px;
	width:100px;
	margin:-2px;
	border:2px solid #a3a3a3;
}

[Excavator]

Maybe more like this?

nav li {
  height: 100px;
  width: 100px;
	background:#6194aa;
	float:left;
	list-style:none;
	margin-left:5px;
	
}
nav li a {
  height: 90px;
  width: 90px;
	position:absolute;
  padding: 5px;
	line-height:165px;
	text-decoration:none;
	color:#FFF;
	background-image:url(image/martani-icons.png);
  border: 2px solid transparent;
  display: block;
}

nav li a:hover {
  margin: -2px 0 0 -2px;
	border:2px solid #a3a3a3;
}

[evilgandhi]

the above code isn't right either........ i don't want any movement....... the only thing that should appear is the 2px border around each box on hover.....

if you have a hotmail/outlook account login and click the arrow to the right of the outlook logo see the menu and drop from the top..

that what i what it to look like and function like (with out it dropping down)

here is a screenshot of said menu

http://gandhiproductions.herobo.com/...2001.09.45.png

thank you for help, and the speed of your response

G

[Excavator]

I see what you're wanting. Have a look at it this way -

nav li {
  height: 100px;
  width: 100px;
	background:#6194aa;
	float:left;
	list-style:none;
	margin-left:5px;
	
}
nav li a {
  height: 86px;
  width: 86px;
	position:absolute;
  padding: 5px;
	line-height: 155px;
	text-decoration:none;
	color:#FFF;
	background-image:url(image/martani-icons.png);
  border: 2px solid #fff;
  display: block;
}

nav li a:hover {border:2px solid #a3a3a3;}

Here's why that works - See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

[evilgandhi]

legend.

thank very much!!!!

G