# css menu bullet image getting cut off



## stargirl23 (Mar 27, 2008)

hi, i have an image that i want to use on my website as a hover bullet on my menu.
i managed to get everything working but the whole image doesn't show, it's getting cut off.

this is the bullet image:
*http://lizartlizard.fortuin.info/images/swoosh.png*

and this is the website, it's implemented on the menu on the home page.
http://lizartlizard.fortuin.info


----------



## colinsp (Sep 5, 2007)

It looks like you haven't given your bullet enough room. Play around with the height in your CSS for the a and a:hover tags and see where you go. With your padding and margins there don't appear to be 41px left for your bullet.


----------



## stargirl23 (Mar 27, 2008)

colinsp said:


> It looks like you haven't given your bullet enough room. Play around with the height in your CSS for the a and a:hover tags and see where you go. With your padding and margins there don't appear to be 41px left for your bullet.


that's the problem, i've been playing around with the CSS for days! finally got it this far. i'm not sure how to put padding in to control just the bullet. this is the css i'm using for the bullet. i tried line-height as well but i don't want more space between the menu items themselves, just more space for the bullet.

li.menu-item a:hover {
background-image: url(http://lizartlizard.fortuin.info/images/swoosh.png);
background-repeat: no-repeat;
background-color: #fff;
padding-left: 25px;
font-family: Verdana, Tahoma, Sans-Serif;
}

li.menu-item a {
background-repeat: no-repeat;
background-color: #fff;
padding-left: 25px;
font-family: Verdana, Tahoma, Sans-Serif;
}


----------



## stargirl23 (Mar 27, 2008)

also it looks like the bullet is too low, not centered with the text.


----------



## colinsp (Sep 5, 2007)

You need to edit your swoosh to it is too big. Currently it is 33px by 41px and has a lot of white space around it. This is what is appearing to cause it to be misaligned. Just by cropping you can get it down to 22 by 26 but I suspect that will still be a bit too big with the current font size that you have. As an experiment just increase your menu font size to 2em and you will see it is just about properly displayed. So reduce the top and bottom whitespace around the swoosh possibly make it smaller and play around with the line height or the font size to eventually get what you are looking for. 

I am afraid that it will need some experimentation.


----------



## stargirl23 (Mar 27, 2008)

colinsp said:


> You need to edit your swoosh to it is too big. Currently it is 33px by 41px and has a lot of white space around it. This is what is appearing to cause it to be misaligned. Just by cropping you can get it down to 22 by 26 but I suspect that will still be a bit too big with the current font size that you have. As an experiment just increase your menu font size to 2em and you will see it is just about properly displayed. So reduce the top and bottom whitespace around the swoosh possibly make it smaller and play around with the line height or the font size to eventually get what you are looking for.
> 
> I am afraid that it will need some experimentation.


i cropped the white space and played around with the padding. everything seems to work except the bullet appears on the line above the menu item hovered over. how can i lower it?


----------



## colinsp (Sep 5, 2007)

Add the code below to your css


```
li.menu-item a {padding-bottom: 7px;}
```
That will sort it for you.



> i cropped the white space and played around with the padding. everything seems to work except the bullet appears on the line above the menu item hovered over. how can i lower it?


That's not what i see in Firefox it appears fine for me with just a bit on the bottom of the swoosh cut off.


----------

