1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

css menu bullet image getting cut off

Discussion in 'Web Design & Development' started by stargirl23, Nov 1, 2011.

Thread Status:
Not open for further replies.
Advertisement
  1. stargirl23

    stargirl23 Thread Starter

    Joined:
    Mar 27, 2008
    Messages:
    91
  2. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,300
    First Name:
    Colin
    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.
     
  3. stargirl23

    stargirl23 Thread Starter

    Joined:
    Mar 27, 2008
    Messages:
    91
    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;
    }
     
  4. stargirl23

    stargirl23 Thread Starter

    Joined:
    Mar 27, 2008
    Messages:
    91
    also it looks like the bullet is too low, not centered with the text.
     
  5. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,300
    First Name:
    Colin
    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.
     
  6. stargirl23

    stargirl23 Thread Starter

    Joined:
    Mar 27, 2008
    Messages:
    91
    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?
     
  7. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,300
    First Name:
    Colin
    Add the code below to your css

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

    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.
     
  8. Sponsor

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 733,556 other people just like you!

Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1024952

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice