css menu bullet image getting cut off

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

colinsp

Colin
Joined
Sep 5, 2007
Messages
2,347
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

Thread Starter
Joined
Mar 27, 2008
Messages
91
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;
}
 

colinsp

Colin
Joined
Sep 5, 2007
Messages
2,347
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

Thread Starter
Joined
Mar 27, 2008
Messages
91
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

Colin
Joined
Sep 5, 2007
Messages
2,347
Add the code below to your css

Code:
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.
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Staff online

Top