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!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help
right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
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. :-(