List Next to a Floating Block

[David Ross]

I sometimes place a sidebar on a Web page, using the following:
..sideright { float: right;
background-color: #fff;
width: 40%;
font-size: 90%;
text-align: justify;
margin-left: 1em;
padding: 2% }
..sideleft { float: left;
background-color: #fff;
width: 40%;
font-size: 90%;
text-align: justify;
margin-right: 1em;
padding: 2% }

If I have an unordered list <ul><li></ul> to the left of a right
sidebar, everything looks okay. If I try an unordered list to the
right of a left sidebar, however, the bullets overlap the
sidebar's block. I have no problems with unordered lists within
either left or right sidebars.

My entire style sheet file passes the test at
<http://www.htmlhelp.com/tools/csscheck/> with no errors. The
only warnings suggest such things as combining background-color
with background-image into just background.

Do I need to change my sidebar definitions? Or is there something
I should do about unordered lists? My list style is
li { list-style-position: outside }
ul li { list-style-type: disc;
display: list-item;
margin-top: 1em }
ul ul li { list-style-type: circle;
display: list-item;
margin-top: 0em }

I'm sorry, but I don't have an example of my problem. When I saw
what was happening, I changed the affected left sidebars to right
sidebars.

--

David E. Ross
<http://www.rossde.com/>

Concerned about someone snooping into your E-mail?
Use PGP. See my <http://www.rossde.com/PGP/>

[Lauri Raittila]

In article David Ross wrote:

I sometimes place a sidebar on a Web page, using the following:
.sideleft { float: left;width:40%;margin-right: 1em;}

If I have an unordered list <ul><li></ul> to the left of a right
sidebar, everything looks okay. If I try an unordered list to the
right of a left sidebar, however, the bullets overlap the
sidebar's block. I have no problems with unordered lists within
either left or right sidebars.
Add big enaugh right margin for float (2em?). Or if you are somewhat sure
that your list will end before sidebar, and some extra left margin to li.

Since no browser supports the CSS2 way to do lists, there is not much
else you can do. Not that it would help much.

I never stop wondering why they IE & Co desided to draw bullets to ul
margin, I would think li padding would make much more sence.
I'm sorry, but I don't have an example of my problem. When I saw
what was happening, I changed the affected left sidebars to right
sidebars.

And never thought to make text case elsewhere? Think that next time, it
would make it clear for people not seen the effect.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[David Ross]

Lauri Raittila wrote:

In article David Ross wrote:

I sometimes place a sidebar on a Web page, using the following:
.sideleft { float: left;width:40%;margin-right: 1em;}

If I have an unordered list <ul><li></ul> to the left of a right
sidebar, everything looks okay. If I try an unordered list to the
right of a left sidebar, however, the bullets overlap the
sidebar's block. I have no problems with unordered lists within
either left or right sidebars.

Add big enaugh right margin for float (2em?). Or if you are somewhat sure
that your list will end before sidebar, and some extra left margin to li.

Since no browser supports the CSS2 way to do lists, there is not much
else you can do. Not that it would help much.

I never stop wondering why they IE & Co desided to draw bullets to ul
margin, I would think li padding would make much more sence.

I'm sorry, but I don't have an example of my problem. When I saw
what was happening, I changed the affected left sidebars to right
sidebars.

And never thought to make text case elsewhere? Think that next time, it
would make it clear for people not seen the effect.

Actually, I'm using Mozilla 1.5. Bullets for an unordered list
normally appear indented by 3 em from the block's left edge with
the following text separated from the bullet by another em.

However, to the right of a left sidebar, the list-item text lines
up with paragraphs outside of the unordered list. The bullet is
worse than not indented. Relative to those paragraphs, the bullet
seems to have a -1em left margin.

I have created a test page at <http://www.rossde.com/test.html>.
It refers to my style sheet at
<http://www.rossde.com/genl_style.css>. I specified {
font-family: monospace } so that the alignment of characters can
be determined. Per suggestion, I set { margin-right: 2em } for
the sidebar. The sidebar contains only the word "text" repeated
over and over. Outside the sidebar, there should be a paragraph
above the sidebar and one to the right of the sidebar. Following
the second paragraph, I have an unordered list with two list-items
followed by text without a <p> and then four short paragraphs.
When I use Mozilla 1.5 to view this, the first letter of each
list-item lines up with the first letter of the paragraph before
the list; the bullets stick out to the left.

If this is a Mozilla problem, please let me know so that I can
submit a bug report.

--

David E. Ross
<http://www.rossde.com/>

Concerned about someone snooping into your E-mail?
Use PGP. See my <http://www.rossde.com/PGP/>

[Lauri Raittila]

In article David Ross wrote:

Lauri Raittila wrote:

In article David Ross wrote:

I sometimes place a sidebar on a Web page, using the following:
.sideleft { float: left;width:40%;margin-right: 1em;}

If I have an unordered list <ul><li></ul> to the left of a right
sidebar, everything looks okay. If I try an unordered list to the
right of a left sidebar, however, the bullets overlap the
sidebar's block. I have no problems with unordered lists within
either left or right sidebars.
Add big enaugh right margin for float (2em?). Or if you are somewhat sure
that your list will end before sidebar, and some extra left margin to li.

Since no browser supports the CSS2 way to do lists, there is not much
else you can do. Not that it would help much.
I checked that again, and it would not help at all.
And never thought to make text case elsewhere? Think that next time, it
would make it clear for people not seen the effect.

Actually, I'm using Mozilla 1.5. Bullets for an unordered list
normally appear indented by 3 em from the block's left edge with
the following text separated from the bullet by another em.

Yes.
However, to the right of a left sidebar, the list-item text lines
up with paragraphs outside of the unordered list. The bullet is
worse than not indented. Relative to those paragraphs, the bullet
seems to have a -1em left margin.
Proplem of CSS box modell that don't specify list-items and floats, and
of browser implementors that didn't do anything more sencible.

In your test case
body > ul > li, body > ol > li {margin-left:45%;}

Helps, with exactly that content. But if you have shorter left dide
thing, it will break.

There unfortunately is no good solution to this.

li {list-style:inside !important;}

Will help, but it will make list look stupider.

You could play with :before, content:"\2022" and float, and get adequate
results, but CSS2 spec says that float don't apply to generated content
and so it don't work either. CSS21 corrects this stupid limitation. That
was even implemented (and then fixed)

Another aproach is

ul, ol {display:inline-block;}

That works on Opera 7 and only Opera 7, and only when you use markup
where there is no bare text like "This is text beyond the unordered
list." after or before lists.

But this has the same problem as overly big li margin, that list will not
use spce under left float. Advantage is that you don't need to know width
of side thing.
If this is a Mozilla problem, please let me know so that I can
submit a bug report.

The biggest problem is that it is not a really bug, so it can't be easily
fixed. And that it happens on all browsers. And that more correct
behaviour by spec would be having that bullet on left side of that left
floating thing. (and as there is margin/padding in ul, under that left
float.)
http://www.w3.org/TR/CSS2/generate.html#markers

So if you can think aproach that would not need total rewrite of CSS box
model, I think it could be good to hear about it. I have not looked CSS3,
so I don't know if someone has already found best way, but I don't think
so.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.