CODEWITHSUNDEEP
htmlcsslayoutinternet-explorer-7
futlib
futlib

Reputation: 8398

Table layout without tables in IE7

I want to do a simple form layout, labels and inputs, without tables. It works fine like this:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        form {
            display: table;
        }

        form>div {
            display: table-row;
        }

        form>div>* {
            display: table-cell;
        }
    </style>
</head>
<body>
    <form>
        <div>
            <label>Hello</label>
            <input type="text"/>
        </div>
        <div>
            <label>World</label>
            <input type="text"/>
        </div>
    </form>
</body>
</html>

However, it doesn't work in IE7. What is the cleanest way to make table layouts that display correctly in IE7, IE8, Firefox, Chrome and Safari?

Edit:

I've added a mock up of the layout I want to achieve:

layout

Upvotes: 1

Views: 1266

Answers (3)

gilly3
gilly3

Reputation: 91667

Use <table>. Most likely, you've heard it is bad practice to use tables in HTML. It is true that you should avoid using tables for layout. But, if you are actually displaying tabular data, then you should use a table. If you are displaying rows and columns of data, that sounds like a table to me. It would be inappropriate to try and spoof it with css.

A little bit on why. An HTML tag should describe its content, not its appearance. Eg, <p> represents a paragraph, not a block element with top and bottom margins, and not something to use when you need more white space. Some people like this because it feels right. It's clean and tidy and provides a nice separation between content and style. Done well, it can make it easier to re-skin a website.

But more importantly, it makes a HUGE difference for accessibility. Consider screen readers for the blind. When the screen reader encounters a <table>, it expects it to contain data. It allows the user to navigate the table by columns, rows, and headings. Using a table at the wrong time can be very confusing. Using it properly, can make it much easier for the user. Creating a table out of divs and fancy CSS tricks forces the user to navigate each element individually, instead of being able to skip to the row and column that is pertinent. To use your example, if a user was filling out a form, and certain fields were unnecessary, he could easily navigate by <th> to find the fields he needed to fill out.

There are other similar reasons to follow the "tags describe content" convention. Mostly, it is when anything other than a standard browser is consuming your page. Think search engines, feeds, etc. There are many lengthy discussions about this online. HTML5 takes this concept further with the introduction of some new semantic tags.

Upvotes: 1

Šime Vidas
Šime Vidas

Reputation: 186103

How about absolute positioning?

HTML:

<form>
    <h3> LOGIN </h3>
    <p> <label> Username: <input type="text"> </label> </p>
    <p> <label> Password: <input type="text"> </label> </p>
</form>

CSS:

p { position:relative; }
input { position:absolute; top:0; right:0; }

Live demo: http://jsfiddle.net/GCWWv/1/

Or this CSS: 

p { position:relative; }
input { position:absolute; left:100px; }

Live demo: http://jsfiddle.net/GCWWv/9/

Upvotes: 3

getdave
getdave

Reputation: 208

I would do something whereby you don't use display: table

I would:

form div {
float: left;
width: 200px /* change this to whatever */
}

If you need help could you please outline what visual layout you're trying to achieve? Good luck.

Upvotes: 0

Related Questions