Dave, I’ve started a new web site that uses web standards throughout, including CSS layout instead of tables, even for forms. Works great in Mozilla, Firefox, Safari, IE 5 for Mac, etc. Guess what the problem is? Yep, it’s Internet Explorer for Windows. The form looks like absolute garbage on IE 5.5 and IE 6 for Windows. Any ideas how I can fix this to use CSS layout for forms, even with IE?
Some variant of “how do I get my pages to look the same on all browsers” is such a common problem that when I teach Web classes or offer workshops on HTML and Cascading Style Sheets, I’ll write a mantra for the class on the board when we start: “How a page renders is up to the browser, not the developer!”
In a nutshell, what works for one Web browser often doesn’t work properly on another, as you’re learning. I’ve looked at your Web site with a variety of browsers, and can see what you’re talking about in terms of form elements being unaligned. For example:
Digging into your page, your form elements look like this: <input type=”text” id=”email” name=”email” size=”60″ value=””/> so I need to move into your CSS sheet to see how the id “email” is defined. It’s not, as far as I can see, but the element immediately before the input element on the page is <label for=”email”>E-mail:</label> and that does have a CSS style definition:
textarea, label, input { display: block; width: 80%; float: left; margin-bottom: 1ex; } input[type="submit"] { width: auto } label { text-align: right; width: 5em; padding-right: 20px; }
Now we’re getting somewhere! You’re using the label container to detail the width (5em, or em-spaces) so that all elements with labels will force the same width container and therefore cause everything to line up.
I’m betting that the problem is that the IE document object model, the DOM, doesn’t allow block-type modifiers like “width” within a label container. Here’s how I’d try to fix things:
<span class="fixedwidth"> <label for="email">E-mail:</label> </span> <input type="text" id="email" name="email" size="60" value=""/>
You’d also need to define the class “fixedwidth” for this to work, obviously.
I commonly see misapplied CSS attributes in the a tag, actually, and often wrapping an a href with a span quickly solves any unapplied CSS attribute problems.
Oh, one tiny niggle while we’re looking at your code: the trailing /> is good XHTML form, but you need a space immediately before the slash for it to be valid. Instead of … value=””/> it should more correctly be … value=”” />. Otherwise, Elliotte, your The Cafes site looks great and the underlying CSS is certainly most educational to read!
Anyway, try the changes and let me know if that fixes the problem in IE!
hello my name is don , and i have a problem with my form showing up as a long list instead of two columns. I used css to create the two columns but when i use it on my website it shows up as a list here is my website (http://www.pittsburghspikes.com/index.php/prospective-players) … sorry if i am not following the topic but i didnt know where to start my own and if anybody would answer me
Dear Dev,
My CSS-based HTML form layout looks awful in Internet Explorer?
This really help me.I always remember u in my prayers.Thanx
With Rgards
Usman Rehman
I am having trouble in keeping a select and text field in line in IE, though it works fine in Firefox. Any tips that help me tide over this problem are most welcome?
i have a similiar problem and my layout that i created for work will work fine in all browsers but the IE.. i am not sure what to do or why it does this.. and I read above what you have commented but is that the coding only for making the forms?
I’m not much of a web designer and am horrible with code, but I am a traditional print designer. I’m working on my website in Dreamweaver MX 2004 for OSX. Everything seems to be okay when viewed on a Mac, however when viewed on IE for PC all the txt is alligned center instead of flush left. Any suggestions? Again I apolgoze, I am not much of a coder.
I’m not much of a web designer and am horrible with code, but I am a traditional print designer. I’m working on my website in Dreamweaver MX 2004 for OSX. Everything seems to be okay when viewed on a Mac, however when viewed on IE for PC all the txt is alligned center instead of flush left. Any suggestions? Again I apolgoze, I am not much of a coder.
You can find a write up of this technique at http://www.quirksmode.org/css/forms.html
Three caveats:
1. it won’t work in IE 5 (and presumably below) [fine, of course in Opera and Firefox/Mozilla]
2. you must remember *not* to wrap your labels around their associated inputs [which I, at least, was taught to do in HTML 101]
3. In a practical case, where you might have two columns, say a nav column floated to the left and then fluid a main content column, which contains your form elements, in the center of the rest of the page, you need to wrap the form elements inside their own float container (a fieldset would work). If you don’t do that, all the rest of the form elements will drop down below the floated navigation bar after the first clearing line break.
That’s a very interesting solution, Dan. Thanks for sharing it. Can you also share the URL of the actual Web page that includes this form? Thanks.
Here’s how I do mine, and it works pretty well. I came across this technique on someone elses site, so I can’t take the credit. ( I think it was quirksmode.org?) Anyways, here’s the code:
/* CSS */
.form label, .form input, .form textarea, .form select, .form .form_text {
display:block;
float:left;
margin-bottom:5px;
}
/* the .form_group class allows you to put multiple form items in a single div, as if it were a row. */
.form .form_group select, .form .form_group .form_text, .form .form_group input {
margin-right:5px;
}
.form label {
text-align:right;
width:100px;
margin-right:15px;
}
/* this little line of code here is essential, it makes everything work. */
.form br {
clear:both;
}
[!– HTML –]
[!– I’ve changed all tag brackets because the HTML markup wouldn’t show up on the page –]
[div class=”form”]
[label for="userName"]User Name:[/label]
[br /]
[input name=”userName” id=”userName” type=”Text” required=”Yes” message=”User Name Is A Required Field” size=”30″ maxlength=”20″]
[br /]
[br /]
[label for="password"]Password:[/label]
[br /]
[input name=”password” id=”password” type=”Password” required=”Yes” message=”Password Is A Required Field” size=”30″ maxlength=”20″]
[br /]
[label for="submit_btn"][/label]
[br /]
[div class=”form_group”]
[input type=”Submit” value=”Continue” name=”submit_btn” id=”submit_btn”]
[input type=”Button” value=”Home” onclick=”Javascript:window.location=’index.html'”]
[/div]
[/div]
Basically what this does is floats all form labels on the left, but text aligns them right. Then, all of the form elements are floated left, so the scoot over to the edge of the labels. This works because all of the labels are given a predifined width, so everything is nicely aligned. Making the line breaks clear:both is essential in that, since floats don’t automatically clear, the next form element is forced to position itself on the next available row of space.
Hope this helps.
The Web Accessibility Guidelines at http://www.w3.org/TR/WAI-WEBCONTENT/#gl-table-markup are quite clear that table markup should be reserved for genuine tables, not for layout. I know I could go back to tables; but, damn it, this should be possible.
Hmmm…. well, I would say that sometimes a table is a better choice than forcing everything into CSS (I think about “if you have a hammer, everything looks like a nail”). The forms on my Web sites are built around tables for layout… last I checked, the CSS standard didn’t deprecate everything in the world of HTML, so I think it’s still legal and legit to use tables for this sort of thing, Elliotte. 🙂
Good idea. Putting everything in spans instead of styling the form elements directly allowed me to fix the overly large preview button in Internet Explorer. However, it didn’t fix anything else, and it misaligned the textarea and made the form fields start slipping under the menu bar again for small browser widths, even in Mozilla. I tried divs instead of spans. No luck there either. 🙁
How do I fix my CSS form so it looks good in Internet Explorer?
Dave, I’ve started a new web site that uses web standards throughout, including CSS layout instead of tables, even for forms. Works great in Mozilla, Firefox, Safari, IE 5 for Mac, etc. Guess what the problem is? Yep, it’s Internet…