Jump to content

[SOLVED] Nav list border-bottom not working as expected


ifubad

Recommended Posts

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>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.