[thelist] CSS <UL> background corners part 3

Andrew andrew at humanbehaviour.co.uk
Wed Mar 10 08:38:40 CST 2004


This is becoming very tedious and annoying, I have read the article
http://www.complexspiral.com/publications/rounding-tabs/

which is fairly clear however what is meant by this >>> At the time this article
was written, there was no way in CSS to assign more than one background image to
a given element.

Is it possioble to have 2 different images assigned to the same element?
Somehow I doubt it.

I am failing miserably to get a left corners and right corners image attributed
to each <LI> IU can get one or the other but not both :(

at the moment I have right so left as well would be nice :)  this is the code I
have ( a bit of a mess sorry guys)

Andrew

#secondarynav UL {

	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	BORDER-LEFT-WIDTH: 0px;
	BORDER-BOTTOM-WIDTH: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px 0px 0px 0px;
	PADDING-TOP: 0px;
	LIST-STYLE-TYPE: none;
	BORDER-RIGHT-WIDTH: 0px;
	BORDER-TOP: #000000 2px solid;
	BORDER-BOTTOM: #000000 1px solid;
	background: url(http://www.graffititrading.co.uk/images/left.gif) top left
no-repeat;
}
#secondarynav LI {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	FONT: 11px/17px Verdana, Lucida, Arial, sans-serif;
	WIDTH: 100%;
	COLOR: #FFFFFF;
	PADDING-TOP: 0px;
	BORDER-BOTTOM: #000000 1px solid;
	BORDER-TOP: #000000 1px solid;
	BORDER-LEFT: #000000 0px solid;
	BORDER-RIGHT: #000000 0px solid;
	TEXT-ALIGN: center;
	list-style : none;
    display: inline;
  background: #F38731 url(http://www.graffititrading.co.uk/images/left.gif) top
left no-repeat;
}

#secondarynav LI A {
PADDING-RIGHT: 0px;
DISPLAY: block;
PADDING-LEFT: 0px;
FONT-WEIGHT: bold;
PADDING-BOTTOM: 0px;
WIDTH: 100%;
COLOR: #FFFFFF;
PADDING-TOP: 0px;
TEXT-DECORATION: none;
voice-family: inherit;
background: #F38731 url(http://www.graffititrading.co.uk/images/right.gif) top
right no-repeat;

}

#secondarynav LI A:hover {
	FONT-WEIGHT: bold;
	BACKGROUND: #F7BF66 url(http://www.graffititrading.co.uk/images/right.gif) top
right no-repeat;
	COLOR: #000000;
	TEXT-DECORATION: none;
	}




More information about the thelist mailing list