
My CSS-based HTML form layout looks awful 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 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: ![]() click on the image for a full-size representation
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!
Help others find this article at Del.icio.us, Digg, Netscape, Reddit, and Stumble Upon
Categorized:
HTML and CSS
(Article 3797)
Tagged: Previous: How do I fix a messed up BIOS on an XP PC? Next: What's the fastest way to sell something on eBay? Subscribe!
Never miss another useful Q&A article again! Subscribe to AskDaveTaylor with Google Reader. 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. :-( Posted by: Elliotte Rusty Harold at December 8, 2004 11:48 AMHmmm.... 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. :-) Posted by: Dave Taylor at December 8, 2004 3:59 PMThe 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. Posted by: Elliotte Rusty Harold at December 9, 2004 1:27 PMHere'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 */
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. Posted by: Dan Dean at January 24, 2005 7:38 PMThat'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. Posted by: Dave Taylor at January 24, 2005 9:16 PMYou 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. Posted by: larry p at March 11, 2005 9:57 PMI'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. Posted by: Noor at October 23, 2006 7:27 PMI'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. Posted by: Noor at October 23, 2006 9:37 PMi 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? Posted by: Jessica at January 18, 2009 6:21 PMI have a lot to say, but ...
I do have a comment, now that you mention it!
|
![]()
Search
Find just the answers you seek from among our 2000+ free tech support articles by using our Lijit search engine.
Help!
Subscribe to
Ask Dave Taylor!
Free Updates!
Sign up and get free weekly updates and special offers on books, seminars, workshops and more.
Articles and Reviews
Auctions and Online Shopping Blogs and RSS Feeds Building Web site traffic Business and Management Cell Phones and Mobile Phones CGI Scripts and Web Site Programming Computer and Internet Basics d) None of the Above HTML and CSS Industry News and Trade Shows Mac OS X Help MySpace, Facebook, Twitter and Social Network Help Pay Per Click (PPC) Search Engine Optimization Shell Script Programming Sony PSP, MP3 Players, Etc. The Writing Business Unix and Linux Help Video Game Tips and Help Windows Help
Recent Entries
Join the List!
Book Links
|