Creating form layouts using CSS | August 19, 2003

A while ago I read an article at A List Apart about creating form layouts using CSS that you would normally use tables for. It was a great little article, but I could never quite get it to work.

I was trying to lay out a form today using this method, but it kept breaking in IE 5.x on Mac. Basically it displayed fine on all other browsers, but on IE5 Mac each subsequent row was being indented slightly.

Here is an example of what was going on.

I tried playing around with clear div's (see previous post). I added a clear div inside each row to make sure the row actually took up space. Then I added a clear div after each row and for some reason this fixed the problem.

I'm not sure exactly what was going on here, and I really don't like the fact that the form is now stuffed full of nasty clear div's. However it works in IE5 on Mac which is one thing. If anybody knows a better way of getting it to work, please let me know.

Posted at August 19, 2003 10:13 PM

Comments

gas said on August 19, 2003 10:32 PM

I’ve been reading your posts on all these css problems and agree totally with you that it’s sometimes a pain in the butt.

It’s frustrating because structurally you KNOW you’re doing all “right”, but still it doesn’t work.

Anyway, your solutions to these problems are very cool, and until browser render CSS without these sort of small bugs, we’ll still have to use hacks.

OT
BTW, i’m still looking for a way to embed flash in Xhtml without having to risk some people not seeing the .swf with the Flash Satay method.

Alannie said on August 19, 2003 11:29 PM

I’m not sure if this is even relevant, but is there a reason that the float and width properties are being applied to inline elements (span) rather than block-level (div)?

Andy Budd said on August 20, 2003 12:59 PM

In reguards to using spans instead of block level elements, the only reasosn I’m doing this is becasuue that’s how they did it in the ala article I mentioned. I did try it out with div’s instead and it worked fine so will probably use block level elements in the future.

CyberZorn said on August 20, 2003 5:03 PM

I’d look into this page. It helped me solve some layout issues I was having in IE5/Mac:

http://developer.apple.com/internet/css/ie5cssbugs.html

Andy Smith said on August 21, 2003 9:44 AM

Re floating spans versus divs: I think it’s better the way you’re doing it at the moment. In a browser that doesn’t understand CSS, if you put the inputs in spans they’ll appear on the same line as the label, so it’ll look roughly like the CSS layout. But if the inputs are in divs they’ll appear below the labels, which isn’t too bad but it’s probably less clear than having them in rows, and a bit wasteful of vertical space.

According to the CSS2 spec there’s nothing wrong with floating elements that would normally be inline-level, but they change to block rather than inline boxes.

Alannie said on August 21, 2003 3:53 PM

I seem to have stumbled upon a solution. I think it’s something to do with the IEMac5 whitespace bug. I did a reformat of the HTML text using BBEdit’s “Gentle Hierarchical” automatic formatting option, and it suddenly worked. Here’s the URL: http://tinyurl.com/kq8r

Hey, how do I get HTML tags to work in this commenting thing? Previewing seems to strip them. :-)

Alannie said on August 21, 2003 4:18 PM

Andy Smith - great reason to use span’s. Thanks for explaining. Should they be styled as display:block, since widths, AFAIK, aren’t supposed to be applied to inline elements?

Andy Smith said on August 21, 2003 8:05 PM

Alannie - should floated spans be styled as display: block? From my reading of the CSS2 spec it shouldn’t be necessary, but it wouldn’t hurt either. When an element is floated it should automatically display like a block-level element but I guess there might be browsers that don’t do this properly, so putting in display: block would help there. And it might also help remind you that it’ll be displayed as a block-level element.

wilson said on August 21, 2003 8:06 PM

why use spans at all? just wrap the whole section of the form in a fieldset with a class that identifies it and style the label and input tags. no need for the row wrappers either, if you’re putting clearing objects after every row anyway.

example: http://wilsonminer.com/shrapnel/yay/formtest.html

Andy Budd said on August 22, 2003 12:08 AM

Hi Alannie,

The problem in IE5 on Mac definitely seems to be a whitespace problem. However it seems to be a different whitespace problem to the ones I’ve found documented.

http://www.macedition.com/cb/ie5macbugs/substringbug.html

I did some more testing and it seems that the original method works if you have a single space between the closing span and the closing div.

Very strange.

Egor Kloos said on August 27, 2003 5:19 PM

I’ve jump over from the Evolt elist where this is also an issue. I’ve had a look at the problem and I’ve come up with this solution. It’s clearly based on Eric Meyers code but I saw that it could be much shorter. Semantically I think it could be better (I’m using instead of ) but it works in most browsers. NN4 loses the textarea.

http://www.dutchcelt.nl/test/formtest.html