display inline, BG image, and IE not playing friendly

[kmurphy]

Hi, I am using the following technique to give an inline lists bullets

.navListContentHorizontal ul li{
clear:both;
display: inline;
padding-left: 10px;
margin-right:6px;
background:url(images/contentBulletSquare.png) no-repeat center left;
}

It works fine in Firefox, but in IE6 the bullets shoot to the left of the bage when a list item begins a new line as the browser is resized, so the BG image bullet then appears on the left of the next line (kind of hidden under the bullet or text under it) rather than at the front of the list item before it breaks to the next line...

Any sugesstions??

Thanks

[Paul O'B]

Hi,

Do you have a link to the effect you mentioned as I tried your code with a small bullet image and it seemed to work quite well.

Paul

[kmurphy]

check it here: http://66.183.118.242:9090/GCCBFM/members.php
it is a big llist that the client wants in a block style... and as posted, it works with firefox but not IE6... I am sure their is probably something simple I am missing...

[Paul O'B]

Hi,

Try this instead:

.navListContentHorizontal   ul li{
 clear:both;
 display: inline;
 padding-left: 10px;
 margin-right:6px;
 background:url(http://murphyzone.no-ip.com/GCCBFM/i...lletSquare.png) no-repeat 0 .65em;
}

Paul

[kmurphy]

Hey thanks! That did it! Have any idea why it wrapped the bullet over to the next line with my code??

[Paul O'B]

I think its just ie being awkward with inline content .

Browsers are alowed some leeway on how padding and margins are applied on inline content as their is no defined behaviour in some circumstances.

You also had the definitons for background position around the wrong way but I don't think it usually affects things. (its horizontal then vertical)

Paul

[kmurphy]

ooops! I spoke too soon, I thought it worked... when I first applied it, but IE is just not displaying the bullet image at all now... I may have broke something, with all the tinkering... but can't see what... anywho, at least it doesn't display it at all, which is better than a bit of it apearing on the next line... And it doesn't really affect the page so those IE users will simply loose out on those bullets... as I learn this stuff I am getting more and more miffed at IE!
cheers

[Paul O'B]

Hi,

The problem is that as soon as any part of the list breaks over to the next line then ie looses the leading padding and applies it to the new line. This means the bullet goes missing from the beginning of the line while it is on the line above.

Padding on inline elements, as mentioned above is treated differently from normal elements and I think ie is oly appying the padding at the start and end of the whole line when the inline element wraps.

You could possibly get around it by applying padding to empty spans and putting the background images in the spans but this seems a lot of effort and a bit wasteful.

However if you want it hacked to work then let me know and I'll provide some ugly code

Paul

[kmurphy]

Thanks Paul,
But I think I have decided to only (attempt) to hack items that would impact the usability (and perhaps 'look') drastically. As it stands, I will just use a different method... a paragrah actually, with &dots in between... I wanted to style it as the list was coming from an include file that is a bulleted list used eleswhere on the site, but the one page in question uses some of the list as a whole more to get an idea across as opposed to individual list items, which the user will be able to click on to get to see all the list items... So one file without the include file is not that much of a hassle to update every once in a while... and it probably doesn't even need to be updated as it serves its purpose as it is... kind of a 'read more' solution... anyway, thanks for the help it is very much appreciated.
cheers