CSS white-space: nowrap; doesnt work in firefox (second post)

I've already posted this issue once but the people helping stopped responding. Hope I'm not doing anything that will get me banned by posting it again. I just really need help with this.

First off, this is not a site for everyone to see, its just for my clients, so there's no need to accommodate for accessibility issues. This is just a way to show clients their work before it goes to production. It’s always temporary, and sometimes there's a requirement for 20-30-100 buttons. Most often there are no categories to break this stuff into and to do that would just add unnecessary clicks anyway. It’s actually quite flexible and serves its purpose very well from a usability standpoint and a maintenace standpoint (its really easy to re-use this code a million times). The client loads the frame page, clicks the links, scrolls sideways to see more if there are more... and Bob’s yer uncle!

Just this one issue with firefox and it will be perfect!

The issue is, in ie, the buttons stay in a single row, and so a sideways scrollbar is generated: (see it in action here)
http://kijiji.visiblemedia.com/proofs/

But in firefox, the buttons wrap to multiple lines instead of generating the scrollbar.

All pages are valid and all pages use a proper DOCTYPE (including the frameset itself)
http://kijiji.visiblemedia.com/proofs/index.htm (frame page)
http://kijiji.visiblemedia.com/proofs/top.htm (top frame)
http://kijiji.visiblemedia.com/proofs/nav.htm (bottom frame)

All I'm interested in is having the bottom frame generate a srollbar if required in firefox. Hope someone can find it in thier heart to help me make this happen.

THANKS!

PS, here's the first post:
http://forums.digitalpoint.com/showthread.php?t=606211

 

why not just make it a vertical list, seems your making it harder than it needs to be.

 

Because simetimes the buttons are really long, and the graphics are really wide, if I put the buttons verticaly then the art would have to scroll sideways. thats much less desireable.

All I need is to stop the buttons from wrapping in firefox, and instead work the same way ie does and show a sideways scrolbar. SURLEY theres a way. Can someone help me find this solution? I'm not looking for a new layout, just want to force the bottons to stop wrapping at the browser.

Please help, thanks.

 

Hey,

Not sure if you finally got this working, but, since this post has rather high rank on google search I will post a solution to this.

You can use <div style="white-space:nowrap"> content </div>
This should solve the problem in FF.

HTH
Cata

 

Tell us if it's fine now.

 

Honestly, what this is is an application. It's for clients, and it does stuff browsers likely shouldn't do.

white-space: nowrap works in FF, but that's apparently for individual text parts (which are grouped in "anonymous boxes" when sitting inside an element). It would not force a bunch of blocks or non-text inlines to not wrap.

The page would have to have a width set. FF wraps because it thinks the width of the browser is the width of the page. Giving the ul a width like 30000px or something would tell FF and other browsers to make the horizontall scrollbar, because it sees then an explicit width.

There may be a better way to do it, but that's what I'd use if I was forced to deal with an application like this.

A better idea, though, would be to make an actual program that runs like a web application. Who knows what new browser will come on the market and puke on this?

 

In #menu li a, remove the float and display properties. If you have compelling reason to keep the anchors block level, you'll need to make the list items inline-block. See my inline-block demo for an example that you could adapt.

//edit: Just noticed this is eight months old … Sheesh. If the OP tunes in, DTDs need to be complete, including the URI to trigger standards mode, else x-browser compat is a nightmare.

cheers,

gary

@ Stomme poes: Go ahead and use some inline-block; it's not that hard.

 

So it's just another possibility besides floats? Makes blocks sit inline?

Yeah, it's just something I need to sit down and do.

 

Absolutely! Inline elements have a quite different behavior from block elements and floats.

It's a Good Thing® that you see the need.

cheers,

gary

 

Now that I've d/l'd FF3 (gawd I hate it) on teh WIndows machine at work (and spent a good amount of time trying to have 2 FF's on a single machine), I can do more inline-block testing.
Although for some reason the Windows machine doesn't have the problems with FF3 that I have on Ubuntu-- in Windows when there's FF2 also installed I get to keep my dynamic window resizing (essential for testing where my floats are at any window size) whereas in Ubuntu I get this nasty useless blue box and don't get to see the new positions until I let up on the mouse. :\ Also, Windows doesn't have the awful red :focus either.

So now I have no excuses not to use it. : )