Line spacing in Lists - Ordered or Unordered

[imillard]

I have run into a problem with lists – ordered or unordered. The answer may be simple, or it may not be possible. Unfortunately, the question is complicated.

I have a list of items. Let’s say they are questions – about a credit card – but that’s not important.
The questions are in a table with a visible border.
There should be a bullet at the beginning of each question, because some of them run into two lines and I want the beginning of the question to be clearly noticeable.

But, there is a heading for each group of questions. And (here’s the problem) I don’t want a paragraph space between the heading and the first question.

If I use the UL or OL tags, the browser inserts a blank line space after the tag.
If I use the LI tag at the beginning of each line without the UL tag, the bullets are not considered to be part of the text, and end up outside the cell.
When I pad the cell to bring the bullets inside, the headings are indented too.

Perhaps the best thing is a demonstration. I have included the Style commands in the Index file for simplicity.
Take a look at this: http://www.millard3.com/tags
Note: If you're using Firefox you might get a reset error. Just try again.

[Shyflower]

Depending on which browser you use, they all have their different quirks. I don't know what the general consensus is these days, but I am still using a css reset file. This takes your style out of the browser's hands and puts control back into yours. Here is a link to the grand daddy of css resets. It's from Eric Meyers and it is public domain. Here is a link to a bunch of them, including Eric's.

You can either use the @import to call a reset file or you can use a stylesheet link. Just make sure the reset is the first stylesheet you call. Then all your custom styles will be as you expected.

[imillard]

The nature of my work means I am checking my pages with FF, IE and Chrome. They have to look about the same no matter what the client is using.

I will look at the links you have posted. The problem is, I don't know what code to use to eliminate those pesky extra line feeds. And I try to use only one stylesheet for a website, so resetting shouldn't be a problem.

What I really need is a complete list of commands/modifiers that can be applied to UL or OL tags. That's a tough list to find.

[Shyflower]

If you use the reset, your code will be cross-browser compliant... that's not to say that "everything" will work the same in every browser though, but it will be easier to find the quirks and the work arounds if and when you need them. I have been using the reset for a couple of years now. I modified it some because I didn't need all of the things Eric used in his. I have little trouble making text go where I want it to go and display like I want it to display. Why work to find a list of modifiers when you can solve all the problems with importing one simple style sheet?

By the way, I wouldn't leave Opera out of the browsers you use to check your work. They have a small following, but their followers are a dedicated bunch!

[dresden_phoenix]

The problem starts with the use of bad HTML mark up/ poor coding practices. I had to look behind the iframe to actually find said markup, so I understand it may not be your own doing but it is certainly your undoing ( how's that for a pun, Shyflower. )


1) You have a myriad of unclosed / unstarted anchor tags!
2) If you intend for. section1 to be a heading it should be done with a H2-6 tag, depending on the actual importance of said heading. Oh an the BRs are superfluous at that point.
3) At the very least it should be a block level element , such as a DIV, that you are putting beside other block level elements( yes, even tho you can display:block; an inline element ). LIs MUST be wrapped in a UL. this is not about looks but about semantics. You simply have NO CHOICE in the matter. I will address styling later.
4) Why are you wrapping this in a table? In your final a page will this be a table of lists? hmmmm. Anyway, if you code the list the right way it should not be affected ( unless you have specificity problems with your ENTIRE STYLESHEET , but that's another matter)
5) OPTIONALLY, if this is merely about bullets. you could use DIVs, Ps,DLs, etc to mark up the same info and display:list-item. But again what you really have to thing about is is this SEMANTICALLY CORRECT.

So your mark up should be as follows, no matter what

<div class="questions">
	<h3>About the Advantage of Prepaid Visa®</h3>
	<ul>
		<li><a href='#'>How do I get my ADVANTAGE MoneyCard?</a></li>
		<li><a href='#'>What are the benefits of having the ADVANTAGE Prepaid VISA?</a></li>
		<li><a href='#'>Why is my ADVANTAGE MoneyCard safer than carrying cash?</a></li>
		<li><a href='#'>What is the difference between:  a Visa-credit-card  OR  an ADVANTAGE Prepaid Visa card  OR  a Debit-Card??</a></li>
		<li><a href='#'>If I live outside Canada and am not a current cardholder, can I get a ADVANTAGE Prepaid Visa card?</a></li>
	</ul>
	<h3>Card Services</h3>
	<ul>
		<li><a href='#'>When can I begin using my ADVANTAGE Prepaid VISA?</a></li>
		<li><a href='#'>Will I require a credit check to receive the ADVANTAGE Prepaid VISA?</a></li>
		<li><a href='#'>How do I activate my permanent personalized ADVANTAGE card?</a></li>
		<li><a href='#'>Why are there 2 cards - instant issue and permanent?</a></li>
		<li><a href='#'>How can I change or update my personal information?</a></li>
	</ul>
</div>

and the CSS:

		.questions ul , .questions li, .questions h3 { padding:0; margin:0} /* a quick reset just to be cross browser safe*/
		.questions {margin-top: 60px; margin-bottom: 100px; font-family: arial; font-size: 80%; line-height: 1.2; width:28em}
		.questions ul {padding-left:1em;  }
		.questions li {margin-left:.5em;  }
		.questions h3 { font-weight: bold; color: #006aad; font-size: 115%;   text-transform: uppercase }
		.questions li a { color:#000;  text-decoration: none;  }
		.questions li a:hover {  text-decoration: underline;}

Hope that helps

[Victorinox]

Dresden's analysis and recommendations are correct, but here's an additional explanation mainly dealing with the questions you've posed.

The first and second examples should be discarded, as li elements must be contained within a "UL", "OL", "DIR", "MENU" parent in HTML 4.01 Transitional.

In the third example, the gap between the top ul and "CARD SERVICES" is due to a <br> and the ul's default 1em bottom margin. If you remove the <br> and specify ul {margin:0;} in your CSS then there will be no gap. The gap between "CARD SERVICES" and the next ul, which is due to the default top margin on the ul, will also be removed.

Avoid using <br> to create space between elements. Instead use margin or padding.

[Shyflower]

I had to look behind the iframe to actually find said markup, so I understand it may not be your own doing but it is certainly your undoing ( how's that for a pun, Shyflower. )

Off Topic:

I like it!

But I still think the whole shebang would be much easier with a reset.

[imillard]

Multiple problems:
The iframe stuff - not my doing. Thank GoDaddy and their "redirect with masking." To simplify the discussion, use this link: http://i-graphicsdesign.com/tags/

The orphaned anchor tags: Guilty. This is a jumpstation as you might have guessed. I forgot to remove those tags for this discussion. They're gone now.

The code supplied by dresden_phoenix works just fine. All I have to do is figure out how and why, and how to apply that lesson to other projects.

The answer from Victorinox, to remove the default margins from the UL is the core of the answer I was looking for.

Thank you, Ladies & Gentlemen. My faith is restored.