Suckerfish without float: left?

Day
avatar
rank Enthusiast

Enthusiast


Posts: 103
Joined: 2005-10-07
Location: Texas

Posted: Wed, 2005-10-26 21:37

I've been fighting with a horizontal menu with vertical drop-downs for a while now, but most recently in this thread.

The method I'd devised (with the help and advice of others, to be certain) wasn't working how I felt it should, so I turned to Suckerfish. Or, more properly, the Son of Suckerfish.

I have a test page up. You might also like to look at the css.

So far it works fine in all browsers I can test with (IE/Win, FF, Opera, Safari). The problem is, it doesn't look like I'd like it to. In the end, I'd like it to look like the one on the larger project page. I feel sure I can work out the borders and colors fine later, but my concern is the float: left.

All the cross-browser compatible drop-downs I've seen use float: left for the "parent" <li>s and a set width. However, I'd like to just give them some horizontal padding to keep them from touching and then center them. This way a really long menu item can take up as much space as it needs and a really short one will only take up as much space as it needs.

The problem with this is, it seems that without the float: left (that is to say with the "parent" <li>s display: inline), Safari and Opera both freak out. Does anyone know how to work around this, or am I destined to have my menu items the same width and hanging out on the left?

->Day<-

Eeeeeh. What's up, DOCTYPE?

Tyssen
Tyssen's picture
rank Moderator

Moderator


Posts: 7033
Joined: 2004-05-01
Location: Brisbane

Suckerfish without float: left?

Posted: Wed, 2005-10-26 22:04

You can assign your <li>s different IDs and then apply different widths to those.

How to get help
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use tags.
My articles | CSS Reference

Day
Day's picture
rank Enthusiast

Enthusiast


Posts: 103
Joined: 2005-10-07
Location: Texas

Suckerfish without float: left?

Posted: Wed, 2005-10-26 22:40

Point. However, that would mean, if we added a new menu item, we'd have to edit the HTML and the CSS both. I think we'd rather have the menu on the left.

->Day<-

Eeeeeh. What's up, DOCTYPE?

Day
Day's picture
rank Enthusiast

Enthusiast


Posts: 103
Joined: 2005-10-07
Location: Texas

Suckerfish without float: left?

Posted: Wed, 2005-10-26 23:04

I made them variable width (and did some other styling) and it works out, still, in all broswers mentioned above except IE (just some formatting, I think).

It's still not centered, which I'd like, but isn't imperative.

However, I have a new and interesting problem. I probably have abused position: absolute or something, because the way I have things doesn't feel right. In order to get a 5px top and bottom spacing of the appropriate color, I had to set a height for the nav <div> as well as the <ul>. Then I give the spacing to the nav <div>. However, this means that if someone raises their text size enough that the menu wraps, the BG color doesn't join it and things begin to get a little freaky. THere has to be a better way to do this, neh? Some way to make my containers right?

->Day<-

Eeeeeh. What's up, DOCTYPE?

Chris..S
Chris..S's picture
rank Moderator

Moderator


Posts: 6005
Joined: 2005-02-22

Suckerfish without float: left?

Posted: Thu, 2005-10-27 01:08

There is. A dropdown menu will always look messy over two lines, but it can look less messy.

To go down the inline way.

#nav
{
	padding: 0;
	margin: 0;
	width: 700px;
	background-color: #AAAAAA;
	border: solid 5px #F0F0F0;
	border-width: 5px 0;
}

#nav ul
{
	padding: 0;
	margin: 0;
	width: 700px;
	list-style: none;
}

#nav li
{
	position: relative;
        display: inline;
}

#nav li.active ul
{
	position: absolute;
	z-index: 100;
	height: auto;
	width: 8em;
	left: -999em;
        top: 1.2em;
	background-color: #AAAAAA;
	border-top: solid 3px #666666;
}

#nav li.active:hover ul, #nav li.sfhover ul { left: auto; }

#nav a
{
	font-weight: bold;
	padding: 0 1em;
	height: 1.2em;
}

To go down the float route, keep what you have now. Remove the position absolutes from the out ul & li. Put overflow:hidden on the ul.

On Having Layout | The One True Layout | menus by listamatic

Day
Day's picture
rank Enthusiast

Enthusiast


Posts: 103
Joined: 2005-10-07
Location: Texas

Suckerfish without float: left?

Posted: Thu, 2005-10-27 03:57

Chris..S wrote:
To go down the float route, keep what you have now. Remove the position absolutes from the out ul & li. Put overflow:hidden on the ul.

Your inline suggestion is, more or less, what I had before, I think, and it still makes Opera and Safari freak out inexplicably. Something about floating them left makes those browsers happy. I think I'm gonna be stuck with that.

As for display: hidden... all that does is hide whatever flows over. It makes it look cleaner, but it hides the fact that you're breaking my web site. Eye-wink Also, it hides the bottom borders on the parent list.

I'm beginning to think that there's not way to make it so that it will flow over well and still retain spacing on it... I think I could do it if I didn't have/want to have that spacing...

->Day<-

Eeeeeh. What's up, DOCTYPE?

Day
Day's picture
rank Enthusiast

Enthusiast


Posts: 103
Joined: 2005-10-07
Location: Texas

Suckerfish without float: left?

Posted: Thu, 2005-10-27 04:04

Bah! I posted rashly. I could make it wrap if #nav were still actually containing the <li>s. However, since they're floated left, they're out of the normal document flow, so #nav feels no need to be big enough to contain the links, or to push things away from it's edges. What I've done, basically, is kludge it, but, because it's a kludge, it breaks under too much scrutiny. Does anyone know of a way to make #nav actually hold the floated <li>s?

->Day<-

Eeeeeh. What's up, DOCTYPE?

Chris..S
Chris..S's picture
rank Moderator

Moderator


Posts: 6005
Joined: 2005-02-22

Suckerfish without float: left?

Posted: Thu, 2005-10-27 10:01

I said overflow:hidden. What overflow:hidden does is force the element to expand to contain any floats, when height is auto. What I didn't mention was you need to remove the heights from #nav, the outer ul and the first level li. Sorry about that.

Can you explain what you mean by Opera freaking out. I don't see any reason for Opera to freak with those styles. You do need to use left:0; (rather than left:auto) in your submenu ul styles.

On Having Layout | The One True Layout | menus by listamatic

Day
Day's picture
rank Enthusiast

Enthusiast


Posts: 103
Joined: 2005-10-07
Location: Texas

Suckerfish without float: left?

Posted: Thu, 2005-10-27 18:24

Chris..S wrote:
I said overflow:hidden. What overflow:hidden does is force the element to expand to contain any floats, when height is auto. What I didn't mention was you need to remove the heights from #nav, the outer ul and the first level li. Sorry about that.

Bah! Yes. I think that, when I read your post, I thought and take out the heights, since that's the point, but then I forgot when I was actually implementing it. Thanks. Working beautifully now.

Chris..S wrote:
Can you explain what you mean by Opera freaking out. I don't see any reason for Opera to freak with those styles. You do need to use left:0; (rather than left:auto) in your submenu ul styles.

It might be that I used left:auto, rather than left:0, but Opera makes them show up on the left of the menu. All the way left.

Safari's problem is actually much more severe. It won't display anything larger than what it's already displaying except way on the left for a bit. So it displays about half of the "shows" menu and just the top three pixels of the "help out" menu. Very odd.

->Day<-

Eeeeeh. What's up, DOCTYPE?