November 22, 2004

We Are All Made Of Stars

So life has been keeping me busy and away from all things Ruthsarian.

It seems while I was away, some ad bot has found a way around the scode plugin. Great. Although they seem to all be comming from the same C block, 165.21.154.. So maybe a mass-block of those IPs will be a suitable patch, at least for now.

While I was going over the backlog of e-mail I've let pile up, I got an e-mail from Jerry who is using forms inside a skidoo layout. The problem was that with rows set to 75, anyone with a resolution less than 1024x768 running IE would have the content of the middle column pushed down below the left and right columns.

This isn't the first time I've had a question along these lines. In fact it's probably the #1 issue people have with the layout. IE seems to handle overflowing elements quite a bit differently than other browsers such as FireFox or Opera. And telling your users to switch browsers isn't exactly doable, given that IE still sits on about an 80% market share.

So what can be done to fix this?

No quick fix (yet) but one that, for this particular case, can work well is to add the following CSS to the layout:

.ieTextAreaFix { width: 100%; margin: 0 -2px; padding: 0; border-width: 2px; }

Then set the class attribute for the textareas in question to ieTextAreaFix. What this bit of CSS does is override the cols attribute of the textarea and sets that element's width to 100% the width of its parent object. Doing just that alone won't work under IE. 100% triggers and odd bug, almost as if IE is correctly handling the box model (100% + padding + border + margin = final width ... this is the correct approach. IE usually does N width + padding + border + margin = 100%)

Anyways. This resolves the issue, at least under IE6, for textareas. Modifying this approach as you can may help resolve similar issues.

One other approach that seems to work with more than just text input fields is to set a negative right-margin value, something like -99%, and then apply an insanely large z-index, like 999, and that should get things working as well. You may have to also apply some form of the holly hack, usually setting position to relative works, and you should be good to go.

I hope that helps.

If anyone has any other approaches to this issue, I'd love to hear about it, either via e-mail or through a post here on the site.

Posted by Ruthsarian at 01:45 PM | Comments (5)

Comments

I had to put a 100% height to the inside class so that the borders function with IE6. With this : .inside { height: 100%; } That displays border correctly #rightColumn h3 { color: #888; border-bottom: 2px dotted #888; } Posted by: Michel at November 24, 2004 03:08 AM
And to avoid overflows of the middle column, I'm using : input, textarea, select { width: auto !important; } Posted by: Michel at November 24, 2004 03:11 AM
I'm redesigning my site http://www.ImportRival.com/skidoo.php. I am using the 3 column fluid layout. When I view through Netscape 6, the columns are fine. When I view through Internet Explorer 5, all columns are fine, as long as I use TEXT in them. However, when I use the photolog (weblog) tag in the 3rd column, instead of text, the 2nd column content get pushed down. Would the author's fix apply to me? Posted by: importrival at December 6, 2004 10:27 PM
My form elements were causing IE to drop the main content below the left and right columns (like everyone else, I guess). I used this fix on a span tag that wraps my content in the main column. ... #lblContent { display: block; <-- Notice this width: 100%; margin: 0 -2px; padding: 0; border-width: 2px; } I had to add the display: block; for it to work. Everything is fine now. Posted by: Aaron at January 6, 2005 04:37 PM
importrival, have you tried using an &nbsp; to place a blank piece of text in there? Posted by: Joe at February 11, 2005 04:22 PM

Post a comment










Code:
Type Code:

Remember personal info?