7 replies [Last post]
franco_bao
Offline
Regular
Montreal, Canada
Last seen: 14 years 36 weeks ago
Montreal, Canada
Timezone: GMT-4
Joined: 2006-05-03
Posts: 21
Points: 0

I have validated my site with W3C and have passed. I have a little menu quirk that is driving me mad. When I click on the menu, the li area seems to collapse when i click. Can someone help me out to why I am getting this problem.

This is one of the pages that contain the the menu in question.

http://www.interdoc.com/site/company/profile.htm

Thanks in advance

franco_bao
Offline
Regular
Montreal, Canada
Last seen: 14 years 36 weeks ago
Montreal, Canada
Timezone: GMT-4
Joined: 2006-05-03
Posts: 21
Points: 0

Addition

Forgot to mention that this problem only occurs in Firefox. Thanx

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Help with menu

don't apply the padding on the hovers and focus you should only need declare it on the actual anchor or a:link ruleset, but consider using height and line height to achieve your li height.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

franco_bao
Offline
Regular
Montreal, Canada
Last seen: 14 years 36 weeks ago
Montreal, Canada
Timezone: GMT-4
Joined: 2006-05-03
Posts: 21
Points: 0

Thanks

Thanx Hugo,

The problems was actually a mistype on my part, but your suggestion made me work with the code and somehow I saw the error. What I had was actually a style attribute in repetition.

#Menu ul li a:hover, #Menu ul li a:focus {
list-style:none;
text-decoration:none;
color:#666666;
/*line-height:16px;*/
padding:6px 0px 6px 2px;
background:#CCCCCC;
border-right:8px solid #FF9900;

#Menu ul ul li a:hover, #Menu ul li a:focus {
text-decoration:none;
color:#666666;
padding:3px 0px 3px 6px;
border-left:4px solid #FF9900;
border-right:none;
background:#FFFFFF;
}

It should have been obvious to me since the focus is only relative to Firefox and not IE. So I simply added the ul to the style to correct the sublist attribute... no more conflict.

#Menu ul li a:focus
#Menu ul ul li a:focus

thanks hugo... really appreciate it.

technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 45 weeks 3 days ago
Timezone: GMT+2
Joined: 2004-06-09
Posts: 260
Points: 8

Help with menu

I am not sure if the problem has actually been resolved or not, because when hovering over Profile the height appears to be 2 pixels higher than the other menu-items.
Also you have <body bgcolor="#FFFFFF"> in your code. One may assume that the background color is already white, but either way, it is best to include it in your stylesheet.

Hope this helps

tech

franco_bao
Offline
Regular
Montreal, Canada
Last seen: 14 years 36 weeks ago
Montreal, Canada
Timezone: GMT-4
Joined: 2006-05-03
Posts: 21
Points: 0

Cool

Thanx Again Hugo...

I hade the background color set to #fff. I think that code was added in when I used Dreamweaver to Clean up my xhtml code. Got Lazy.

As for the 2 pixel, I got rid of it. there was a 2px padding in upper div inside the stylesheet... can't get nothing by you. great eye. Thanks Hugo

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Help with menu

That wasn't Hugo. Wink

franco_bao
Offline
Regular
Montreal, Canada
Last seen: 14 years 36 weeks ago
Montreal, Canada
Timezone: GMT-4
Joined: 2006-05-03
Posts: 21
Points: 0

Sorry

Sorry tech... Thanks a million