SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Small Sucker-Fish menu problem

    Hi there

    I have this annoying problem where the uppermost level of my suckerfish nav bar will only accommodate a cetain amount of characters before moving onto the next line, thus increasing my menu's height. This is really annoying because I'm pretty certain each nav item's space is wide enough to accommodate the text I wish to have written in it.

    Allow me to illustrate:

    I have seven menu items as can be seen in this link. As you can see, the word "Latest" fits into its space.

    However, when I add the word "News" to this, I get this. I've tried everything to increase the size of the available space to house my text. I don't know if it's a margin issue or a padding issue.

    How can I enable my nav bar to house the text I wish? I just do not know where abouts in the CSS to tweak. Anyone's help would be greatly appreciated.

    Here is my Navbar's CSS code:

    Code:
    #nav, #nav ul {
    	float: left;
    	width: 64em;
    	list-style: none;
    	line-height: 1;
    	background: #F7CF87;
    	padding: 0;
    	border: solid #eda;
    	border-width: 1px 0;
    	margin: 0 0 0 0;
    	z-index: 2;
    }
    
    
    
    
    #nav a {
    	display: block;
    	width: 10em;
    	w\idth: 6em;
    	color: #000000;
    	text-decoration: none;
    	padding: 0.25em 2em;
    }
    
    
    
    
    #nav a.arrow {
    	background: url(arrow.gif) center right no-repeat;
    }
    
    
    
    
    
    #nav li {
    	float: left;
    	padding: 0;
    	width: 10.34em;
    	font: normal 11px geneva, verdana, sans-serif;
    	color: #000000;
    	background: #F7CF87;
    	height: 18px;
    }
    
    
    
    
    #nav li ul {
    	position: absolute;
    	left: -999em;
    	height: auto;
    	width: 14.4em;
    	w\idth: 13.9em;
    	font-weight: normal;
    	border-width: 0.25em;
    	margin: 0;
    }
    
    
    
    
    
    #nav li li {
    	padding-right: 1em;
    	width: 13em
    }
    
    
    
    
    
    #nav li ul a {
    	width: 13em;
    	w\idth: 9em;
    }
    
    
    
    
    
    #nav li ul ul {
    	margin: -1.75em 0 0 14em;
    }
    
    
    
    
    
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    	left: -999em;
    }
    
    
    
    
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    	left: auto;
    }
    
    
    
    
    
    #nav li:hover, #nav li.sfhover {
    	background: #E3E1FF;
    }
    
    
    
    
    #nav	{
    	border-top: solid 1px #FF0000;
    	border-bottom: solid 1px #FF0000;
    	}


    Kindest Regards

    Frank

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try removing the width from #nav a and reducing the amount of left and right padding. If you need to create space between the list items, use the list items' width or margins instead.
    You also seem to be overusing the \ hack on the widths of different things and I can't really see why you'd need to.

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2006
    Location
    Florida
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    #nav a {
    	display: block;
    	min-width: 10em;
    	w\idth: 6em;
    	color: #000000;
    	text-decoration: none;
    	padding: 0.25em 2em;
    }
    does that work?

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    Try removing the width from #nav a and reducing the amount of left and right padding. If you need to create space between the list items, use the list items' width or margins instead.
    You also seem to be overusing the \ hack on the widths of different things and I can't really see why you'd need to.
    Thanks Tyssen.

    What you suggested worked fine.


    Quote Originally Posted by stridox

    does that work?
    Hi stridox

    It did work in Mozilla but not in IE6. Thank you for pointing me in the right direction though. Much apprecieated.


    Thank you both again.

    Frank


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •