Problem with <UL> and CSS

[Jean Pion]

Dear Readers,

With the following CSS I wanted to create a list,
where there is no empty line between the 'title' and the list.
Also put the bullets closer to the left margin.
And the spacing between two list should be one line.

ul.tight {margin-top:0em; margin-left:1.3em;}

The html then looks like this

<p>
<b>Here goes the title one</b>
<ul class=tight>
<li>item one</li>
<li>item two</li>
<li>item three</li>
<ul>
</p>

<p>
<b>Here goes the title two</b>
<ul class=tight>
<li>item one</li>
<li>item two</li>
<li>item three</li>
<ul>
</p>

Now this renders fine on IE, but not on FireFox or Opera.
Which puts an empty line between de title and the list.

Later I looked in the HTML specs and I found that:
One should not put <ul></ul> inside <p></p>.

Has anyone a suggestion how to do this
so it will render correct on most browsers?

Tia Jean.

[Spartanicus]

"Jean Pion" <je*******@hotmail.com> wrote:

With the following CSS I wanted to create a list,
where there is no empty line between the 'title' and the list.
Also put the bullets closer to the left margin.
And the spacing between two list should be one line.

ul.tight {margin-top:0em; margin-left:1.3em;}

The html then looks like this

<p>
<b>Here goes the title one</b>
<ul class=tight>
<li>item one</li>
<li>item two</li>
<li>item three</li>
<ul>
</p>

Change it to

<p class="listhdr"><b>Here goes the title one</b></p>
<ul class=tight>
<li>item one</li>
<li>item two</li>
<li>item three</li>
<ul>

Then remove the spacing with CSS:

p.listhdr{bottom-margin:0;top-margin:1.3em}
ul.tight{top-margin:0;bottom-margin:1.3em}

--
Spartanicus

[Steve Pugh]

Spartanicus wrote:

<p class="listhdr"><b>Here goes the title one</b></p>

'listhdr' standing for 'List Header' we presume? So a <hx> element
would perhaps be more appropriate?

Steve

[Jean Pion]

"Spartanicus" <in*****@invalid.invalid> wrote in message
news:r6********************************@news.spart anicus.utvinternet.ie...

"Jean Pion" <je*******@hotmail.com> wrote:

With the following CSS I wanted to create a list,
where there is no empty line between the 'title' and the list.
Also put the bullets closer to the left margin.
And the spacing between two list should be one line.

ul.tight {margin-top:0em; margin-left:1.3em;}

The html then looks like this

<p>
<b>Here goes the title one</b>
<ul class=tight>
<li>item one</li>
<li>item two</li>
<li>item three</li>
<ul>
</p>

Change it to

<p class="listhdr"><b>Here goes the title one</b></p>
<ul class=tight>
<li>item one</li>
<li>item two</li>
<li>item three</li>
<ul>

Then remove the spacing with CSS:

p.listhdr{bottom-margin:0;top-margin:1.3em}
ul.tight{top-margin:0;bottom-margin:1.3em}

--
Spartanicus

Thanks Spartacus,

I think you mean "margin-top" top etc. ?

The real sollution is NOT to use <ul> inside <p>
Apearantly FF and Opera are a bit picky about this.
If instead of <p> a <div> is used, things look a lot beter.
Except that FF has a bit of padding by default,
so we need the following in the css:

ul.tight {margin: 0em 0em 1em 1.3em; padding: 0em; }

and the proper html seems to be:

<div><b>Here goes the title one</b>
<ul class=tight>
<li>item one</li>
<li>item two</li>
<li>item three</li>
<ul>
</div>

Now the three browser render the page *almost* the same.

Any comments on this?

Jean.

[Spartanicus]

"Jean Pion" <Je*******@hotmail.com> wrote:

<p class="listhdr"><b>Here goes the title one</b></p>
<ul class=tight>
<li>item one</li>
<li>item two</li>
<li>item three</li>
<ul>

Then remove the spacing with CSS:

p.listhdr{bottom-margin:0;top-margin:1.3em}
ul.tight{top-margin:0;bottom-margin:1.3em}

--
Spartanicus
Thanks Spartacus,

Who?

Please configure your news reader to strip out sigs, or snip them
manually when following up.
I think you mean "margin-top" top etc. ?
Oops indeed.
The real sollution is NOT to use <ul> inside <p>
I didn't.
Apearantly FF and Opera are a bit picky about this.
They have every right to be, it's invalid HTML.
If instead of <p> a <div> is used, things look a lot beter.

That might work if it's appropriate for the content to be read out
without a preceding or trailing pause. If not then a paragraph is the
correct markup for list "headers".

--
Spartanicus

[Jean Pion]

"Spartanicus" <in*****@invalid.invalid> wrote in message
news:27********************************@news.spart anicus.utvinternet.ie...

"Jean Pion" <Je*******@hotmail.com> wrote:

Thanks Spartacus,
Who?

Sorry, I missread/typed your name.

Please configure your news reader to strip out sigs, or snip them
manually when following up.

Ok

The real sollution is NOT to use <ul> inside <p>
I didn't.

You are quite right, I should have written:

The real mistake I made was to use <ul> inside <p>.

If instead of <p> a <div> is used, things look a lot beter.

That might work if it's appropriate for the content to be read out
without a preceding or trailing pause. If not then a paragraph is the
correct markup for list "headers".

There is 1 line spacing rendered between 2 sections:

<div><b>Here goes the title one</b>
<ul class=tight>
<li>item one</li>
<li>item two</li>
<li>item three</li>
<ul>
</div>

<div><b>Here goes the title two</b>
<ul class=tight>
<li>item one</li>
<li>item two</li>
<li>item three</li>
<ul>
</div>

But this spacing is caused by <ul></ul>,
because I specified a bottom margin 1em in de css:
ul.tight {margin: 0em 0em 1em 1.3em; padding: 0em; }

Which is a bit ...tricky?

Jean.

[Spartanicus]

"Jean Pion" <Je*******@hotmail.com> wrote:

There is 1 line spacing rendered between 2 sections:

<div><b>Here goes the title one</b>
<ul class=tight>
<li>item one</li>
<li>item two</li>
<li>item three</li>
<ul>
</div>

<div><b>Here goes the title two</b>
<ul class=tight>
<li>item one</li>
<li>item two</li>
<li>item three</li>
<ul>
</div>

But this spacing is caused by <ul></ul>,
because I specified a bottom margin 1em in de css:
ul.tight {margin: 0em 0em 1em 1.3em; padding: 0em; }

Which is a bit ...tricky?

Why? You wouldn't want two consecutive lists to be displayed with no
spacing would you?

--
Spartanicus