Bullet alignment problem with max-width on <li>

BobaBird

When <liis set to {max-width:45em;}, the bullets move from the top
to the bottom of the <li>. Also, the bullet for a top-level <liends
up on the same line as the last <liof 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

Jan 12 '08 #1

Bergamot

BobaBird wrote:

When <liis 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 <uland 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

Jan 12 '08 #2

Jonathan N. Little

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/BrowserBugsSe...IE7Bugs/#bug87

Love the page -- hate the browser!
--
Take care,

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

Jan 12 '08 #3

Bergamot

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

Jan 13 '08 #4

GTalbot

On 12 jan, 17:57, "Jonathan N. Little" <lws4...@centralva.netwrote:

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/BrowserBugsSe...IE7Bugs/#bug87

Love the page -- hate the browser!

--
Take care,

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

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/att...ightmare-in-ie

Regards, Gérard

Jan 13 '08 #5

GTalbot

On 12 jan, 17:57, "Jonathan N. Little" <lws4...@centralva.netwrote:

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/BrowserBugsSe...IE7Bugs/#bug87

Done.

I still need to redesign that page...

Gérard

Jan 14 '08 #6

Jonathan N. Little

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...
--
Take care,

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

Jan 14 '08 #7

Jonathan N. Little

GTalbot wrote:

On 12 jan, 17:57, "Jonathan N. Little" <lws4...@centralva.netwrote:

>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/BrowserBugsSe...IE7Bugs/#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.
--
Take care,

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

Jan 14 '08 #8

GTalbot

On 14 jan, 10:43, "Jonathan N. Little" <lws4...@centralva.netwrote:

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

Jan 15 '08 #9

Jonathan N. Little

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>
--
Take care,

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

Jan 15 '08 #10

Gan Forr

Sorry, you are definitely right, I already had the
answer....hem...thanks

Jan 31 '08 #11