zebing
asked on
How do I align text on a multiple-line bulleted css list?
Hi, I just a simple css question that I've been struggling with. I'm customizing my wordpress blog that I've set up and I've having trouble with some bulleted lists. I'm using a background image as my bullets and I've set the bullets to display inside a box (as opposed to having the bullets on the outside). The problem is, when I set the list-style-position to "inside", it pushes the text in but only the first line of text. I'm working to make sure that all the text lines up nice and clean, but I just can't make it happen. Any suggestions at what I'm doing wrong? Here's my css:
#right ul {
margin-left: 3px;
padding: 0px 0px 0px 2px;
list-style-type: none;
}
#right li {
list-style-image: url(images/bullet-arrow.gi f);
background-repeat: no-repeat;
list-style-position: inside;
}
you can see what I'm working on at: http://209.200.225.119 (I'll have a domain very soon)
-don't mind all the strange stuff written here, it's just practice :)
Question 2.
You can also probably see that I have an image at the top of the page with text wrapped around it. Problem is the wrapped text doesn't align with the top of the picture vertically. The image is placed with the <p> tags and the css is as follows:
img.left {
display: block;
float: left;
clear: left;
}
Thanks, any help would be most appreciated :)
Jason
#right ul {
margin-left: 3px;
padding: 0px 0px 0px 2px;
list-style-type: none;
}
#right li {
list-style-image: url(images/bullet-arrow.gi
background-repeat: no-repeat;
list-style-position: inside;
}
you can see what I'm working on at: http://209.200.225.119 (I'll have a domain very soon)
-don't mind all the strange stuff written here, it's just practice :)
Question 2.
You can also probably see that I have an image at the top of the page with text wrapped around it. Problem is the wrapped text doesn't align with the top of the picture vertically. The image is placed with the <p> tags and the css is as follows:
img.left {
display: block;
float: left;
clear: left;
}
Thanks, any help would be most appreciated :)
Jason
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Also I noticed that after your img tag you have a <br/> tag that seems to be causing your gap between the text and img. Let me know if this does not help you
ASKER
jman56:
You're first solution worked like a charm! Thanks so much for the assistance!
Just for the future generations that might read this later, I also had to adjust the bullet background image vertically using this on the <li> tag:
background-position: -.2em .3em;
Now it works great, thanks.
You're first solution worked like a charm! Thanks so much for the assistance!
Just for the future generations that might read this later, I also had to adjust the bullet background image vertically using this on the <li> tag:
background-position: -.2em .3em;
Now it works great, thanks.
ASKER
Here was the final CSS for any body else finding this:
#right ul {
margin-left: 3px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
#right li {
background-image: url(images/bullet-arrow.gi f);
background-repeat: no-repeat;
list-style-position: inside;
margin-bottom: 7px;
padding-left: 16px;
background-position: 0em .3em;
#right ul {
margin-left: 3px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
#right li {
background-image: url(images/bullet-arrow.gi
background-repeat: no-repeat;
list-style-position: inside;
margin-bottom: 7px;
padding-left: 16px;
background-position: 0em .3em;
ASKER
Just for the record, that I didn't check that answer in other browsers before I accepted it. I know, I know, beginner mistake. Here's what yielded consistent results in IE6, FF, and Opera
#right ul {
margin-left: 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
#right li {
margin: 0 0 0.6em 0;
padding: 0 0 0 19px;
background: url('images/bullet-arrow.g if') 5px 0.17em no-repeat;
}
#right ul {
margin-left: 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
#right li {
margin: 0 0 0.6em 0;
padding: 0 0 0 19px;
background: url('images/bullet-arrow.g
}