Sliding doors transparent overlay

Question

.menu li {
    list-style:none;
    float:left;
    padding-right:20px;
    padding-top:25px;
}

.menu li a, .menu li a:visited {
    color:#ffffff;
    font-size:12px;
    text-decoration:none;
    background:url(images/menu_hover_right.png) top right no-repeat;
    padding-right:10px;
}

.menu span {
    background:url(images/menu_hover.png) top left no-repeat;
    padding-left:10px;
    padding-top:2px;
}

Anyone knows how to get them next to each other, both images are transparent on the round sides.

bug image .

Could you try and explain what 'the bug' *is*? Show your HTML, explain what you expect the output to look like. Show a [JS Fiddle demo/reproduction](http://jsfiddle.net/) of your problem. Help *us* to help ***you***. — David Thomas, Dec 10 '11 at 19:55
Look, i've got a left background and a right background on the span. A normal button <------> and what my button does: <----->- preview image: http://rockweb.nl/homebuttonbug.png — Sjors Snoeren, Dec 10 '11 at 20:03
Browsing your site, I can't find such a home button anywhere so I suppose you're not using it right now? — Tyler Crompton, Dec 10 '11 at 20:15
Nope, it's a preview of my redesign. Browser Firefox, and the preview was just to give the problem, anyone ideas? — Sjors Snoeren, Dec 10 '11 at 20:35
please add the relevant html, or post an online link - impossible to answer your question otherwise — ptriek, Dec 10 '11 at 20:48
I don't have time to post it as an answer, but here is a jsbin of how to do this: http://jsbin.com/iyuzir/ — Gerben, Dec 10 '11 at 21:40

score 0 · Answer 1 · answered Dec 13 '11 at 18:27

The problem is that you're actually saving your images backwards. The left image should be the one that is short, and the right one that is extended. Once you've changed that, your CSS should fall right into place:

.menu { list-style: none; }
.menu li {
    float: left;
    font-size: 12px;
    margin: 25px 10px 0; }
.menu li a {
    background: none 0 0 no-repeat;
    text-decoration: none;
    padding: 0 0 0 10px;
    display: inline-block; }
.menu li a:hover { 
    background-image: url(images/menu_hover.png);
    color: #ffffff; }
.menu li a span {
    background: none 100% 0 no-repeat;
    float: left;
    padding: 2px 10px 0 0;
    display: block; }
.menu li a:hover span { background-image: url(images/menu_hover_right.png); }

It's also usually a good idea to set the height inside both in .menu li a and .menu li a span. Due to browser inconsistencies, padding is an incredibly unreliable way to set fixed heights.

Sliding doors transparent overlay

1 Answers1