2.15.2007

css help wanted

I'm trying to close up the white space between the sidebar headings and their contents. (I believe this is called padding?) I've tried several things, but I can't seem to get it.

There are three different kinds of widgets in the sidebar: text, link lists, and html/java. The text widgets are not bad, although I'd close them up a little if I could. The link list widgets have way too much white space between the heading and the list. The java/html widgets vary.

Any ideas?

Update: Now I've somehow increased the space between paragraphs within posts. Argh. He'p me.

16 comments:

James said...

From my extremely limited understanding of CSS, you're probably referring to "leading"-- a carryover from DTP and publishing days, and referred to the size of the strips of lead used to space lines of text. In CSS I believe this is called line-height. I don't have specific places for you to consult, but you can Google "line height" and CSS. Oh...I really hope I'm not wrong and sending you on some goose chase...

James said...

This is my favourite CSS guide. I find it very helpful.

Padding in CSS is confusing: there are borders, padding, and margins that have to be considered. The details are oulined at W3.org.

The padding is the stuff between the content and the border, and the margin is the stuff outside the border. If you've set one down to 0 and are still getting too much space, try setting the other down to 0 as well.

Also remember that the border itself can have thickness but be invisible. So you might want to adjust the border size too.

James said...

I'm still not sure she's not talking about line height, because she referred to "white space between the sidebar headings and their contents", and not white space between sidebar and main content...?

L-girl said...

Oo, a conversation with two James. Confusing! :)

From my extremely limited understanding of CSS, you're probably referring to "leading"--

I know what leading is from old-fashioned book publishing, and it's not that, or line height.

It's padding, and it may also be borders.

An example of what I mean: the space between the words "to move to canada:" and the links underneath it.

That is a "linklist widget". "to move to canada" is a heading, I think h2. I want to close up the space between the heading and the link list.

This is my favourite CSS guide. I find it very helpful.

I use the same one! It's very good.

Next time I work on it, I'll check the borders as well as the padding.

Thanks guys!

L-girl said...

Oops, that's not the CSS guide I use. I'll check out your link this weekend.

This is the one I usually use.

impudent strumpet said...

BTW, is the lack of capital letters an aesthetic choice or some fluke with the new redesign? It's generally readable, but it can get a bit tedious in longer paragraphs.

L-girl said...

BTW, is the lack of capital letters an aesthetic choice or some fluke with the new redesign?

The answer is in comments in this thread.

G'night!

James said...

Thanks!... I'm glad I prefaced my comment with the acknowledgment of "extremely limited understanding of CSS"...otherwise I'd really look the fool :)

Alison said...

/li> in place of li> should remove the line break

L-girl said...

otherwise I'd really look the fool :)

Nah! I appreciate your thinking about it.

/li> in place of li> should remove the line break

Not sure where you mean, but I'll look. Thanks.

James said...

I'm still not sure she's not talking about line height, because she referred to "white space between the sidebar headings and their contents", and not white space between sidebar and main content...?

Remember, the padding, border, and margin spacings go all around -- both sides and top & bottom. Headings and contents are different "boxes", and each box has its own padding/border/margin settings.

/li> in place of li> should remove the line break

Not sure where you mean, but I'll look. Thanks.


List items are supposed to be marked with <li></li> elements. HTML is slack, and doesn't require close tags for elements, while SGML (which HTML is based on) does. This slackness can lead to unpredictable results, so you get more consistent results if you use the close (</li>) tag. It may help with odd line spacing.

L-girl said...

Remember, the padding, border, and margin spacings go all around -- both sides and top & bottom. Headings and contents are different "boxes", and each box has its own padding/border/margin settings.

Right. So the spacing problem could be the bottom of one box or the top of the one under it, or both. I'll look into that.

Thanks James. :)

L-girl said...

Whoo-hoo! I fixed the spacing problem!

I noticed it was only happening on the link list widgets, not the text widgets, so I looked at the code to see what was different.

The link list widgets had < ul > < / ul > codes. When I deleted them, the spacing was much better.

Now would someone like to tell me what I did? :) What is < ul > ?

L-girl said...

I also fixed the glitch in the date headings, where the little arrow icon was covering part of the date. I increased the left padding on the date header.

I'm on a roll! Unfortunately, for the rest of the issues I need the Designer Guy, and he is only sporadically available.

James said...

Now would someone like to tell me what I did? :) What is <ul>?

<ul> stands for "Unordered List". It marks a collection of List Items (<li>) that'll be displayed with bullets instead of numbers.

Unfortunately, some browsers don't handle the overlap of the paragraph and list box padding properly, and you end up with double, making the spacing look too big.

L-girl said...

thanks!

this broser-specific thing is interesting. designer guy fixed the banner so it links to the main page - but it only works on firefox so far, not on IE.