Overflow: hidden problem

[graphicNerd]

Why it is like that?

My nav.png image is crossed out.

[PaulOB]

In the content property you specify a URI to the image but you have mixed the rule with background styles.

span.menu:before {
		content: url('../images/nav.png') no-repeat 0px 0px;
	}

It should be:

span.menu:before {
		content: url('../images/nav.png');
	}

If you want a background image then use the background property but you will need to size the content to match.

content:"";
display:inline-block;
width:50px;
height:50px;
background:url(img.gif);

[graphicNerd]

Should I use position: absolute to fix the alignment of my NAV menu? It’s not well aligned.

span.menu:before {
        content: '';
        display: inline-block;
        width: 50px;
        height: 50px;
        background: url('../images/nav.png') no-repeat;
    }

URL LINK

[PaulOB]

Just move it around with margins unless you need it somewhere completely different. Size the element to match the image also.

e.g.

span.menu:before {
        content: '';
        display: inline-block;
        width: 28px;
        height: 25px;
        background: url('../images/nav.png') no-repeat;
    margin:-9px 0 0;
}

[graphicNerd]

@PaulOB

content: url(‘…/images/nav.png’);

This thing wasn’t working yesterday, now its working.

span.menu:before {
		content: url('../images/nav.png');
	}

[PaulOB]

@graphicNerd

This thing wasn’t working yesterday, now its working

You probably didn’t clear cache.

Don’t confuse the background properties with a straight url.