Bending lists with CSS

[GilesGuthrie]

I want to create an unordered (i.e. bullet) list, but HTML indents this by default, which I do not want.

I feel sure that I should be able to stop this happening by redefining either the <ul> or <li> tags in my CSS file, but haven't been able to manage it yet.

Anyone got any ideas?

Also, I've redefined the <p> tag to set default attributes for the body text font. Is there any way I can make other tags (such as <iul>, <li>) pick up these definitions automatically? Currently I'm having to manually specify font size and styles in each tag as I redefine it, which is a pain, although not so much of a pain as having to manually format each line of text!

If you've read this post, you'll now understand my "Starting to Cascade" custom title!

 

[Shannon]

So, you are trying to prevent HTML from automatically indenting your lists?

Well, I don't know how to prevent it but I know a work-around. You can always place your list inside a DIV layer and position the layer where it will appear as though it hasn't been indented.

 

[Sage]

1. I've had a quick look through my XHTML/CSS book, and it looks like there's no way to control the list indentation. Shannon is right in that you can have the lists within divisions and set the left-margin division smaller than normal, though I dunno if you want to go through that trouble.

2. Ah, that's very easy to fix. All you need is a body specification in your CSS document (much like how you could use the body tag in older HTML to set the basefont). For example:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0;
padding: 0
}

Once you do this, you don't need to set the font specifications for the paragraph, list, td, etc., unless of course you want it different. Otherwise, every single tag will automatically inherit the body element.

Congrats on the move to CSS.

 

[GilesGuthrie]

Thanks guys.

I'm moving to CSS because I think that browser support is finally there for the styling, if not the positioning. Plus I'm considering a move from Garamond as a body text font, to Trebuchet MS. Sage, does your iBook come with Trebuchet as standard?

I've been reviewing my web site logs, and something like 85% of browsers are IE5.5 or above, and 12% are webbots. I get basically NO Netscape visitors.

[edit]Last week, 3% of my visitors were using Netscape 5[/edit]

 

[Sage]

Originally posted by GilesGuthrie
Plus I'm considering a move from Garamond as a body text font, to Trebuchet MS. Sage, does your iBook come with Trebuchet as standard?

Yup!

 

[GilesGuthrie]

[Mr Burns]Excsssseeelleeent[/Mr Burns]

 

[GilesGuthrie]

Originally posted by Sage
2. Ah, that's very easy to fix. All you need is a body specification in your CSS document (much like how you could use the body tag in older HTML to set the basefont). For example:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0;
padding: 0
}

Hmm.

I've now got:

body {
background-color: #FFFFee;
font-family: "Trebuchet MS", Tahoma, Verdana;
font-size: 12px;
text-align: justify;
font-weight: normal;
}

But IE6 seems to be ignoring everything after the font-family definition. I.e. it's picked up the desired font, and the backround colour, but it's ignoring everything else. Might have to point my Opera on Linux at it...

 

[ALPHA]

I generally dislike sites that use Garamond or Times New Roman unless it is for a extremely formal site.

The move to Trebuchet MS a good one.

 

[Shannon]

Originally posted by GilesGuthrie
Hmm.

I've now got:


But IE6 seems to be ignoring everything after the font-family definition. I.e. it's picked up the desired font, and the backround colour, but it's ignoring everything else. Might have to point my Opera on Linux at it...

I dunno but this is what my CSS file that controls my text looks like:

.text {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
}
a:link {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #999999;
	text-decoration: none;
}
a:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #999999;
	text-decoration: none;
}
a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #333333;
	text-decoration: underline;
}
a:active {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #333333;
	text-decoration: none;
}

Maybe you can salvage something out of that.