list-style-image in IE7

[rynato]

While fine-tuning a site, I discovered that a list-style-image was
positioning itself in the vertical middle of the list.

The CSS is rather complex, so I'm going to refrain from posting it
here (though I will if requested).

I've gone through all the styles related (or which seem to be related)
to the list-style-image; nothing at all seems to affect this middle
positioning. This does not happen in Safari 3 nor FF3; only in IE7 (I
have not yet checked other flavors of IE). All other browsers position
the list-style-image at the top of the list.

For what it's worth, there are nested <ul> inside each <li> though I
don't see how that should affect the behavior.

Just wondering if anyone has run into this and might have a solution?
I have googled quite a bit and it seems that there is no way to change
the vertical positioning of a list-style-image.

Because of the nature of how this is used, fixing the position of this
list-style-image with margin, padding, etc will not work. Each <ul> is
of different heights and it would be a nightmare to set the position
of the list-style-image for each <ul>.

For now, I have used a CSS hack to just turn off the list-style-image
for all IE browsers.

Thanks in advance if any of you have useful solutions or hints!!!

 

[Jonathan N. Little]

While fine-tuning a site, I discovered that a list-style-image was
positioning itself in the vertical middle of the list.

The CSS is rather complex, so I'm going to refrain from posting it
here (though I will if requested).

Thank you for *not* posting 1000 lines of code, but what you *should*
have done was ... (c'on everyone in unison now) ... *post a URL*!

I've gone through all the styles related (or which seem to be related)
to the list-style-image; nothing at all seems to affect this middle
positioning. This does not happen in Safari 3 nor FF3; only in IE7 (I
have not yet checked other flavors of IE). All other browsers position
the list-style-image at the top of the list.

Precise placement of the bullets, be they characters or images, other
than inside or outside of the text "block" is up to the user agent and
not under your control. IE formats lists a bit differently than other
browsers, but the position of the bullet with respect to the line-height
is not really controllable. You can play around with the physical
dimensions of the image and that can help center it among all the
browsers, but since text size is flexible, success is not assured. You
may have to live with it...

 

[C A Upsdell]

While fine-tuning a site, I discovered that a list-style-image was
positioning itself in the vertical middle of the list.

I've gone through all the styles related (or which seem to be related)
to the list-style-image; nothing at all seems to affect this middle
positioning. This does not happen in Safari 3 nor FF3; only in IE7 (I
have not yet checked other flavors of IE). All other browsers position
the list-style-image at the top of the list.

I assume you are speaking of the vertical position of the image.

I have found that Opera puts it higher than most browsers. I have also
found that some browsers place it closer to the list item than other
browsers.

A workaround which I have found effective is to add three extra
transparent rows and columns to the image, at the top and to the right
of the image, when I create the image. The extra rows at the top have
the effect of shoving the image down by 3 pixels. The extra columns at
the right have the effect of ensuring that at least a 3 pixel gap
appears between the image and the list item.

 

[rynato]

I assume you are speaking of the vertical position of the image.

yes, that's why I wrote, "vertical middle" ;-)

I have found that Opera puts it higher than most browsers.  I have also
found that some browsers place it closer to the list item than other
browsers.

it looks fine in every browser EXCEPT IE, which stubbornly insists on
putting it in the middle of the <ul>

the odd thing is, I remember an early version of the site and it
positioned just fine. So, something I have done since then is causing
it to reposition. I may try digging up an early version of this page
and see if I can track down what happened.

A workaround which I have found effective is to add three extra
transparent rows and columns to the image, at the top and to the right
of the image, when I create the image.  The extra rows at the top have
the effect of shoving the image down by 3 pixels.  The extra columns at
the right have the effect of ensuring that at least a 3 pixel gap
appears between the image and the list item.

you mean like with a table? GAH!

This is just replacing the default disc with a little arrow image.

I think I may just have to live with not having it appear in IE
browsers. It's not vital, just a nice little design element.

 

[Bergamot]

While fine-tuning a site, I discovered that a list-style-image was
positioning itself in the vertical middle of the list.

This does not happen in Safari 3 nor FF3; only in IE7

I am quite familiar with this stupid behavior and have not found a way
around it except to set list-style:none and make the marker a background
image on the <li> instead. If you don't want to punish other browsers
for IE's behavior, you can put those rules in a conditional comment.

 

[C A Upsdell]

you mean like with a table? GAH!

NO!

I mean changing the image for the marker, by making it 3 pixels taller
and 3 pixels wider, with the extra top and right pixels being transparent.

 

[rynato]

NO!

I mean changing the image for the marker, by making it 3 pixels taller
and 3 pixels wider, with the extra top and right pixels being transparent..

C A, I am not sure how that is supposed to make the image float to the
top of the list... in any case, each <ul> set is going to be of
varying heights depending on how many <li> are contained and the text
rendering of each browser.

Maybe I am being dense? Can you explain how adding 3 transparent
pixels at the top and right would accomplish the vertical alignment at
the top?

 

[Jonathan N. Little]

C A, I am not sure how that is supposed to make the image float to the
top of the list... in any case, each <ul> set is going to be of
varying heights depending on how many <li> are contained and the text
rendering of each browser.

Maybe I am being dense? Can you explain how adding 3 transparent
pixels at the top and right would accomplish the vertical alignment at
the top?

Yes, you are....where is the URL??? It sounds like you are doing
something unorthodox|incorrect and we need to actually *see* what you
are attempting! The bullets in a list are associated with each LI not UL

<ul>
<li>FEE</li>
<li>FIE</li>
<li>FOE</li>
<li>FUM</li>
</ul>

produces

* FEE

* FIE

* FOE

* FUM

not

FEE

FIE
*
FOE

FUM

 

[mynameisnobodyodyssea]

I am not sure how that is supposed to make the image float to the
top of the list...

Did you validate your page both HTML and CSS?
( maybe with validator.w3.org and jigsaw.w3.org/css-validator )

 

[GTalbot]

While fine-tuning a site, I discovered that a list-style-image was
positioning itself in the vertical middle of the list.

The CSS is rather complex, so I'm going to refrain from posting it
here (though I will if requested).

Please, never post code in newsgroup; just post an URL. Make sure your
markup code is valid first.

I've gone through all the styles related (or which seem to be related)
to the list-style-image; nothing at all seems to affect this middle
positioning. This does not happen in Safari 3 nor FF3; only in IE7 (I
have not yet checked other flavors of IE). All other browsers position
the list-style-image at the top of the list.

Vertical-align should NOT and must NOT apply to <ul> with list-style-
image
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug68

vertical-align must only apply to inline-level and to "table-cell"
elements. Vertical-align is not inherited. CSS 2.1, Section 10.8.1,
vertical-align

This bug was fixed in IE 8 beta 2.

Just wondering if anyone has run into this and might have a solution?
I have googled quite a bit and it seems that there is no way to change
the vertical positioning of a list-style-image.

List-markers are not supposed to be movable vertically to begin with.

Regards, Gérard

 

[Jukka K. Korpela]

List-markers are not supposed to be movable vertically to begin with.

Well, right, in the sense that CSS currently offers no way to affect them.
I'm sure many people would _want_ list markers (whether characters or
images) to be movable.

There are different workarounds, like
a) putting markers (as images or as text characters) into list item content
(and using list-style-type: none !important to suppress any
browser-generated markers); works on all browsers, makes marker position
styleable, but requires extra work and care
b) using generated content and styling it, to the extent it can be styled;
does not work for most users since generated content still has poor support
c) making the marker image a background image for list item element (for
which you set some suitable left padding), using background positioning to
set the vertical position.