styling UL and LI with css

**numbenator** · 02-22-2005, 05:47 PM

Hi all,

As an exercise in using css I am trying to get to grips with styling an un ordered list UL

Im sure im not far of getting it right but I have a couple of gliches in regard to required layout.

My attempt can be seen here

My problem or question is : Why the alignment to the right. I have defined no padding and a correct width of 180px. In design also, (dreamweaver) the list has pushed layer width beyond container layer by the distance shoved to the right.

Im sure i've just made a silly mistake in code but would appreciate some fresh eyes.

cheers.

Steve

**GrayKard** · 02-22-2005, 06:31 PM

HTML Code:

@charset "iso-8859-1";
.kuNavHeader {
	PADDING-LEFT: 12px; FONT-WEIGHT: bold; FONT-SIZE: 12px; WIDTH: 180px; COLOR: #ffffff; BORDER-BOTTOM: #fff 1px solid; FONT-FAMILY: Arial; HEIGHT: 18px; BACKGROUND-COLOR: #6699cc
}
.kuLevel0C {
	WIDTH: 180px; BACKGROUND-COLOR: #beddf4
}
.kuLevel0C UL {
	DISPLAY: inline;
}
.kuLevel0C LI {
	LIST-STYLE-IMAGE: url([url]http://www.mastech-solutions.com/kingston%20work/builds/images/arrow.jpg[/url]) ; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 18px; BACKGROUND-COLOR: #beddf4
}
.kuLevel0C LI A {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Arial
}
.kuLevel0C LI A:hover {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Arial
}

Try this version of your style sheet and see if it's more how you wanted it to display.
I removed the width designations for most of it, and changed the ul display to inline to avoid the automatic indent that comes with lists.

**numbenator** · 02-23-2005, 09:26 AM

regretfully I still have the same problem. Would you mind having another look for me.
I did change li / ul to dt / dl which certainly dealt with the layout problem but im working to make compliant and cross browser compatable so I can't use.
link to page is here

Your time is much appreciated.

cheers.
The learner