Solved

mouseover effect not filling button

Posted on 2014-02-28
7
289 Views
Last Modified: 2014-02-28
Why is there a gap on the mouseover effect on the navigation bar on items that don't have drop down buttons?  See last 5 buttons on right.

http://nsitedesigns.com/nsitedesigns/lakeshore/index.html
http://nsitedesigns.com/nsitedesigns/lakeshore/lakeshore.css
0
Comment
Question by:nsitedesigns
  • 3
  • 2
  • 2
7 Comments
 
LVL 10

Assisted Solution

by:jtwcs
jtwcs earned 250 total points
ID: 39895968
Line 199 of lakeshore.css

Remove display: inline-table

nav ul {
	background: #000; 
	padding: 0px; 
	list-style: none;
	position: relative;
	/* display: inline-table; remove this */
	margin:0px;
}

Open in new window

0
 
LVL 58

Accepted Solution

by:
Gary earned 250 total points
ID: 39896029
You might want to add some padding-bottom to nav ul li a {} (along with the above)
0
 

Author Comment

by:nsitedesigns
ID: 39896031
Well that too care of the mouseover not filling up button but now the navigation words are resting on the bottom of the nav bar.  I tried adding padding and margin to nav and the nav ul but that didn't fix it.  What would you recommend?
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 58

Expert Comment

by:Gary
ID: 39896033
See above.
0
 
LVL 10

Expert Comment

by:jtwcs
ID: 39896057
As Cathal pointed out above, just add some bottom padding to the nav <a> tags.

Line 228.  Add some bottom padding or change it to something like this.

nav ul li a {
			display: block; 
			padding: 4px 22px;
			color: #fff; 
			text-decoration: none;
		}

Open in new window

0
 

Author Comment

by:nsitedesigns
ID: 39896118
Missed Cathal's suggestion of adding padding to nav ul li a.  that did trick
0
 

Author Closing Comment

by:nsitedesigns
ID: 39896121
thanks team!
0

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Find out what you should include to make the best professional email signature for your organization.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question