SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
-
Oct 4, 2004, 02:58 #1
- Join Date
- Oct 2004
- Location
- Athens
- Posts
- 57
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Align background image bullet on 2-line link?
Greetings,
I am relatively new to CSS and am trying to align a background image bullet to the TOP line of a TWO line link. Currently the bullet aligns between the two lines. I have attached a screenshot image to better illustrate the problem. Below is the CSS. Thanks for any assistance!
li
{
list-style-type: none;
background: url(../Images/bullet.gif) no-repeat left;
padding: 0 0 0 10px;
}
-
Oct 4, 2004, 03:36 #2
- Join Date
- Nov 2003
- Location
- Malmoe, Sweden
- Posts
- 265
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
What about:
Code:background: url(../Images/bullet.gif) no-repeat top left;
-
Oct 4, 2004, 03:47 #3
- Join Date
- Oct 2004
- Location
- Athens
- Posts
- 57
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
"no repeat top left" worked! That is, the bullets now align to the top line. However, this has created a new issue. Now the bullets align to the very top of the top line text. Is there a way to align bullets to the top line AND center the bullets to that line? Thanks!
(Please view attached illustration)
-
Oct 4, 2004, 04:05 #4
- Join Date
- Nov 2003
- Location
- Malmoe, Sweden
- Posts
- 265
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Theoretically, you should be able to use the :first-line pseudo-element:
Code:li { list-style-type: none; padding: 0 0 0 10px; } li:first-line { background: url(../Images/bullet.gif) no-repeat left; }
-
Oct 4, 2004, 05:20 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Alternatively just add a top position to the bullet image.
Code:background: url(../Images/bullet.gif) no-repeat 0 5px;
Paul
Bookmarks