473,549 Members | 2,822 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 16050
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*****@juliet remblay.com.inv alid> 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**@w3develop ment.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">Descripti on 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
7942
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( array( 'id' => 'A', 'parent_id' => null, 'value' => 'aaa') , array( 'id' => 'B', 'parent_id' => 'A', 'value' => 'bbb') , array( 'id' => 'C', 'parent_id' => 'B', 'value' => 'ccc') , array( 'id' =>...
1
2506
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 * pokereval_seven_cards(PyObject *self, PyObject *args) { int i;
7
2954
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) This should return something like:
9
3492
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 maybe I could use list container from STL, but unfortunately probably not. I checked it, and when I increase (++) iterator pointing to the last element the program crashes. I know the standard says,...
10
15109
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; // x and y position coordinates struct enemy *enemydata; // Holds information about an enemy (in a game) // Its a double linked list node
24
5725
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 macros: /* public.h - Public declarations and macros */ #ifndef PUBLIC #define PUBLIC
4
3590
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;   jmp_buf state;   int    stack; };   struct pcb *pcb_pointer;
0
1812
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 has to have both a head and a tail pointer, and each node in the list must contain two pointers, one pointing forward and one pointing backwards. Each node in the list will contain 3 data values:...
10
6554
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 UIandDB {
0
8613
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 except from the data it contains, which might be anything from a short integer value to a complex struct type, also has a pointer to the next node in the single-linked list. That pointer will be NULL...
0
7551
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...
0
7477
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7991
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...
0
7838
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6084
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...
0
3524
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...
0
3503
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1971
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
0
790
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

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.