By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,490 Members | 3,228 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,490 IT Pros & Developers. It's quick & easy.

CSS tab menu with uniform borders

P: 6
Hey.
I'm creating a horizontal boxed CSS menu for my site using lists. I wish to achieve a main menu bar something like this:
http://kurafire.net/log/

however when I add borders to my code it adds the borders of each li so I get double thickness borders. I only want 1px so its a problem. here is my code:

Expand|Select|Wrap|Line Numbers
  1. <style>
  2. #underlinemenu{
  3. margin: 0;
  4. padding: 0;
  5. display: inline;
  6. }
  7.  
  8. #underlinemenu ul{
  9. margin: 0;
  10. margin-bottom: 1em;
  11. padding-left: 0;
  12. float: left;
  13. font-weight: bold;
  14. width: 100%;
  15. border: 1px solid #DFDFDF;
  16. border-width: 1px 0;
  17.  
  18. }
  19.  
  20. * html #underlinemenu ul{ /*IE only rule. Delete extra margin-bottom*/
  21. margin-bottom: 0;
  22. }
  23.  
  24. #underlinemenu ul li{
  25. display: inline;
  26.  
  27. }
  28.  
  29.  
  30. #underlinemenu ul li a{
  31. float: left;
  32. color: gray;
  33. font-weight: bold;
  34. padding: 4px;
  35. text-decoration: none;
  36. background: white url('') top right repeat-y;
  37. border: 1px solid black;
  38. border-width: 0 1px;
  39. }
  40.  
  41. #underlinemenu ul li a:hover{
  42. color: black;
  43. background-color: #F3F3F3;
  44. border: 1px solid black;
  45. border-width: 0 1px;
  46. }
  47.  
  48.  
  49. </style>
  50. HTML:
  51. <div id="underlinemenu">
  52. <ul>
  53. <li><a href="" title="Home">Home</a></li>
  54. <li><a href="" title="link 2">Link 2</a></li>
  55. <li><a href="" title="link 3">Link 3</a></li>
  56. <li><a href="" title="Link 4">Link 4</a></li>
  57. </ul>
  58. </div>
  59.  
this gives me this:


is there a way to get uniform 1px borders throughout this menu? thanks
Aug 29 '06 #1
Share this Question
Share on Google+
2 Replies


P: 6
figured it out on my own..just made the left margin -1px.
Aug 29 '06 #2

Banfa
Expert Mod 5K+
P: 8,916
An alternitive (an personally I don't like negative numbers in CSS if it can be avoided) would be

border-width: 0 1px 0 0;
border-style: solid;
border-color: black;
Aug 29 '06 #3

Post your reply

Sign in to post your reply or Sign up for a free account.