Aug 11
Right aligned bullet list issue
2004 at 01.09 am posted by Veerle Pieters
For a project I’m working on I’m using a bullet list styled through CSS for a title that is right aligned and has a bullet image in front. This is what I mean:
Adding the main container for the content
Since the text is right aligned I can't just work with a background image for my bullet. So what I did is using a "list-style-image" for my li tag selector and the 2 lined dotted image was used to define the background for the ul tag selector. This is the CSS code:
ul {list-style-type: none;margin: 10px 0;padding: 0;height: 45px;width: 465px;background: transparent url(images/background.gif) no-repeat;}
li {text-align: right;font: normal 18px Georgia, Times New Roman, Times, serif;color: #cc0000;margin: 0 10px 0 0;padding: 10px 10px 0 0;list-style: none inside url(images/bullet.gif);}
The weird thing is that Internet Explorer 6 aligns the bullet and the text differently then Safari, FireFox, Netscape or Mozilla. If I change the values of the margins, it changes the position of the text and the bullet in Internet Explorer, but the space around the title (including the background) remains the same. In standard browsers the space around the title (including the background) changes, which I find very logical since that is in fact the margin. If I change the value of the padding, nothing happens in Internet Explorer, but only in other browsers the position of the text and the bullet changes, again... logical since that IS the padding.
What also dazzles me is that the position of the bullet with respect to the text differs in I.E. compared to other browsers. I thought I just share this on my blog. Also I'm wondering if this is some kind of I.E. bug (although I didn't find any online sources about this so far) or if I'm missing something here? If we find a solution it doesn't only help me but probably others with a similar situation too. Any help, suggestions, experiences etc. are much appreciated, thanks ;-)
Update: it seems that using a h1 tag with a span tag nested inside instead of an ordered list is a better solution for my titles. They are titles after all, so this is indeed more semantic like Roel suggested in the comments.
This is my adjusted page
There are some issues with the way bullets indent in lists, there isn't a 100% consistency. Read al about this in Eric Meyer's article here. Thanks again for this helpful URL Aleksandar.
7served
1
Well, I guess that’s why most CSS-designers don’t like the list-stype-type thing and use a backgruond-image and some left-padding to achieve the ‘bullet’ effect.
I think you could still use this technique with just one extra span:
<h1><span>title goes here</span></h1>
Now you can use a float:right for the h1 and apply a bg-image and left-padding to the inner span that holds the title.
It’s just a quick idea tough… haven’t tested it :)
I’m also wondering why you’re using an unordered list for your titles right now. The graphical bullet that’s added to each title doesn’t meab that you should mark them up as list items. I think it’s semantically incorrect.
2
er…I am wondering if you align the list items left, but enclose the ul in a div, give it a width and float it right….I haven’t tried it, it might just work..:)
3
The problem here are default styles that IE and Opera use, comparing to all other browsers. You can read abot list problem in Eric Meyer’s article , but this is the essence of what I’m using at my blog:
ul {
margin-left: 0;
padding-left: 2em;
}
* html ul {
padding-left: 0;
margin-left: 1.5em;
}
* html li {
padding-left: 0.5em;
}
Opera gets the short stick here. It uses margin for lists as IE does, but it is like any other modern browser for HTML/CSS stuff. I really don’t want to hack around for that. The thing above is just enough.
4
@Roel, yes you might be right. I did actually thought of using a header tag instead. But I wonder if the idea you suggest will work for every different title, I think the leftpadding is a problem, no? Since each title has a different length. But maybe I should consider using a header tag anyway since these are titles after all and a bullet list might not be the correct option indeed.
@hp, interesting, I might try this out and see what happens, thanks.
@Aleksander, thanks for the interesting link and explanation very helpful.
5
@Roel, I’ve tried your method and it works ;-) It seems that you are right after all. I’ve updated my article and added a link to the example page.
6
It was my pleasure to assist you ;)
7
I’ve noticed the * html selector. I guess that’s for solving browser differences. Does anybody know of a good article about this topic? What I really need to know is how I can make different style sheet rules for IE and FIREFOX.
Regards,
Loek