padding in <ul>?

[Dano]

Hi,

I have some images instead of the regular bullets on several pages on my
site, but I want the text of the <LI>'s a bit more to the right
(padding-like).

It is shown e.g. on:
http://www.ltvborgharen.nl/heren3.shtml and
http://www.ltvborgharen.nl/contact.shtml

The markup for the <UL> is like this:
ul.mail {list-style-image: url('img/mail.gif'); list-style-position:
inside; }

Any suggestions how this can be fixed in CSS?

regards
Dan

 

[Toby Inkster]

I have some images instead of the regular bullets on several pages on my
site, but I want the text of the <LI>'s a bit more to the right
(padding-like).

Add some white space to the image itself using your graphics editor.

 

[dorayme]

Hi,

I have some images instead of the regular bullets on several pages on my
site, but I want the text of the <LI>'s a bit more to the right
(padding-like).

It is shown e.g. on:
http://www.ltvborgharen.nl/heren3.shtml and
http://www.ltvborgharen.nl/contact.shtml

The markup for the <UL> is like this:
ul.mail {list-style-image: url('img/mail.gif'); list-style-position:
inside; }

Any suggestions how this can be fixed in CSS?

There seems to be trouble with your css *apart* from the placement of list
style image. Turning off all css fixes it because there is no float or em
restricted widths. Also it disappears by making my browser fonts unusually
big. Mac IE and Mozilla. Try your browser but "alt -" or "command -" it and
it may appear on yours...

There may be trouble with the space allowed or the code for providing for
the nav div itself... sorry, have not looked into it but you may need to
look into it. Ask again if no such trouble can be seen by you...

dorayme

 

[Blinky the Shark]

The markup for the <UL> is like this:
ul.mail {list-style-image: url('img/mail.gif'); list-style-position:
inside; }

How have you found crossbrowser compatability to be using
list-style-image?

 

[Lauri Raittila]

How have you found crossbrowser compatability to be using
list-style-image?

AFAIK it is very good. Actully, can't think *any* property that is better
supported... (there is less issues than with margin, font-size, color...)

IIRC, works at least with: NN4 (all), IE4+, Opera 4+, MacIE5.2, Mozilla
(from way before 1.0)...

Never seen it break.

There may be some pixel perfectness problems, but I have never cared for
them.

 

[Dano]

There seems to be trouble with your css *apart* from the placement of list
style image. Turning off all css fixes it because there is no float or em
restricted widths. Also it disappears by making my browser fonts unusually
big. Mac IE and Mozilla. Try your browser but "alt -" or "command -" it
and
it may appear on yours...

The CSS validates and I see no strange things happen in Mozilla or Opera.
Can you specify what you mean?

There may be trouble with the space allowed or the code for providing for
the nav div itself... sorry, have not looked into it but you may need to
look into it. Ask again if no such trouble can be seen by you...

I've made the image itself a bit wider.

Dan

 

[Dano]

AFAIK it is very good. Actully, can't think *any* property that is better
supported... (there is less issues than with margin, font-size, color...)

IIRC, works at least with: NN4 (all), IE4+, Opera 4+, MacIE5.2, Mozilla
(from way before 1.0)...

Never seen it break.

There may be some pixel perfectness problems, but I have never cared for
them.

How could this be fixed?

Dan

 

[William Hamby]

Hi,

I have some images instead of the regular bullets on several pages on
my site, but I want the text of the <LI>'s a bit more to the right
(padding-like).

It is shown e.g. on:
http://www.ltvborgharen.nl/heren3.shtml and
http://www.ltvborgharen.nl/contact.shtml

The markup for the <UL> is like this:
ul.mail {list-style-image: url('img/mail.gif'); list-style-position:
inside; }

Any suggestions how this can be fixed in CSS?

Well, first of all, I don't see the word mail in any of your markup, so
the css rule you're trying to use can't find anything to style.

http://validator.w3.org/check?verbose=1&uri=http://www.ltvborgharen.nl/heren3.shtml