I have an issue that I am wondering if there is a solution for. Here's the scenario:
I am working on a hybrid (tableless where possible without spending a week on figuring it out) 1024 minimum width page. It flows but minimum is 1024. Am trying to use least amount of tables as possible, again without taking a week to figure it out.
In the header area i have: on left side-company logo, then a tab navigation area. The combined logo and tab area width comes to right around 968, which is the "safe" size we're going with for the 1024 display spec. FYI, not sure this is pertinent but the tabs in this design are LI elements that are displayed inline. There are several DIVs inside each LI to form the tab ends, etc.
In order to get this tab nav to display correctly in the browsers speced for this job, I've had to declare a width for the DIV surrounding the tabs. If I didn't do this, some browsers would stack the tabs even though they are set to display:inline - i think it's IE that demands a width be set - I'm sure it's at least the dreaded IE5Mac cuz I just checked.
Anyway, it's all fine and dandy with 7 tabs, as long as I force a width, except I need to allow for more tabs to possibly be added by the client. Currently when even one tab is added, that 8th tab falls down into the next row instead of displaying beside the 7th tab because of the width I've declared on the surounding DIV. This is as I expect.
Here's the issue... if I force the tab nav DIV to always be wide enough to allow for a couple more tabs, there will always be a scrollbar at the bottom of the page if the viewer doesn't have window open that wide. If I do not use a width, IE will stack all the tabs even though they are declared display:inline.
I know it's darn tough but can anyone offer ideas without seeing my HTML and CSS? I'll have to retool a bunch of stuff if I need to make public the CSS and HTML of this project.
What I'm wondering mainly is, is there some CSS thing I've overlooked that would help me take any tabs that might fall below and force them to show instead to the right of the DIV, without making that DIV always be forced to be declared a longer width. Can overflow or clip help here? Can I take an element's overflow and move it? I'm just not sure if there's something simple I am overlooking.
One caveat is that this is a real-world project, not a personal one. It will be browser tested and validated and I will have to make it work in MANY browsers... heheh....