+John. Subscriber¹ Posted April 27, 2010 Subscriber¹ Share Posted April 27, 2010 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 More sharing options...
0 Tanoru Posted April 27, 2010 Share Posted April 27, 2010 I don't see the error, have you fixed it? Also you seem to have posted this twice. Link to comment Share on other sites More sharing options...
0 +John. Subscriber¹ Posted April 27, 2010 Author Subscriber¹ Share Posted April 27, 2010 When you hover over, there is a padding issue between the link dividers on the left. Link to comment Share on other sites More sharing options...
0 Tanoru Posted April 27, 2010 Share Posted April 27, 2010 It's easier to see the issue when you highlight the menu. Ok I'll have a look at your code for you =) Link to comment Share on other sites More sharing options...
0 Tanoru Posted April 27, 2010 Share Posted April 27, 2010 By the way see this structure HERE , you could win awards for that. The worst structure imaginable award. Link to comment Share on other sites More sharing options...
0 Tanoru Posted April 27, 2010 Share Posted April 27, 2010 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 More sharing options...
0 +John. Subscriber¹ Posted April 27, 2010 Author Subscriber¹ Share Posted April 27, 2010 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 More sharing options...
0 Tanoru Posted April 27, 2010 Share Posted April 27, 2010 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 More sharing options...
0 Cupcakes Posted April 27, 2010 Share Posted April 27, 2010 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. <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Something Else</a></li> </ul> 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 More sharing options...
0 Tanoru Posted April 27, 2010 Share Posted April 27, 2010 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 More sharing options...
Question
+John. Subscriber¹
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; }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