Re: Okay...CSS Assistance, please!!

David wrote:

Here's my problem. I need to

prevent the <li>'s from wrapping if the viewport is sized smaller than their
combined width.

Set min-width on the #Site-Wrapper <div>. That will take care of all
browsers apart from IE which can be catered for by the min-width
extention availbale to download from projectseven.


In addition, I need this nav to force the wrapper div open,

so that my floated "comments" div will remain right-aligned in the header
browser.

I dont follow this. The wrapper <div> is 100% so it doesnt need forcing
open?

I dont follow this. The wrapper <div> is 100% so it doesnt need forcing
open?

I figured that might be hard to follow

The wrapper is set to 100%, and the body min-width is set to 760px..so
ideally, the body should not collapse to anything smaller than 760px.
Obviously this doesn't work in IE since it doesn't interpret the min-width
property correctly (if at all).

My problem was that using the <li>'s allowed the the nav buttons to wrap to
a new line.
http://www.visiworks.com/cfweb/screenshot0.jpg

So I figured, fine, I'll try using a table, even though I was shooting for
an entirely CSS layout. So, I put the table in the Site_Navigation <div>.
So, now, my images wouldn't wrap...but the table would break out of it's
container div (Site_Navigation) even when setting it's position to relative
and display to inline.

When it broke out of it's container div, it also broke out of the wrapper
div, which allowed all the fluid elements to continue collapsing, while
generating the horizontal scrollbar at the bottom. This would leave the
body's background-image showing to the right of the comments <div> because
the wrapper was not being "held open" by the table.
http://www.visiworks.com/cfweb/screenshot1.jpg

So bascially, no matter what happens, I need for the wrapper to always be
either 100% or the width of it's longest non-wrapping child, so that when
the horizontal scrollbar is generated, scrolling right will present the same
look at 800x600 as it does at 1024x768, etc.
http://www.visiworks.com/cfweb/screenshot2.jpg

And, right about now I'm wishing he (my boss) would take the 2 damn minutes
it takes to go ahead and set the development site up on the server. !!

--
David Young
Senior Web Designer
CFWebmasters.com
david (AT) cfwebmasters (DOT) com
ICQ# 1974322
"Osgood" <notavailable (AT) atthisaddress (DOT) com> wrote

Osgood wrote:

In addition, I need this nav to force the wrapper div open,

so that my floated "comments" div will remain right-aligned in the
header
browser.


I dont follow this. The wrapper <div> is 100% so it doesnt need forcing
open?


The comment <div> looks to me as though it is right aligned already?

David wrote:

The wrapper is set to 100%, and the body min-width is set to 760px..so
ideally, the body should not collapse to anything smaller than 760px.
Obviously this doesn't work in IE since it doesn't interpret the min-width
property correctly (if at all).

Dont set the minimum-width on the body set it on the wrapper <div>.

Min-width on a wrapper <div> will work in IE if you use PVii's extention.

That will stop the <li> from wrapping to the next line and you wont have
to worry about keeping the wrapper open.

Of course you'll get a scroll bar should a user narrow the browser
viewport to below the set min-width but that unavoidable.

David wrote:

Is the PVii extension free?

Yup, its free.

On another note, did you see any issues with the CSS I posted? Is there a
more efficient way or perhaps a "better practices" way of doing this?

To be honest I didnt really look at it that closely. It worked ok in the
browsers that I tested so efficient or not the main thing is it worked.

Of course you'll get a scroll bar should a user narrow the browser
viewport to below the set min-width but that unavoidable.

Oh, I know...and that's what the boss wants. I just didn't want the top of
the site looking like it does in that second example link:
http://www.visiworks.com/cfweb/screenshot1.jpg

Min-width on a wrapper <div> will work in IE if you use PVii's extention.

Okay...I'll be sure to change that. Is the PVii extension free?

On another note, did you see any issues with the CSS I posted? Is there a
more efficient way or perhaps a "better practices" way of doing this?

Thanks,

--
David Young
Senior Web Designer
CFWebmasters.com
david (AT) cfwebmasters (DOT) com
ICQ# 1974322
"Osgood" <notavailable (AT) atthisaddress (DOT) com> wrote

David wrote:

The wrapper is set to 100%, and the body min-width is set to 760px..so
ideally, the body should not collapse to anything smaller than 760px.
Obviously this doesn't work in IE since it doesn't interpret the
min-width
property correctly (if at all).

Dont set the minimum-width on the body set it on the wrapper <div>.

Min-width on a wrapper <div> will work in IE if you use PVii's extention.

That will stop the <li> from wrapping to the next line and you wont have
to worry about keeping the wrapper open.

Of course you'll get a scroll bar should a user narrow the browser
viewport to below the set min-width but that unavoidable.

You didn't happen to look at it in Safari or Mac IE did you?

--
David Young
Senior Web Designer
CFWebmasters.com
david (AT) cfwebmasters (DOT) com
ICQ# 1974322
"Osgood" <notavailable (AT) atthisaddress (DOT) com> wrote

David wrote:

Is the PVii extension free?

Yup, its free.

On another note, did you see any issues with the CSS I posted? Is there
a
more efficient way or perhaps a "better practices" way of doing this?

To be honest I didnt really look at it that closely. It worked ok in the
browsers that I tested so efficient or not the main thing is it worked.

David wrote:

You didn't happen to look at it in Safari or Mac IE did you?

Yes. It worked ok in both once I had applied the min-width.