• 0

CSS Issue


Question

Currently having an annoying CSS issue with a menubar. I can't figure out why there seems to be a 2-3px padding issue when you hover over the links on the header.

 div.menuBar,div.menuBar a.menuButton,div.menu,div.menu a.menuItem {
	font-family: Helvetica, sans-serif;
	font-size:16px;
	font-style:normal;
	font-weight:400;
	color:#FF9900
}

div.menuBar {
	text-align:right;
	background-image:url(../images/button-bk.png);
	padding:7px 0px 7px 0px;
	margin: 0;
}

div.menuBar a.menuButton {
	font-weight:400;
	color:#FF9900;
	cursor:normal;
	left:0;
	position:relative;
	text-decoration:none;
	top:0;
	z-index:98;
	margin:0;
	padding:6px 14px 6px 14px;
	border-right-width: 1px;

	border-right-style: solid;
	border-right-color: #000;
}

div.menuBar a.menuButton:hover {
	background-color:#333;
	color:#fff;

}

div.menuBar a.menuButtonActive,div.menuBar a.menuButtonActive:hover {
background-color:#333;
color:#fff;

border-color:#999 #fff #fff #999;
}

div.menu {
	border:0px solid;
	left:0;
	position:absolute;
	top:0;
	visibility:hidden;
	z-index:99;
	padding:0px;
	margin: 0;
	background-image: url(images/button-bk.png);
}

div.menu a.menuItem {
	color:#000;
	cursor:default;
	display:block;
	text-decoration:none;
	white-space:nowrap;
	padding:0;
}

div.menu a.menuItem:hover,div.menu a.menuItemHighlight {
	background-color:#000000;
	color:#000;
}

div.menu a.menuItem span.menuItemArrow {
margin-right:-0.75em;
}

.menuHeader {
	color:#fff;
	font-weight:700;
	font-style:italic;
}

<!-- Menu bar and main section buttons -->
<link href="nav-menu.css" rel="stylesheet" type="text/css" />

<div class="menuBar">
<a class="menuButton" href="/">Home</a>

<a class="menuButton" href="about.php">About</a>

<a class="menuButton" href="a-star-promotions.php">A-Star</a>

<a class="menuButton" href="alistcard.php">A-List Card</a>

<a class="menuButton" href="sponsors.php">Sponsors</a>

<a class="menuButton" href="events.php">Events</a>

<a class="menuButton" href="pod.php">Mix CDs, Newspaper & DVDs</a>

<a class="menuButton" href="contact.php">Contact Us</a></div>

an image of the error is attached here http://cl.ly/

Any help would be much appreciated!

Accidental double post, please report and mark for deletion.

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

When you hover over, there is a padding issue between the link dividers on the left.

Link to comment
Share on other sites

  • 0

I have found the problem and simplified your code in the process. You had a <nav> tag with list inside of it. Essentially <nav> is a horizontal list. The problem was that with <nav> a new line in the code is a space.

You have to have <a href="#"></a><a href="#"></a> instead of :

<a href="#"></a>

<a href="#"></a>

So here's your new code :p

HTML CODE

<nav class="right">

<a class="disabled" href="#">Application</a><a href="http://www.getcloudapp.com/blog/">Blog</a><a href="http://support.getcloudapp.com/">Support</a><a href="http://my.cl.ly/login">Login</a>

</nav>

CSS CODE (base.css)

header nav {

display: block;

font-size: 14px;

font-weight: bold;

line-height: 30px;

}

header nav a:link {

color:#000;

margin-left: 30px;

}

header nav a:hover {

color: #8b8b8b;

}

header nav a.disabled {

color: #8b8b8b;

}

I also suggest that you take a look at THIS article on shorthand CSS.

Link to comment
Share on other sites

  • 0

If there's any consolation I was actually doing this for a friend. I follow crisp, clean CSS rules and literally got confused to the point that my head hurt because it didn't make sense, hence the forum.

Thanks so much man!

Link to comment
Share on other sites

  • 0

If there's any consolation I was actually doing this for a friend. I follow crisp, clean CSS rules and literally got confused to the point that my head hurt because it didn't make sense, hence the forum.

I love clean crisp CSS rules.

Link to comment
Share on other sites

  • 0

Sigh. You double posted in the thread and didn't report the other thread.. so I had posted in it.

You have a lot of bloated code for your stylesheet and could easily simplify it by utilzing an unordered list. This will resolve your other classes where you've added negative margins, etc. You shouldn't have to do that, period.

 &lt;ul&gt;
     &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;Something Else&lt;/a&gt;&lt;/li&gt; 
 &lt;/ul&gt;

That will give you more control over all of your list items and allow for way more control than the route you were taking.

http://www.alistapart.com/articles/taminglists/

http://24ways.org/2005/centered-tabs-with-css

http://thedesignsuperhero.com/2008/04/tutorial-to-create-a-pretty-cool-simple-horizontal-css-menu/

http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml

Link to comment
Share on other sites

  • 0

This will resolve your other classes where you've added negative margins, etc. You shouldn't have to do that, period.

Nooo but negative margins are so good :p As a last resort that is.

*EDIT*

Im not sad it's just a coincedence that we posted posted in the same minute. Promise :rofl:

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.