Forum Moderators: not2easy

Message Too Old, No Replies

CSS float-drop/min-width challenge

A combined float-drop/min-width issue - help!

         

impulsenine

9:25 pm on Oct 17, 2006 (gmt 0)

10+ Year Member



Hello all.

I have yet another IE float drop challenge for you. I am aware that this comes up a lot, and I hope I'm not trying your patience by asking for help with it.

The page has 3 columns, center is fluid ('holy grail' type layout). Float drop happens when an IE user shrinks the window width to <620px, when the far right column (a PHP include called 'indexfeatures') pushes the content (a DIV called 'maintextbox') down.

What I want is that IE behave like Firefox, et al: not try to shrink content any more at a certain point, and to just add the scroll bar at the bottom.

The column layout is based on Paul O'Brien's website (link [pmob.co.uk] ) design. It's pretty heavily modified, obviously, but the core concepts are there.

The HTML and CSS file urls: removed

Currently, I have a workaround posted on the front page that uses this IE expression to define the width of 'maintextbox' using the * html hack:

width: expression(document.body.offsetWidth - 290);

My boss and I are running with that for now, but it makes the screen 'jitter' while the browser calculates the expression during a resize. Strikes us as ugly and I've been searching for a solution ever since.

I have tried the cssplay, minus-margin solution around every chunk of DIVness I can think of.

I have tried the IE expresion solution I mentioned; this is where I found it <link removed>.

And I'm stumped. If there's anything you want to know, please tell me. I throw my misery on the forums' collective brilliance and hope!

[edited by: SuzyUK at 10:08 am (utc) on Oct. 18, 2006]
[edit reason] URLs removed, per TOS [/edit]

sodani

2:54 am on Oct 18, 2006 (gmt 0)

10+ Year Member



Maybe I'm wrong in this, but if you have a doctype at the top, aren't you forcing IE to conform to standards?

swa66

9:42 am on Oct 18, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



A few things:

- Linking to your sites is frowned upon in this forum, it'll likely get edited out.

- Using hacks ... bad idea, esp. this short to the release of IE7, use conditional statements to select IE6 only and clearly know and understand each fo them, why they are there and why they are needed, just adding more hacks will only create more trouble.

- using min-width would be the right thing to do, but as you discovered IE6 doesn't do min-width. The expression thing is a non-standard extension by Microsoft, take care to hide it from the standards compliant browsers.

impulsenine

11:41 pm on Oct 18, 2006 (gmt 0)

10+ Year Member



Links were removed; sorry if I stepped on toes.

Forcing IE6 to conform to standards with doctypes - man, if it were only that easy :)

"- Using hacks ... bad idea, esp. this short to the release of IE7, use conditional statements to select IE6 only and clearly know and understand each fo them, why they are there and why they are needed, just adding more hacks will only create more trouble."

As far as hacks in light of IE7 go - I imagine 6 will be the standard browser for quite a while yet (sob!) while people update. Doesn't the "* html .class { }" statement filter out every browser but 6, or will IE7 recognize it as well?

I'm only using it right now because it seems like it's the only way to get the center content to resize in IE6 without letting the dreaded IE float drop occur. In addition to the non-standard issue, I'm doubly dissatisfied by the IE expression because the columns flicker while the statement is calculated for an instant.

It just seems that there must be a CSS-only way to do it. As I said, though, the big-margin fix doesn't work with all those floats.

If there is no way, well, I'll find a nice IE6 development team voodoo doll (there must be one made by web designers, I just know it) and move on. But if there is another way, I wish I knew it...