List-Style-Image w/ list-style-position alignment issue 1

[Borvik]

I have an alignment issue for the custom image of an unordered-list in Internet Explorer

In FireFox, Chrome, and Safari (Win) it works fine but in IE7 it leaves no spacing between it and the line item. (surprise, surprise IE breaks)

The document validates successfully as XHTML 1.0 Strict and CSS level 2.

You can see an example at

http://borvik.gotdns.com/test/example.html.

That is just a small part of the page - though it does show what is wrong.

Any idea on how to fix the bullet spacing issue?

Thanks.

 

[traingamer]

Define both margin-left and padding-left as the browsers use different defaults for lists.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[BabyJeffy]

Off topic - kinda...

Also be aware that if you float the LI elements, they will lose the custom images (in IE6 and IE7 only). This is actually a correct interpretation of the specs... but a real pain (solved by adding a SPAN inside the LI to contain the image as a background item).

I just spent quite some time trying to fix this problem only to find it's not fixable *lol*

Cheers,
Jeff

[tt]Visit my blog [!]@[/!]

http://www.coderambler.com/

Visit Code Couch [!]@[/!]

http://www.codecouch.com/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[Borvik]

@traingamer - Define them where? I have "margin:0;padding:0;" on the UL (I also have it in a body definition within the external css file).

@BabyJeffy - sounds like that effects just LI elements that are floated - not the container a UL happens to be in (right?).

 

[BabyJeffy]

Correct

I was attempting to use floated LIs to create a "breadcrumb" trail... and spent ages trying all manner of "tricks" and hacks to no avail.

Cheers,
Jeff

[tt]Visit my blog [!]@[/!]

http://www.coderambler.com/

Visit Code Couch [!]@[/!]

http://www.codecouch.com/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[traingamer]

Your list-style-position: inside; is forcing the image against the list item in IE.

Is this IE being wrong or just a different interpretation of the spec - couldn't say.

I've had more success with a background image on the li. Actual example:

ul li {
	margin: 3px -20px 3px 20px;
	padding: 0 0 0 0;
	list-style: none;
	background: url(newbullet.gif) no-repeat 0 3px;
}

You may or may not need the negative right margin for your purposes.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[Borvik]

Finally got around to trying the image as a background and it looks fine now.

As far as IE being wrong - I would have to say yes (though I'm sure there will be those that disagree), as every other browser (that I've tested) does it the other way - plus it isn't acting as expected.

Thanks traingamer.