Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   list-style-image in IE7 (http://www.velocityreviews.com/forums/t646751-list-style-image-in-ie7.html)

rynato 12-01-2008 02:51 PM

list-style-image in IE7
 
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 12-01-2008 03:33 PM

Re: list-style-image in IE7
 
rynato wrote:
> 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...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

C A Upsdell 12-01-2008 03:35 PM

Re: list-style-image in IE7
 
rynato wrote:
> 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 12-01-2008 05:27 PM

Re: list-style-image in IE7
 
On Dec 1, 8:35*am, C A Upsdell <cupsd...@upsdell.invalid> wrote:
> rynato wrote:
> > 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.


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 12-01-2008 07:04 PM

Re: list-style-image in IE7
 

rynato wrote:
> 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.

--
Berg

C A Upsdell 12-01-2008 07:32 PM

Re: list-style-image in IE7
 
rynato wrote:
> On Dec 1, 8:35 am, C A Upsdell <cupsd...@upsdell.invalid> wrote:
>>> 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!


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 12-02-2008 07:19 PM

Re: list-style-image in IE7
 
On Dec 1, 12:32*pm, C A Upsdell <cupsd...@upsdell.invalid> wrote:
> rynato wrote:
> > On Dec 1, 8:35 am, C A Upsdell <cupsd...@upsdell.invalid> wrote:
> >>> 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!

>
> 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 12-02-2008 07:30 PM

Re: list-style-image in IE7
 
rynato wrote:

> 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


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

mynameisnobodyodyssea@googlemail.com 12-02-2008 07:54 PM

Re: list-style-image in IE7
 
On Dec 2, 7:19*pm, rynato wrote:
> 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 12-06-2008 08:27 AM

Re: list-style-image in IE7
 
On 1 déc, 09:51, rynato <ryn...@gmail.com> wrote:
> 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/BrowserBugsSe...IE7Bugs/#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


All times are GMT. The time now is 11:44 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.