- This topic is empty.
-
AuthorPosts
-
May 14, 2013 at 3:15 pm #44774RohithzrParticipant
i hav this code
- abcde
- zxcvb
and this css
ul li{
list-style-image:”src”;
list-style-position:”inside”;
}the problem is that this text here is aligned at the bottom
i want it centeredMay 14, 2013 at 3:22 pm #135062RohithzrParticipanti dont know code option is not working for some reasons
May 14, 2013 at 4:42 pm #135070AlenParticipantYou mean something like this: http://codepen.io/anon/pen/ugEje
May 14, 2013 at 5:21 pm #135078CrocoDillonParticipantI’m guessing the list-style-image is taller than the height of the li without the image and the text is baseline aligned with this image. Vertical-align doesn’t seem to work so I’m lost (without extra markup that is).
May 14, 2013 at 6:24 pm #135086unasAquilaParticipantjust give it equal padding top and bottom this should correct for any image size issues i.e :
padding: 0.3em 0em;
May 14, 2013 at 9:52 pm #135107ElijahFowlerParticipantCreate a [Codepen](http://codepen.io/ “Codepen or it didn’t happen!”) and we can get you fixed up. ;)
Also, the code option requires that you select all the text that you want in the code box. Just a tip. ;)
HTH,
-Elijah
May 15, 2013 at 6:56 am #135150RohithzrParticipant@AlenAbdula well not really iam using an image of about 34px as my list style
@Dillion well vertical align neva works i always end up using tables in such cases
@unasAquila no it doesnt seem to work for me coz it gives padding to whole li including the image bullet so it does not work
@Elijah creating a pen but replace it with a image of 36*36 px then work around it
and thanx for code issue i was using it as tags… my bad[pen](http://codepen.io/anon/pen/bkdny “pen”)
May 15, 2013 at 7:19 am #135153Paulie_DMemberThe answer is to not use `list-style-image` as, as you have discovered, this causes issue with the text alignment.
Instead use the image as a bg image like this: http://codepen.io/anon/pen/KIheg
May 15, 2013 at 7:43 am #135157unasAquilaParticipantOr using `list-style-image`
May 15, 2013 at 9:47 am #135169CrocoDillonParticipant> Or using list-style-image
That has nothing to do with `list-style-image` but with setting line height equal to image height, breaks if the text is more than 1 line.
May 15, 2013 at 10:32 am #135176Paulie_DMember>setting line height equal to image height
Doesn’t always work…see my Codepen
May 15, 2013 at 11:10 am #135184RohithzrParticipant@Paulie D kinda workd for me man … thanks a lot now i can get rid of the tables i created
> setting line height equal to image height
i tried line height and image height
but didnt work the pen is perfect… atleast for my problemsMay 15, 2013 at 11:14 am #135186ChinmayDeyParticipantYou can use the contains within a `` or `
` or another tag and use line-heights css for this tag.
May 15, 2013 at 11:20 am #135188Paulie_DMember>ChinmayDey
That’s just unnecessary mark-up.
May 16, 2013 at 4:18 am #135255RohithzrParticipantjust wanted to know if theres any method to display a couple of backgrounds in an li
the thing is that the image bullet (converted to background)
now i want that on hover it display a blue bar of selection in background without removing the bullet backgroundcurrently i am achieving it through another background which i photoshoped (the bullet image and bar image together) and am changing the bg image on hover
any better way of doing it?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.