Hi,
Im having problems with bullets I have assigned to my lists
I want one li to have a twitter icon as it is a link to a twitter page and the other li to have a facebook icon…
i set both li’s like the following:
<ul>
<li class=“twittericon”><a href=“#”>FOLLOW US ON TWITTER</a></li>
<li class=“facebookicon”><a href=“#”>VISIT OUR FACEBOOK PAGE</a></li>
</ul>
you can visit the page in question and will notice the lists appear in the header and footer
any help would be great…
Hi,
list-style-image will be buggy in older browsers and you will get much better results by setting the images as Background images.
To do that you would set the image on the “li” as no-repeat and then give a little left padding to keep the text off the image.
Something like this -
(of course you would want to target the “li” classes with the correct image)
#header ul, #footer ul {
margin:30px 40px 0px 0px;
float:right;
}
#header li, #footer li {
display:inline;
margin: 0px 10px 0px 0px;
[COLOR=Blue]background: url(../images/Social_media_bullet.jpg) no-repeat;
padding-left:25px; [/COLOR]
}
#header li a, #footer li a {
font-size:10px;
color:#fff;
font-weight:bold;
text-decoration:none;
}
I think it is the the display:inline; on the li that removes the bullet images. Try using floats instead. I think it will let you keep your bullet images that way.
Edit: I guess it’s not quite a simple as that. There seems to be more repeated code affecting how this displays and I had to get rid of a lot of inherited styles (using Firebug) to get it to work using list-style-image. However, Rayzur has a pretty good suggestion there using background images instead. It would be much simpler than trying to overwrite all these inherited styles.
thank you both, huit that seemed towork for me… how do i get the the link text after the bullet to line up central?
i have updated the page to show you my current issue…
when I used rayzur’s solution it chopped off half the icon,
im guessing I’d need to set the li to block and give it a height the equivilant of the icon’s height?
Do you need the icons that large? They would line up automatically if they were the same height as the text…
hmm, when I need bullets to line up in a certain way I usually default to background images like in Rayzur’s example because positioning bullets - other than the inside/outside value - simply doesn’t work. ^^;; If I knew of a way I would most certainly tell you.
I guess I could resize them and see if that works, but I cant see the text aligning to the v-middle of the icon…
Will try it and post back…
thanks for the help
I tried adding vertical-align to the nested <a> tags and it seems to work in FF/Firebug. Never thought to try this before but it might be the answer. (I’m going to do some more testing with this on my own later…)
Try this out:
#header li a, #footer li a {
color:#FFFFFF;
font-size:10px;
font-weight:bold;
padding:0 0 50px;
text-decoration:none;
vertical-align:130%; /* this might be the fix? */
}
Hi,
Yes the BG image exceeded the height of the line-box when you were using display:inline on your list items. You will always get more control over your UL when you use block level list items/anchors.
Working with the images that you have provided you could set the anchors at the same height and center your text vertically with line-height. You can always position your BG images also. I set them at no-repeat 0 50% in the code below but you will not see the BG image center vertically unless the anchor is taller than the image.
It is always good to group your relevant styles together so you are not having to hunt them down to make changes. Your twitter & facebook li classes were at the bottom of your stylesheet and the UL styles were up top. Set your css up in the same manner as your html and code maintenance will be much easier for you. 
/*------------ Header/Footer UL Styles ------------*/
[B]#header ul,
#footer ul[/B] {
margin:30px 40px 0px 0px;
float:right;
[COLOR=Blue]list-style:none;[/COLOR]
}
[B]#footer ul [/B]{[COLOR=Blue]margin-top:10px[/COLOR];}/*was 20px*/
[B]#header li,
#footer li[/B] {
[COLOR=Blue]float:left;[/COLOR]
margin: 0 10px 0 0;
}
[B]#header li a,
#footer li a[/B] {
[COLOR=Blue] float:left;
height:36px;/*BG image height*/
line-height:36px;/*center the text*/
padding-left:46px;/*BG image width + 10px*/[/COLOR]
font-size:10px;
color:#fff;
font-weight:bold;
text-decoration:none;
}
#header li a:hover,
#footer li a:hover {
color:#c06431;
}
[B]li.twittericon[/B] {
[COLOR=Blue]background:url(../images/twitter_icon.png) no-repeat 0 50%;[/COLOR]
}
[B]li.facebookicon[/B] {
[COLOR=Blue]background:url(../images/facebook-icon.png) no-repeat 0 50%;[/COLOR]
}
Thank you for that… it now works…
so when u set the background of the icons to no-repeat 0 50% what is the 0 and 50% part doing?
I have uploaded the amends and it looks great…
I’m having issues with the layout in chrome tho… Would you know why this might be the case, looking at my code?
The 0 and 50% are the positioning coordinates.
It’s saying start all the way on hte left (0) and then 50% down vertically (50%)
thank you for that…
