Browser-compatibility with IE 7 and below

Question

Surely there is an easier way of doing this. The IE comment tags were the only way I could make the page look right in IE 7 and below.

EDIT: I'm not too sure why this got down-voted. It's a legitimate question. If anyone should get down-voted, it's those who have discussed this as of now. Nobody is answering the question. They are either too vague or telling me what not to do. I already know that. That is why I am asking what the better way is.

• Arjen: Can you explain what goes wrong without the table and browser conditionals? Have you done this to make the form float right?
• Xand94: give a separate style-sheet for ie7 and just restyle the divs specifically for it?
• Richard H: You can do this without tables in ie7. float:left; text-align: left etc. But if you're gonna use tables may as well use tables for all browsers
• thirtydot: IE7 doesn't support display: table and friends, so you're stuck with ugly workarounds if you want to use that. Fortunately, I don't see why you need to use display: table to create that layout, so you should just be able to remake it using techniques that IE7 supports. Would HTML/CSS doing that be a good answer?
• Tyler Crompton: @Terr, None of the divs are inline if I remove it all. @thirtydot, If I remove display: table; from the form then the contents of the form will not be vertically centered.

Answer 1

You shouldn't need to use an html table just to get IE7 working, and in fact you shouldn't use them at all if you're not intending to display tabular data.

Instead of all those messy conditions, just use one immediately after your stylesheet import to add an IE specific stylesheet.

Consider creating another container for your form, and instead of trying to make the form display as table use positioning to place your new container in the corner instead. This is more likely to translate well into older versions of IE, and so your IE specific styles will only be needed to correct minor box model differences.

• Tyler Crompton: @shanethehat, I realize that I shouldn't use tables but it's the only way I can think of getting it to work. Care to provide some pseudo-code as to what values of display will make it work AND be vertically centered?
• shanethehat: Why do you need to worry about centering vertically? The parent of the form has a hard coded height in the CSS, so can't you just center it using padding-top?
• shanethehat: If you do need to center vertically and you know the height of your form you can set the form to use absolute positioning 50% from the top, then use a negative top margin of half the form's height.
• Tyler Crompton: @shanethehat, Okay, now how do I get the form to be laid out the same in IE 7 and below?
• shanethehat: Sorry for the delay, work gets in the way sometimes. This is my solution: jsfiddle.net/yW3An/7. I've restructured your HTML slightly, added some extra ids and classes, and changed a lot of the CSS. Tested in IE7, but I have no access to IE6. So now you'd just need a conditional comment to add an IE specific stylesheet to correct any minor positioning inconsistencies.