Bullet alignment problem with max-width on <li>

14 views
Skip to first unread message

BobaBird

unread,
Jan 11, 2008, 7:52:36 PM1/11/08
to
When <li> is set to {max-width:45em;}, the bullets move from the top
to the bottom of the <li>. Also, the bullet for a top-level <li> ends
up on the same line as the last <li> of its nested list, with both
disc and circle bullets on that line.

The problem is in IE7. The page displays as expected in FF 2.0.0.9.
Is there a way to make IE7 behave?

See http://ekb.dbstalk.com/sandbox/bulletalign.htm
--

Charles

Bergamot

unread,
Jan 11, 2008, 8:56:58 PM1/11/08
to
BobaBird wrote:
> When <li> is set to {max-width:45em;}, the bullets move from the top
> to the bottom of the <li>.
>
> The problem is in IE7.
>
> See http://ekb.dbstalk.com/sandbox/bulletalign.htm

I came across this bug myself some time ago. The easiest way to get IE7
to behave is to set max-width on the <ul> and padding-left on the <ul>
to 15px or so. I haven't had any success with max-width on <li>.

Experiment with margin-left values to get the amount of indent you'd like.

--
Berg

GTalbot

unread,
Jan 12, 2008, 5:41:06 PM1/12/08
to

Hello Charles,

This must be another variant of a bug reported already by Chris Beal.

This is bug #87 at
Internet Explorer 7 bugs
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/MaxWidthToListItems.html

Regards, Gérard

Jonathan N. Little

unread,
Jan 12, 2008, 5:57:04 PM1/12/08
to
GTalbot wrote:

> This is bug #87 at
> Internet Explorer 7 bugs
> http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

Gérard

Just a suggestion if you add ID's to each bug on your page it would be
handy to reference:

<p id="bug87">87- Internet Explorer 7 do not render max-width ...

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug87

Love the page -- hate the browser!


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

BobaBird

unread,
Jan 13, 2008, 12:43:31 PM1/13/08
to
On Fri, 11 Jan 2008 19:56:58 -0600, Bergamot <berg...@visi.com>
wrote:

> BobaBird wrote:
> > When <li> is set to {max-width:45em;}, the bullets move from the top

> > to the bottom of the <li>. ... The problem is in IE7.


> >
> > See http://ekb.dbstalk.com/sandbox/bulletalign.htm
>
> I came across this bug myself some time ago. The easiest way to get IE7
> to behave is to set max-width on the <ul> and padding-left on the <ul>
> to 15px or so. I haven't had any success with max-width on <li>.
>
> Experiment with margin-left values to get the amount of indent you'd like.

Thanks Berg, that works. I applied your solution in stages to see the
effect. After moving the rule from <li> to <ul>, the bullets
disappear in IE7 (FF is still fine). Adding padding-left allows the
bullets to show (16px took care of losing a little sliver off the
nested list's bullets). Finally, adding margin-left (22px looks about
right on all 5 IE7 text sizes) restores indentation on the top level
list.

Too bad implementing a good practice for readability requires using
the bad practice of over-declaring the CSS.

On Sat, 12 Jan 2008 14:41:06 -0800 (PST), GTalbot
<news...@gtalbot.org> wrote:

> This must be another variant of a bug reported already by Chris Beal.
>

> This is bug #87 at
> Internet Explorer 7 bugs
> http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

Yep. Just tried Berg's solution and it also restores numbering on an
<ol>. I've added ordered lists to my example page showing the
problem, default behavior, and the applied solution.
--

Charles

Bergamot

unread,
Jan 13, 2008, 1:53:23 PM1/13/08
to
BobaBird wrote:
>> >
>> > See http://ekb.dbstalk.com/sandbox/bulletalign.htm

>
> Adding padding-left allows the
> bullets to show (16px took care of losing a little sliver off the
> nested list's bullets). Finally, adding margin-left (22px looks about
> right on all 5 IE7 text sizes) restores indentation on the top level
> list.

I just want to add that I've tried in vain to get the margin/padding
values tolerable using em units instead of px, but IE won't cooperate at
all. How it determines the actual size of an em is a mystery, and it
seems to vary depending on where you use it. :(

> Too bad implementing a good practice for readability requires using
> the bad practice of over-declaring the CSS.

Ya can't have everything, though it would be nice. :)

--
Berg

GTalbot

unread,
Jan 13, 2008, 5:51:44 PM1/13/08
to


Excellent suggestion, Johnathan. The page is now getting so long that
I have now to resort to this :)

It will take me a few days though... busy in all kinds of areas.. this
is low priority

"Well, guess what: in IE, everything is broken, even their own, home-
grown, homemade proprietary methods."
Tobie Langel, Attribute nightmare in IE, http://tobielangel.com/2007/1/11/attribute-nightmare-in-ie

Regards, Gérard

GTalbot

unread,
Jan 13, 2008, 6:35:15 PM1/13/08
to
On 12 jan, 17:57, "Jonathan N. Little" <lws4...@centralva.net> wrote:


> Just a suggestion if you add ID's to each bug on your page it would be
> handy to reference:
>
> <p id="bug87">87- Internet Explorer 7 do not render max-width ...
>
> http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug87

Johnathan,

I'm also thinking of redesigning that whole page into more manageable,
logical sections. E.g.: all CSS background bugs would be regrouped in
one section, all favicon bugs would be grouped into one logical
section, all CSS columnar layout bugs would be in one distinct
section, etc... to help searching+finding and navigating. Right now,
my webpage is a bit more like a laundry list, only laid out in
sequential chronological discovery order.

I've been working on additional images also for that webpage...

Gérard

dorayme

unread,
Jan 13, 2008, 6:58:15 PM1/13/08
to
In article
<ab51c94a-553f-4cf7...@q77g2000hsh.googlegroups.co
m>,
GTalbot <news...@gtalbot.org> wrote:

Just a further thought for you, you might lay it out in a
standard way for unstyled (you will judge what is best for this)
and have a facility (some links at the top) that allow the user
to have the order that might be convenient to them. You might be
able to do this latter by supplying a different stylesheet for
the different orderings. In my experience it is simplest to just
have different HTMLs. No one would blame you if you thought this
too much work though!

--
dorayme

GTalbot

unread,
Jan 14, 2008, 12:13:04 AM1/14/08
to
On 12 jan, 17:57, "Jonathan N. Little" <lws4...@centralva.net> wrote:


> Gérard
>
> Just a suggestion if you add ID's to each bug on your page it would be
> handy to reference:
>
> <p id="bug87">87- Internet Explorer 7 do not render max-width ...
>
> http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug87


Done.

I still need to redesign that page...

Gérard

GTalbot

unread,
Jan 14, 2008, 12:41:03 AM1/14/08
to
On 13 jan, 18:58, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article
> <ab51c94a-553f-4cf7-934b-742c39bc3...@q77g2000hsh.googlegroups.co
> m>,

Alternate stylesheets. For different grouping and/or different
orderings. Still lot of work though. But yes... very interesting for
users..

1- Worst bugs (objective severity and established gravity): crash,
hangs, etc.
2- Most reported bugs and/or most hated bugs: this could be hard or
long to do... would be somewhat subjective too
3- Content disappear bugs
4- Layout bugs: misalignement, mispositioning, overlapping, content
duplicated, things like guillotine bug, peekaboo bug
5- Spec violations bugs grouped by CSS properties
6- CSS box model spec violations
7- HTML 4 bugs
8- CSS bugs: CSS 1 bugs, CSS 2.1 bugs
9- JS (ECMAScript 3rd ed.) and DOM bugs
10- etc.

The thing is that Microsoft is really the one who should have (started
and) done this a long time ago, say, 9 years ago, as soon as people
were starting to (complaint, moan) report bugs about MSIE 5.0 . They
should have hired a few good people with a clear and deep
understanding of the specs (HTML 4, CSS 1 & 2.x, DOM 1 & 2) and then
let them do reports, create testcases, patrol the web programming
newsgroups seeking people posting about their problems coding this or
that, create and feed a working (internal at first) bug database ...

Regards,

Gérard

Jonathan N. Little

unread,
Jan 14, 2008, 10:27:00 AM1/14/08
to
GTalbot wrote:

> The thing is that Microsoft is really the one who should have (started
> and) done this a long time ago, say, 9 years ago, as soon as people
> were starting to (complaint, moan) report bugs about MSIE 5.0 . They
> should have hired a few good people with a clear and deep
> understanding of the specs (HTML 4, CSS 1 & 2.x, DOM 1 & 2) and then
> let them do reports, create testcases, patrol the web programming
> newsgroups seeking people posting about their problems coding this or
> that, create and feed a working (internal at first) bug database ...

Actually what I think is the IE development team should the right thing
and "drink the Cool-Aide", dump the turkey and do what MS does best;
find one from some vendor that actually know what they're doing and
absorb|steal it...

Jonathan N. Little

unread,
Jan 14, 2008, 10:43:29 AM1/14/08
to
GTalbot wrote:
> On 12 jan, 17:57, "Jonathan N. Little" <lws4...@centralva.net> wrote:
>
>
>> Gérard
>>
>> Just a suggestion if you add ID's to each bug on your page it would be
>> handy to reference:
>>
>> <p id="bug87">87- Internet Explorer 7 do not render max-width ...
>>
>> http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug87
>
>

Great update, I have you page bookmarked for reference. Didn't see if
you had IE7's *new* peekaboo bug that I stumbled upon. This one great,
it does not occur with older versions 6 and less, just 7. Seems if you
have an italic styled font adjacent to a float, "poof!" the rest of you
page is gone!!! That is right, here is an example and the culprit was
the default style of the lowly EM element...

http://www.littleworksstudio.com/temp/l2340/ver2.php

Works fine in 5-6 (5.01 & 5.5 have some minor margin problems but hey
who use them!) But look at it with 7!

My fix

http://www.littleworksstudio.com/temp/l2340/

was to change EM to a non-italic bold style...at the time I did not have
access to IE7, forced me to abandon my favorite Win2k for XP.

GTalbot

unread,
Jan 14, 2008, 5:12:18 PM1/14/08
to
On 14 jan, 10:43, "Jonathan N. Little" <lws4...@centralva.net> wrote:

> Didn't see if
> you had IE7's *new* peekaboo bug that I stumbled upon. This one great,
> it does not occur with older versions 6 and less, just 7.

No I do not have (linked or referred or mentioned) this new peekaboo
bug but Alan Gresley has found + reported one

http://css-class.com/test/bugs/ie/strangepeekaboobug.htm

The thing is that if you scroll down a bit, then the colors reappear
but not in your
http://www.littleworksstudio.com/temp/l2340/ver2.php
and that makes it furthermore interesting.

Please, Johnathan, leave that http://www.littleworksstudio.com/temp/l2340/ver2.php
webpage as it is and I'll mention that bug in my webpage along with
your comments and a link to your post in this google thread.

Please leave that http://www.littleworksstudio.com/temp/l2340/ver2.php
webpage as it is for a year or so, so that Microsoft can fix this bug
in alpha and beta releases of IE8 and so that visitors can see with
their own eyes how buggy, difficult, frustrating it can be to develop
a webpage and then notice the bugs in IE7.

> Seems if you
> have an italic styled font adjacent to a float, "poof!" the rest of you
> page is gone!!! That is right, here is an example and the culprit was
> the default style of the lowly EM element...
>
> http://www.littleworksstudio.com/temp/l2340/ver2.php
>
> Works fine in 5-6 (5.01 & 5.5 have some minor margin problems but hey
> who use them!) But look at it with 7!
>
> My fix
>
> http://www.littleworksstudio.com/temp/l2340/
>
> was to change EM to a non-italic bold style...at the time I did not have
> access to IE7, forced me to abandon my favorite Win2k for XP.

Best regards and thank you for reporting this to my attention; I will
update my page today..

Gérard

GTalbot

unread,
Jan 14, 2008, 8:37:20 PM1/14/08
to
On 14 jan, 10:43, "Jonathan N. Little" <lws4...@centralva.net> wrote:

> Didn't see if
> you had IE7's *new* peekaboo bug that I stumbled upon. This one great,
> it does not occur with older versions 6 and less, just 7. Seems if you
> have an italic styled font adjacent to a float, "poof!" the rest of you
> page is gone!!! That is right, here is an example and the culprit was
> the default style of the lowly EM element...
>
> http://www.littleworksstudio.com/temp/l2340/ver2.php

Johnathan,

I have updated my pages and your peekaboo bug is now mentioned in the
IE6, IE7 and browser bugs webpages.

http://www.gtalbot.org/BrowserBugsSection/MSIE6Bugs/

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/ (with a
wavey :) )

http://www.gtalbot.org/BrowserBugsSection/

Take care :)

Gérard

Jonathan N. Little

unread,
Jan 14, 2008, 8:49:25 PM1/14/08
to
GTalbot wrote:

> Please, Johnathan, leave that http://www.littleworksstudio.com/temp/l2340/ver2.php
> webpage as it is and I'll mention that bug in my webpage along with
> your comments and a link to your post in this google thread.
>
> Please leave that http://www.littleworksstudio.com/temp/l2340/ver2.php
> webpage as it is for a year or so, so that Microsoft can fix this bug
> in alpha and beta releases of IE8 and so that visitors can see with
> their own eyes how buggy, difficult, frustrating it can be to develop
> a webpage and then notice the bugs in IE7.

I am very careful not to break links, and rarely delete anything, even
temp stuff for Usenet, (much to Luigi's dismay) But this bug was fairly
frustrating because previous versions have no problem, yet IE7 alway does.

<cynical>
I shudder to think what new "little gems" IE8 has in store for us! Jim
Rapoza of /eWeek/ just wrote that IE8 passes the Acid2 test and Firefox
doesn't. But I say IE8 isn't even alpha yet. Firefox 3 is beta and to be
released next month I hear and does passes Acid2. Additionally Firefox's
previous two versions came close. Look at the mess any current version
of IE does now! Watch that the IE8 team will program to the test, like
"No Child Left Behind" teaches to the text and it will fail miserably in
other areas.
</cynical>

Gan Forr

unread,
Jan 30, 2008, 8:29:51 AM1/30/08
to
Hi....As Bergamot suggested...I read this topic since my problem is
similar.

I have this ordered list and I want every element of the list aligned
to the left border of the containing div, just like the text above and
below.
In firefox works perfectly, but in IE every element of the list is
slightly on the left of where I want it to be.

Thank You
Here's the code:
---------------------------------------------
<html>
<head>
<style>
div.normal
{
position:absolute; left:10px;
border:1px solid #404040;
font-family:Verdana;
font-weight:bold;
font-size:10px;
padding: 4px;
text-align:left;

}

ol {
list-style-type:lower-alpha;
list-style-type:lower-alpha;
margin:0 0 0 1em;
padding:0 0 0 1em;
}

</style>
</head>
<body>
<div class='normal'>
<br />Allora, prima di tutto, vediamo cosa ci serve.
<ol><br />
<li>Un certo numero di quotidiani (la carta di quotidiano è la
migliore per la cartapesta - se non li leggete, iniziate a farlo)</li>
<li>Una bacinella</li>
<li>Un paio di tonnellate di colla vinilica (:D)</li>
<li>Filo di ferro (o qualcos'altro se vi vengono altre idee); quello
che ho usato io è spesso circa 1,5mm</li>
<li>Nastro adesivo di carta</li>
</ol><br />Adesso vediamo i passi principali:</div>
</body>
</html>

Bergamot

unread,
Jan 30, 2008, 4:22:48 PM1/30/08
to
Gan Forr wrote:
> Hi....As Bergamot suggested...I read this topic since my problem is
> similar.
>
> I have this ordered list and I want every element of the list aligned
> to the left border of the containing div,

You need to read this thread, including the replies, and look at the
sample pages posted. The answers regarding bullet alignment are already
there. Hint: look at the left margin and padding values.

--
Berg

Gan Forr

unread,
Jan 31, 2008, 5:55:45 AM1/31/08
to
Sorry, you are definitely right, I already had the
answer....hem...thanks

Reply all
Reply to author
Forward
0 new messages