473,698 Members | 2,176 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Bullet alignment problem with max-width on <li>

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
10 6249
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
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
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
On 12 jan, 17:57, "Jonathan N. Little" <lws4...@centra lva.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
On 12 jan, 17:57, "Jonathan N. Little" <lws4...@centra lva.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
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
GTalbot wrote:
On 12 jan, 17:57, "Jonathan N. Little" <lws4...@centra lva.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
On 14 jan, 10:43, "Jonathan N. Little" <lws4...@centra lva.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
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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
2959
by: stephan beal | last post by:
Good afternoon, C++ers, This weekend i came across a fairly project-neutral trick which can be used to map C++ class names to their human-readable equivalents (a-la QObject's className() method), without having to add methods to a client interface and without relying on (e.g.) typeid(T).name(). i understand that this may not be strictly a language-related post, but i think the solution is "template-enough" to be considered topical here.
1
4207
by: Xuejun Li \(SH/RDC\) | last post by:
Hi, How do I select a value that starts with a certain prefix? For example I want all <author> elements that contain a <last-name> element with a value that begins with the letter Mi. Will this work? Or it will also match "Ni"? author A more general question, how do a match against a regular expression? Thanks Li Xuejun
5
2807
by: Max Bentz | last post by:
How may I generate a numbered list (using <ol><li>, etc), which contains more than 1000 elements? My list is ok till 999, then it continues with 000, 001, 002, etc. Thanks for a tip Max
6
7483
by: Patrick | last post by:
Hi I am a newbie struggling a little with css.It is hard to get it right in all browsers, so i decided to read the CSS2 specification on the w3 site. What is the following from the CSS2 specification: "Quote starts": 5.6 Child selectors
2
1194
by: Albert | last post by:
Hello all I am using a datafeed that provides me with a Javascript that spits out a bunch of hyperlinks to other locations. Her is what it looks like: <script language="javascript" src=http://datafeed.XXXXXX.com/YYY.asp?area=XX&stories=10&url=www.ABC.com> </script>
2
1447
by: KubixKiller | last post by:
Hello, I use the following XML-file to store some useless facts I want to display using PHP. I wrote some PHP code to generate HTML, because I do not have any knowledge of stylesheets etc etc. The problem arises that the php-function next_sibling from the DOMXML library doesn't seem to do what it should. See the code later in this message. Look at the lines below the comment line : # Cycle all item-elements
3
3491
by: User | last post by:
Hi, Is it possible to transform Ordered/Unordered list into navigation dropdown menus? Is this effect achieved by CSS? or via Javascript? PLease advise Thanks.
4
1359
by: x_knifer_x | last post by:
go.
4
1696
by: DigitalDrew | last post by:
Just wanted to say hello to all the other newbies, and ask my first question: Your help is extremely needed, and I would appreciate anyone who can help. I am trying to make a website with SSI (server side includes), so my site doesn't take years to load. Here is my html and <?php ?> function: <body> <div id="container">
0
8668
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9148
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9012
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
7708
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6515
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4358
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4611
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3034
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2319
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.