SitePoint Sponsor |
|
User Tag List
Results 1 to 9 of 9
-
Sep 9, 2004, 10:10 #1
- Join Date
- May 2002
- Posts
- 72
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
display inline, BG image, and IE not playing friendly
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
-
Sep 9, 2004, 10:49 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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
-
Sep 9, 2004, 11:26 #3
- Join Date
- May 2002
- Posts
- 72
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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...
-
Sep 9, 2004, 14:07 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Try this instead:
Code:.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; }
-
Sep 9, 2004, 14:39 #5
- Join Date
- May 2002
- Posts
- 72
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hey thanks! That did it! Have any idea why it wrapped the bullet over to the next line with my code??
-
Sep 9, 2004, 16:10 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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
-
Sep 9, 2004, 16:44 #7
- Join Date
- May 2002
- Posts
- 72
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Sep 10, 2004, 10:39 #8
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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
-
Sep 11, 2004, 13:29 #9
- Join Date
- May 2002
- Posts
- 72
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
Bookmarks