473,418 Members | 2,338 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,418 software developers and data experts.

Left margin/padding for lists

What is *supposed* to be the way to specify the horizontal offset of (a) the
list item's marker and (b) the list item's content? In particular, see

http://mywebpages.comcast.net/hmessinger/default.html

which validates under Strict. Under IE6, Opera, and Firebird, the markers
are indented as one would expect the default to be. What if I want them
moved over to the left edge of the list? On the above page, there is no
margin-left for either UL or LI.

Variations:

http://mywebpages.comcast.net/hmessinger/default2.html

UL { margin-left: 2em }

IE6: bullets move to the left
Opera: bullets move to the left
Firebird: bullets move to the right

http://mywebpages.comcast.net/hmessinger/default3.html

LI { margin-left: 2em }

IE6: bullets move to the right
Opera: bullets move to the right
Firebird: same placement as for default2.html.

http://mywebpages.comcast.net/hmessinger/default4.html

UL { margin-left: -2em }

IE6: bullets move *way* to the left (even the text is clipped on the left)
Opera: same as IE6
Firebird: bullets move to the left by the same amount as
they did for IE6 and Opera under default2.html

http://mywebpages.comcast.net/hmessinger/default5.html

LI { margin-left: -2em }

IE6: same placement as under default2.html.
Opera: same placement as under default2.html.
Firebird: same placement as for default4.html.

Curious. I could have gone on to try margin-left: 0 and various padding-left
permutations, but I thought I'd come ask you folks.

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

Jul 20 '05 #1
4 8378
In article Harlan Messinger wrote:
What is *supposed* to be the way to specify the horizontal offset of (a) the
list item's marker and (b) the list item's content? In particular, see
Display:marker etc. by CSS2 spec.
http://mywebpages.comcast.net/hmessinger/default.html

which validates under Strict. Under IE6, Opera, and Firebird, the markers
are indented as one would expect the default to be. What if I want them
moved over to the left edge of the list? On the above page, there is no
margin-left for either UL or LI.
[test cases to show known differency between mozilla and Opera/IE. Opera
and IE draw bullet to margin, mozilla to padding of ul/ol. IIRC]
Curious. I could have gone on to try margin-left: 0 and various padding-left
permutations, but I thought I'd come ask you folks.


As the CSS1 list model don't specify much about this, every browser has
done what it thinks is best. Opera and IE are IIRC same, Mozilla
different. Both behaviour is correct.

To change list style, always specify both padding-left and margin-left
for both ul/ol and li in order to get somewhat consistant results.

IMHO, none of the ways to display list is perfect, including
display:marker related stuff...
--
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.

Jul 20 '05 #2
Lauri Raittila wrote:
In article Harlan Messinger wrote:
What is *supposed* to be the way to specify the horizontal offset
of (a) the list item's marker and (b) the list item's content?


[test cases to show known differency between mozilla and Opera/IE.
Opera and IE draw bullet to margin, mozilla to padding of ul/ol.
IIRC]

As the CSS1 list model don't specify much about this, every browser
has done what it thinks is best. Opera and IE are IIRC same,
Mozilla different. Both behaviour is correct.


For the op, here's a page describing the different approaches:

http://devedge.netscape.com/viewsour...2/list-indent/

--
Brian
follow the directions in my address to email me

Jul 20 '05 #3

"Lauri Raittila" <la***@raittila.cjb.net> wrote in message
news:MP***********************@news.cis.dfn.de...
In article Harlan Messinger wrote:
What is *supposed* to be the way to specify the horizontal offset of (a) the list item's marker and (b) the list item's content? In particular, see
Display:marker etc. by CSS2 spec.
http://mywebpages.comcast.net/hmessinger/default.html

which validates under Strict. Under IE6, Opera, and Firebird, the markers are indented as one would expect the default to be. What if I want them
moved over to the left edge of the list? On the above page, there is no
margin-left for either UL or LI.


[test cases to show known differency between mozilla and Opera/IE. Opera
and IE draw bullet to margin, mozilla to padding of ul/ol. IIRC]
Curious. I could have gone on to try margin-left: 0 and various padding-left permutations, but I thought I'd come ask you folks.


As the CSS1 list model don't specify much about this,


A most unfortunate oversight. (Unless, of course, it was intentional, but I
can' t imagine what good would have been expected to come from it!)
every browser has
done what it thinks is best. Opera and IE are IIRC same, Mozilla
different. Both behaviour is correct.

To change list style, always specify both padding-left and margin-left
for both ul/ol and li in order to get somewhat consistant results.

IMHO, none of the ways to display list is perfect, including
display:marker related stuff...


Thanks.

Jul 20 '05 #4

"Brian" <us*****@julietremblay.com.invalid-remove-this-part> wrote in
message news:wBkLb.57$na.329@attbi_s04...
Lauri Raittila wrote:
In article Harlan Messinger wrote:
What is *supposed* to be the way to specify the horizontal offset
of (a) the list item's marker and (b) the list item's content?


[test cases to show known differency between mozilla and Opera/IE.
Opera and IE draw bullet to margin, mozilla to padding of ul/ol.
IIRC]

As the CSS1 list model don't specify much about this, every browser
has done what it thinks is best. Opera and IE are IIRC same,
Mozilla different. Both behaviour is correct.


For the op, here's a page describing the different approaches:

http://devedge.netscape.com/viewsour...2/list-indent/


Thanks!

Jul 20 '05 #5

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

Similar topics

2
by: Wiz | last post by:
Greetings the group! I see from a few previous postings that I am not the only person having a problem with hidden list item bullets. This question applies to both IE 6, current version, and...
2
by: Chris Gurk | last post by:
Hi Newsgroup, I am working on a website http://www.charter-yachtcharter.com/testsite/ (still in progress). There are two lists. The first is a simple paragraph (<p>-Tag), the second an...
4
by: Wilhelm Kutting | last post by:
hi, when i use the padding-left attribut, i like to overwrite a default value like that ..padding30 {margin-left: 30px;} ..padding0 {margin-left: 0px;} <div class="padding30"> Padding 30...
1
by: fleemo17 | last post by:
For increased accessibility, I've replaced "display:none" with the Off-Left method of hiding my CSS drop-down menus because the Jaws screen reader doesn't see any of the menus hidden with...
19
by: JB | last post by:
Hi All, Why doesn't this work in Firefox but is perfect in IE6? In IE6, the text is on the same line but in Firefox, the left aligned text is on the line above the right aligned text. ...
19
by: ashkaan57 | last post by:
Hi, I have a page in a right-to-left language and I am trying to make some bulleted lists using <ul>, but it puts the bullets to the left. Is there any way I can set the bullets to be on the...
5
by: Timeri | last post by:
This is a bit confusing until you actually see what I'm talking about but the main content of my page is not growing with the right column. I want the main content (left/larger column) to take into...
3
by: Nonce | last post by:
I have two examples of this behaviour: http://www.accursoft.co.uk/css/odd1.xhtml http://www.accursoft.co.uk/css/odd2.xhtml In each case, IE7 adds a left margin to textboxes for no apparent...
3
by: Noorain | last post by:
I designed a site. i want to header,footer,left & right column fixed but body information only scrolling. this site screen to be 800/600 px. i designed this way but when i used position fixed all...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
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,...
0
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...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
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,...
0
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...
0
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

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.