CSS Forum

**sudhakararaog** · 11-29-2010, 07:21 AM

please look at this link http://www.sudhakargolakaram.co.in/files/list.html

what i need is i would like the left and right corners of the image to be as background image for each list items current page

i have used top left as background image for the list item and for the anchor i have used the same background image and positioned top right

but i am not getting the complete top left curve till the top right curve for the current list item

also for the hover on the links i am not getting the complete image from top left curve to top right curve

please advice

**LadynRed** · 11-29-2010, 02:43 PM

Why use images at all? Why not use css3 rounded corners for the good browsers that render it correctly, and just leave IE7 and 8 with square corners - or use a jquery solution to make it work in IE.

**vectorialpx** · 11-30-2010, 02:17 PM

you can use something like this

Code:

<ul .menu>
....
<li><a href="link1"><span>&nbsp;</span>[YOUR link1]</a></li>
<li><a href="link2"><span>&nbsp;</span>[YOUR link2]</a></li>
</ul>

and

Code:

.menu li a { display:block and your background image on left (default), with left corners visible }
.menu li a span { display:inline; float:right; width:3px and your background image positioned at left }

.menu li a:hover { display:block and your background image on left (default), with left corners visible }
.menu li a:hover span { display:inline; float:right; width:3px and your background image positioned at left }

**LadynRed** · 12-01-2010, 01:52 PM

That's a lot of extraneous code just to do something that css3 does very easily.

**vectorialpx** · 12-02-2010, 05:00 AM

In his case, it cannot (or maybe I don't know how).
He has some shadows at those rectangles [see the right bottom one].

**LadynRed** · 12-02-2010, 08:41 AM

CSS3 does shadows quite handily too