469,300 Members | 2,266 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,300 developers. It's quick & easy.

CSS tab menu with uniform borders

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
2 4357
figured it out on my own..just made the left margin -1px.
Aug 29 '06 #2
Banfa
9,064 Expert Mod 8TB
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.

Similar topics

26 posts views Thread by Thomas Mlynarczyk | last post: by
2 posts views Thread by Jacob | last post: by
2 posts views Thread by Peter Proost | last post: by
2 posts views Thread by jason | last post: by
3 posts views Thread by Timmah1980 | last post: by
2 posts views Thread by Dustan | last post: by
38 posts views Thread by JTL | last post: by
4 posts views Thread by TycoonUK | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Geralt96 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.