intertwingly

I don't have IE to hand at the moment, but have you tried setting classes on the relevant elements rather than using attribute selectors (which IE doesn't support)?  input.stretch { width: 100%; } might just do the job, if you put class="stretch" on the elements you want to stretch across the whole containing element.

This is shot in the dark but try removing the cols=40 from the textarea.

Simon: the reason I am using attribute selectors is explicitly to hide the CSS from IE.  If it sees the width, it does weird things with the textarea.

Ron, nice try.  Unfortunately it doesn't work.

> any Microsoft readers of this weblog with access to the IE dev team?

I don't know anything about CSS or have access to the IE development team. However, myself and others (http://radio.weblogs.com/0117167/2003/05/17.html#a306) have been saddened by the seeming lack of anything happening other than bug/security fixes from the IE devolpment team. I hope we will see more soon. Maybe Don or someone can pass this on or enlighten us to the current state of the team?

Ok, this looks like it is an issue with the middle box. Since I can't see your CSS I am going on the assumption that it has no fixed size and therein lies your problem. If you set the width of the middle box to say 700px the problem goes away since the reference to width:100% now has something to refer to. Obviously this is not an option. According to Eric Meyer's CSS 2.0 book this is the way it is suppose to work. The fact that the input boxes work the way you wanted is what is actually broken in IE. There might be away around this. I'll try to take a look into this a little further.

"have been saddened by the seeming lack of anything happening other than bug/security fixes from the IE devolpment team"  Here here!  I've got a list of improvements I'd like to see and IE just ain't keepin' up with the times.

Ron - my css can be found here.

Just discovered that if you type in a letter, textarea expands to left edge of window and then grab the lower right corner and resize it snaps back in place.

Sorry, Sam. This is over my head. I really am not sure this is fixable.

Ron, now you see why I chose to use attribute selectors - something that IE does not currently support.  It makes more sense to me to present IE users with a fixed width text area than a bizarre expanding and contracting one.

Hopefully when (if?) IE supports attribute selectors, they will correct this behavior.

I agree but I'm not holding my breath. Like everyone else, I do not understand what's going on with ie and futire development. I noticed that of all the MS employees blogging, I haven't seen one person from the IR team. A little strange? Maybe MS thinks that any further development of IE would be viewed as anti-competitive.

I Just said something to Sam Ruby in a comment that has caused me to stop and think. We are currently seeing all kinds of supposedly leaked information and screenshots of MS's next operating system, Longhorn. This is not due out till the end of 2004...

What's funny is that if you take the Textarea with inline style out of the comment div (also tried putting it in a table, worked), it works. Also, I just tried putting cols=100% and it also works to some degree although it is not legal markup.

Nice nice nice!

Screw IE!  People should be migrating to Mozilla anyway! :)

This is a really important issue for me.  Weblog commenting should be very easy. 

BTW... I am going to implement the CommentAPI shortly in NewsMonster and user Interwingly as a test. 

Commenting around a URL should not be hard! 

Kevin

Sam, I'm using IE6 on WinXP here. Nothing's expanding in any way, bizarre or not. Three one-line fields,name email and url, and this one large box for comment. I don't know, maybe it's a version thing, or maybe you've changed something since the problem was ocurring.

-Steven

Here's what I am running:

Microsoft Windows XP [Version 5.1.2600]

MS IE Version 6.0.2800.1106.xpsp2.021108-1929
Cipher Strength: 128 bit
Product ID:55274-005-3329155-22193
Update Versions:; SP1; Q328970; Q324929; Q810847; Q813951; Q813489; Q330994;

dflsjgk sj'dfs;p4j'dsfpjg'dfspjg 'dsf;gjl
'sdjg
dsf j
gfdslk
fdsgk
dfs;gk
f;dljkg'j'dkfl;g j;lkdfjgl; dkjlkdf/;j 'dfjg 'dfsjg
sdfj k
sdfkj
dfjkg
l;dfsjg
'sdfl;jg
dsfl;'j g
sdfljg
sdjfg
s[dfjg
[sdfjk
g

Oops... sorry about that. I was trying to see what you meant by "bizarrely expands" - but nothing happened, other than my martian post getting posted.

Sorry for littering.

Sam Ruby: "What took time was trying to find something that would work in IE. And failing that, finding something that wouldn't look like crap in IE."...

Sam Ruby: "What took time was trying to find something that would work in IE. And failing that, finding something that wouldn't look like crap in IE."...

http://realworldstyle.com/forms.html

Give it a try

chuck

Robert Scoble has responded. I guess I can't say I'm surprised by his answer. I'm sure if he were in position to give details he would. I appreciate the effort he made though. What I really wanted to hear was that MS was working on a new release...

I don't pretend that it's a good solution (after all, it's a workaround for a bug), but http://www.cherrydigital.com/~dmouse/samruby.html seems to do what you want. Also there are possibly things I've done that could be improved.
The css is at http://www.cherrydigital.com/~dmouse/samruby.css

important changes:
1) removal of the comment form anchor tag - this still needs to be fixed
2) change the left and right margin styles to be padding
3) (2) necessitates the use of another class to contain the actual centred content
4) the use of a fieldset inside the form. not sure why, but one inside the fieldset, widths seem to be applied properly again.
5) various styles on the form and fieldset to  provide the border for the "add your comment" area  .

If anyone would like to say if that solution actually works for them, that would be fine too. ;)

Phil - sorry, I've been busy.  I appreciate your effort and I will look into it more closely when I return home.  At the moment, your page doesn't quite look right in Mozilla (the dashed line is rather pale).  I also don't like the idea of deploying such a thing until I understand how it works... the fieldset "magic" bothers me a bit.

That's OK Sam, my comment wasn't really aimed at you anyway, we all know you're very busy atm.

Yes, the pale border in Mozilla was slightly strange, but a quick change to the fieldset style sorts that.

The fieldset is what actually enforces the correct width on the textarea. If you just remove the opening and closing fieldset tags, the textarea returns to its old, bad behaviour. Obviously IE is broken here.

In truth, adding the fieldset was one of the first things I did in trying to fix this problem, removing the <div class="comment">, with which you seemed to be emulating the purpose of a fieldset.

Seeing as it also provides a workaround for this particular bug, I don't see any harm in it.

The "worst" part of this solution IMO is that the new 'centre' class uses padding instead of margin to place its content.

your comments were tested again. also you have to get a discussion going here on Don Park's funky comment. by the way, thanks Sam for providing the rest of us the service of your blog comments.

Randy, Don has comments enabled.

The Future of Internet Explorer I Just said something to Sam Ruby in a comment that has caused me to stop and think. We are currently seeing all kinds of supposedly leaked information and screenshots of MS's next operating system, Longhorn. This is...

Phil,

Your links seem to be broken but, yes, fieldset fixes the expand-when-you-type behaviour! THANX a lot for pointing it out!

Now... it seems that fieldset comes with its own bug: unwanted padding between the fielset and the textarea.

I'll look into this a little closer some day... Anyway, I don't know how you addressed this (centering?) but I've discovered something strange: put a character (for example a dot) between the fielset and the textarea tags and the unwanted padding disappears! --> Looks like this is the return of the single pixel GIF spacer!! :)))

-François

PS: Sam, thanx for having brought that up :)

Workaround demos:

http://fplanque.net/2003/Articles/iecsstextarea/

OK, I was messing around with this because I love a challenge.  So this is what I came up with after messing with some examples that I'd seen that don't really seem to work very well.

<fieldset style="width: 100%; border: 0px">
<legend align="left">
<textarea name="comment" rows="12" style="width:100%">
</textarea>
</legend>
</fieldset>

It's dirty, but it works.  One thing I did notice is that <textarea> ends up being slightly less in width than the other input fields, but it's centered, so it seems like it was designed that way.

Ooops, forgot to check Opera too.  Sorry I don't have or use Netscape or others.  Can anyone else check this code?

<fieldset style="width: 100%; border: 0 black dotted;">
<legend align="left">
<textarea name="comment" rows="12" style="width:100%">
</textarea>
</legend>
</fieldset>

Hope this helped.

Francois - thanks for the pointers that linkrot strikes again!

In the meantime, my original solution now lives on http://philwilson.org/code/tests/samruby.html .

We actually came up against this at work very recently, so hurrah to Sam for giving me the chance to solve it months ago (even if it is a rubbish solution). :)

Acabo de descubrir que los estilos para un fielset no funcionan en windows xp a no ser que tengas la configuración de la apariencia en modo clásico.
- - - - - - - - - - - - - - - - - - -
I have just to discover that the styles for a fielset do not function in windows xp to be not that you have the configuración of the appearance in classical way.

Just ran into this in a page I was working on, big ups to Phil and François for the quick solution!

[link]...

The textarea width thing still happens in IE7 beta 1.

Happy days...

Hi,

I came up with something that does seem to work, but only for my purposes which is a textarea which takes up the whole screen.  I registered a resize event for the window so I could resize the height of the textarea.

<script>
function register(e)
{
var tx = document.getElementById('comment');
tx.style.height = (document.body.clientHeight - 35);
return true;
}
window.onresize = register;
</script>
<form>

<textarea id="comment" name="comment" style="{height:700px; width:100%}">
</textarea>

The -35 in the above, is because clientHieght seems to take into account perhaps
status bar, etc.

Hope this is helpful

Sam recently contacted me about this issue, to see if it was fixed in IE7.  It turns out it was an issue we hadn’t bugged yet.  We raised a bug, and I’m pleased to report that we expect the fix to show up in the public Beta 2 of IE7 (probably out in a few moths).  I’ll post back here with the location of the build that fixes it when we release.  Thanks to Sam for reporting the issue and staying with it until we could fix it!

Ah, most of the themes I have run across have it set to 100% but 98% will do it, too. It is a bug in IE that will not let you set a variable width textarea without, as the author below notes, “looking like crap”...

“we expect the fix to show up in the public Beta 2”

Screencap: [link]

I just ran into the same problem as you did...
The solution I came up with just now is still not beautiful, but it is cleaner than the <fieldset> hack suggested above. The main problem I had with the <fieldset> is that it cannot be nested in a paragraph, which was one of the elements I used for formatting. My solution is to use a table:

<table><tr><td><textarea></textarea></td></tr></table>

Then use your style-sheet to set everything (table, td, textarea) to 100% width and all borders, margins and paddings to 0.

Hope this helps...

  Markus

I think this one works best:
<style>
textarea
{font-family: MS Sans Serif; font-size:10pt; margin-left:0px; width:100%}
</style>

By adding the style, which can be in the body or in a style-sheet the textarea grows with the screen.

Ricardo

Hmm. I’m using WinXP and IE7 and nothing seems to be happening to any textboxes when I type any characters (and I am talking about the checkboxes in your snapshot, not the ones I am using to post this text).

I was also having expanding IE textarea problems but none of the above fixes worked - my textarea was inside a <dl> which may be why.

Anyway eventually I have found a fix that worked for me so hopefully this is of use to others: enclose the <textarea> in a <fieldset> with borders set to zero AND a <div> as well. So you end up with:

<fieldset style="border: 0;"><div><textarea style="width: 100%;" ... ></textarea></div></fieldset>

I just had this problem, and found that a span works as well as a fieldset for the workaround. I surrounded my textarea with a <span style="width: 100%">, and that did the trick. Not sure if it’ll work for anyone else.