#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    1
    Rep Power
    0

    Text wrapping in son of suckerfish drop menu


    hey guys,

    im not the greatest with css and html but i do it for fun to try and teach myself.

    Anyways I have a css drop menu set up on my site and I am having a problem with the width sizes in the actual drop down.

    The text length is of various sizes in the drop down. (some are long single words, some are 2 words etc)

    and I am using a width size of 11em which in all browsers using a standard screen res shows up fine. but if somebody uses a smaller screen res the text starts wrapping. Where you get the 2 word lines split into 2 lines. and then If i increase the size sometimes I get separate <li>'s on the same line. Its pretty frustrating.

    What I want to do is be able to increase the width size of the drop menu and even have all kinds of extra padding on the right if I want but without <li>'s spilling onto the next line or without <li>'s sitting on the same line cause its too big.

    Here is my CSS for the drop.

    Code:
    #nav li ul {
    	background: #FCDFFF;
    	background-image: url('images/background.png');
    	border-style: ridge;
    	border-width: 5px;
    	border-color: #000000;
            margin-top: 0px;
    	position: absolute;
    	font-size: 95%;
    	width: 11em;
    	left: -999em;
    	line-height: 2;
    	z-index: 999;
    }

    anybody know how I can do what Im looking for?

    Thanks in advance!
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Location
    Atlanta, GA, USA
    Posts
    14
    Rep Power
    0

    Two suggestions


    Two suggestions

    1 - try a nowrap solution

    2 - be a pixel pusher and match the width to the font size. be sure to check your padding!

IMN logo majestic logo threadwatch logo seochat tools logo