472,353 Members | 1,488 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

list-style-image margin problem

I find that when I use list-style-image with galeon or mozilla,
padding is inserted between the symbol image and the following list
text, while under IE 5.0 it seems to be inserted before the image
instead of after it.

li.up {
list-style-image: url(../bin/arrow.png);
height: 1.4em;
margin-left: -0.4em;
}

<ul>
<li class="up">list text</a>
</li>
</ul>

By fiddling, I find that when I use a LI container that is not
nested within a UL container, the padding is not inserted, so it
appears that the padding is associated with the UL element.

I'm looking for a work-around so that the padding that appears at
least to the right of the symbol image is the same in both
environments. I assume that adding some right margin to the symbol
graphic will just increase the margin in mozilla.

Ideally, I'd like to have the margin to the left of the symbol image
remain the same as well, but this is less critical. The margin-left
value above serves to move the list item symbol to nearly the left
edge of the body, and the padding problem described above makes this
left shift a bit inconsistent. If I try to move the list to the left
by adding negative margin to the UL element, the discrepancy becomes
great.

--
Haines Brown

Jul 20 '05 #1
6 15965
Haines Brown wrote:
when I use list-style-image with galeon or mozilla, padding is
inserted between the symbol image and the following list text
No. There is a left-padding on the <UL> element, into which goes the
list marker.
while under IE 5.0 it seems to be inserted before the image instead
of after it.
The <UL> element gets a left-margin. Same for Opera.

http://devedge.netscape.com/viewsour...2/list-indent/
By fiddling, I find that when I use a LI container that is not nested
within a UL container, the padding is not inserted
Well, since that's invalid markup, it's hard to say what's going on.
(Error correction is an arcane science, it seems.)
it appears that the padding is associated with the UL element.
The padding or the margin is associated with the <UL> element.
I'm looking for a work-around so that the padding that appears at
least to the right of the symbol image is the same in both
environments.


Explicitly set both margin-left and padding-left on <UL>.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
Jul 20 '05 #2
> I find that when I use list-style-image with galeon or mozilla,
padding is inserted between the symbol image and the following list
text, while under IE 5.0 it seems to be inserted before the image
instead of after it.

li.up {
list-style-image: url(../bin/arrow.png);
height: 1.4em;
margin-left: -0.4em;
}
Brian <us*****@julietremblay.com.invalid> writes:
No. There is a left-padding on the <UL> element, into which goes the
list marker.
Yipes. You are quite right. My memory failed me. However, when I make
the correction, the old problem persists and there an additional
bigger problem.
The <UL> element gets a left-margin. Same for Opera.
This does not seem to be true when using list-style-image under
galeon/mozilla. Here's my revised markup:

ul.parents {
list-style-image: url(../bin/arrow.png);
margin-left: -0.3em;
}

<ul class="parents">
<li>text</li>
</ul>

To explain the situation, I'll compare a normal UL with its default
bullet and the list-style-image list with a custom symbol image.

Under galeon, the bullet aligns with the _right_ edge of the symbol
image, and as a result the left edge of the graphic almost reaches
the left border of the body. Under IE 5.0, the bullet aligns with the
_left_ edge of the symbol. That is, in the two browsers, the symbol is
horizontally displaced by the width of the symbol.

However, the line texts roughly align because the padding seen between
the bullet and text with tbe normal UL is not seen between the sylbol
and text with the list-style-image list. That is, with the corrected
markup above, there is no padding between symbol and text.
Well, since that's invalid markup, it's hard to say what's going on.
(Error correction is an arcane science, it seems.)
Yes, but, oddly, my bad markup validated OK with W3C.
Explicitly set both margin-left and padding-left on <UL>.


A little hard to do if my description above is accurate. In the above
markup, I use a bit of margin-left to set the symbol image exactly at
the body margin, but then it falls outside the body in EI 5.0 by the
width of the symbol.

I was better off with my original incorrect markup.

--
Haines Brown
Jul 20 '05 #3
Haines Brown wrote:

[li outside ul]
Well, since that's invalid markup, it's hard to say what's going on.
(Error correction is an arcane science, it seems.)

Yes, but, oddly, my bad markup validated OK with W3C.


li is only valid as a child of ul or ol. I'm pretty sure, the validator
will give you an error when you use li without ul or ol parent.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Jul 20 '05 #4
Johannes Koch <ko**@w3development.de> writes:
Haines Brown wrote:

[li outside ul] li is only valid as a child of ul or ol. I'm pretty sure, the
validator will give you an error when you use li without ul or ol
parent.


Sorry I wasn't clearer about this. The LI was not outside a UL
container. Here's the markup I'm talking about (I've expanded the
information I offered before because there's several issues here):

ul.parents {
margin-top: 1em;
margin-bottom: -0.3em;
}
li.up {
list-style-image: url(../bin/arrow.png);
height: 1.4em;
}
.link-up {
font-weight: bold;
position: relative;
top: -0.4em;
}

<ul class="parents">
<li class="up"><a href="index-a.html">
<span class="link-up">Description of a parent</span></a>
</li>
</ul>

First to mention is that the vertical spacing defined for the .link-up
class is intended to adjust the vertical position of the symbol image
relative to the following line of text (I don't want the image to
rest exactly on the base line of text). However, I don't get
consistent vertical positioning between Mozilla and IE 5.0. What could
be the source of this inconsistency? Do I need to define line height
as 1 em in li.up in order to equalize inheritance (not in a position
to check this at this moment)?

Second, while the LI is contained within the UL block, what I've done
is to associate the list-style-image with the LI, not the UL. This is
not the way my books says it is supposed to be, but I find that a) it
passes W3C validation, and b) it gets around the problem that with
list-style-image, IE 5.0 places the right margin of the image in the
position otherwise taken by the normal UL bullet, while Mozilla places
the left margin of the symbol image in the position otherwise taken by
the normal UL bullet. This means that when comparing Mozilla and EI
5.0, there is a horizontal shift in the position of the LI that is
equal to the width of the symbol image. My question is, if my
adventurous syntax is a bad choice, how do I correct the inconsistent
horizonital positioning that results when the list-style-image is
properly associated with the UL element?

Third, it seems that Mozilla inserts a small padding to the right of
the symbol image to separate it from the following text, which IE 5.0
does not. I'm not sure how to overcome the resulting inconsistency
between the two browsers. While the answer might be to define the
padding between the symbol and text to override the default, so far
I've not figured out how to do it.

--
Haines Brown

Jul 20 '05 #5
Haines Brown wrote:
["list-style-image" vs. margin]

Gaah! I hate that one. Every browser worked fine, i.e. displayed
appropriate padding, except IE. What about this solution:

<ul style="list-style-image:url(./my_fancy_bullet.png);">
<li style="padding-left:5pt;">
Text Text Text Text Text Text
</li>
</ul>

HTH
Torsten
Jul 20 '05 #6
to**************@web.de (Torsten Kleinert) writes:
Haines Brown wrote:
["list-style-image" vs. margin]

Gaah! I hate that one. Every browser worked fine, i.e. displayed
appropriate padding, except IE. What about this solution:

<ul style="list-style-image:url(./my_fancy_bullet.png);">
<li style="padding-left:5pt;">
Text Text Text Text Text Text
</li>
</ul>

HTH
Torsten


The context is complicated enough so that I'm not sure what markup is
causing you to gag ;-)

But your suggestion does not work for me. That is, using the markup
you provide here, under IE, when compared with Mozella, the image
(fancy-bullet) gets shifted further right by the width of the
image. It was this problem that prompted me to arrive at an ugly
solution in the first place.

Just to be sure we are talking about the same thing, here's what fixed
my problem (simplified a bit by leaving out vertical space
adjustments):

ul.children {
list-style-type: none;
padding-left: 0px;
margin-left: 35px;
}
li.down {
background-image: url(../bin/arrow-f.png);
background-repeat: no-repeat;
padding-left: 30px;
}

<ul class="children">
<li class="down">
Text Text Text
</li>
</ul>

The basic difference here is that I've first neutralized the left
padding inherited under EI, then defined a left margin for the list to
be shared by Mozilla and IE.

The other problem was inconsistant spacing between the image
and the text. Mozilla has a space by default, while it disappears
under IE. To take care of this, I had to get rid of the list image and
simulate it by using the image as backgroud.

Yes, sure is ugly, but after much fiddling, the only work-around I found.
It looks OK on my IE 5. Are you saying your experience with it is
otherwise?

--
Haines Brown

Jul 20 '05 #7

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

Similar topics

5
by: Jeffrey Silverman | last post by:
Hi, all. I have a linked list. I need an algorithm to create a tree structure from that list. Basically, I want to turn this: $list = array(...
1
by: John Hunter | last post by:
I am writing a python extension module and have a reference counting question My function looks like static PyObject *...
7
by: Klaus Neuner | last post by:
Hello, I need a function that converts a list into a set of regexes. Like so: string_list = print string_list2regexes(string_list) ...
9
by: kazio | last post by:
Hello, So, I need to have double linked, circular list (last element point to the first one and first one points to the last one). I thought...
10
by: Kent | last post by:
Hi! I want to store data (of enemys in a game) as a linked list, each node will look something like the following: struct node { double x,y;...
24
by: Robin Cole | last post by:
I'd like a code review if anyone has the time. The code implements a basic skip list library for generic use. I use the following header for debug...
4
by: JS | last post by:
I have a file called test.c. There I create a pointer to a pcb struct: struct pcb { void*(*start_routine)(void*); void*arg;...
0
by: drewy2k12 | last post by:
Heres the story, I have to create a doubly linked list for class, and i have no clue on how to do it, i can barely create a single linked list. It...
10
by: AZRebelCowgirl73 | last post by:
This is what I have so far: My program! import java.util.*; import java.lang.*; import java.io.*; import ch06.lists.*; public class...
0
by: Atos | last post by:
SINGLE-LINKED LIST Let's start with the simplest kind of linked list : the single-linked list which only has one link per node. That node...
1
by: Kemmylinns12 | last post by:
Blockchain technology has emerged as a transformative force in the business world, offering unprecedented opportunities for innovation and...
0
by: antdb | last post by:
Ⅰ. Advantage of AntDB: hyper-convergence + streaming processing engine In the overall architecture, a new "hyper-convergence" concept was...
0
by: Matthew3360 | last post by:
Hi there. I have been struggling to find out how to use a variable as my location in my header redirect function. Here is my code. ...
2
by: Matthew3360 | last post by:
Hi, I have a python app that i want to be able to get variables from a php page on my webserver. My python app is on my computer. How would I make it...
0
by: AndyPSV | last post by:
HOW CAN I CREATE AN AI with an .executable file that would suck all files in the folder and on my computerHOW CAN I CREATE AN AI with an .executable...
0
hi
by: WisdomUfot | last post by:
It's an interesting question you've got about how Gmail hides the HTTP referrer when a link in an email is clicked. While I don't have the specific...
0
by: Matthew3360 | last post by:
Hi, I have been trying to connect to a local host using php curl. But I am finding it hard to do this. I am doing the curl get request from my web...
0
by: Carina712 | last post by:
Setting background colors for Excel documents can help to improve the visual appeal of the document and make it easier to read and understand....
0
BLUEPANDA
by: BLUEPANDA | last post by:
At BluePanda Dev, we're passionate about building high-quality software and sharing our knowledge with the community. That's why we've created a SaaS...

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.