ifubad Posted August 10, 2008 Share Posted August 10, 2008 page http://ifubad.awardspace.com/pixybuttons.html "border-bottom:1px dotted" applied to the <a> element, and not to hover or active. It shows a 1px white gap between the buttons when not hovered/active with no border, and shows the dotted border when hovered/active. It should show the border-bottom even when it's not hovered/active, what am I missing? body, html { margin: 0; padding: 0; } ul { margin: 0; padding: 0; list-style-type: none; } ul a { display: block; width: 200px; height: 20px; line-height: 20px; text-decoration: none; background: url(pixybuttons.png) no-repeat top left; text-indent: 50px; color: white; border-bottom: 1px dotted; } a:hover, a:active { background-position: top right; color: black; } </style> </head> <body> <ul> <li><a href="#">Read emails</a></li> <li><a href="#">Write book</a></li> <li><a href="#">Go shopping</a></li> <li><a href="#">Cook dinner</a></li> <li><a href="#">Watch Scrubs</a></li> </ul> </body> Quote Link to comment Share on other sites More sharing options...
ifubad Posted August 10, 2008 Author Share Posted August 10, 2008 in this case, I guess I had to specify a color for the border-bottom. I thought it'd automatically defaults to black, don't understand why it'll show the border when hovered, but not when it's a link. Oh well, as long as it works. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.