Look ma, no tables (unless you're using IE 5 like half the world)

**TheOriginalH** · Sep 12, 2002, 02:17

Still trying desperately to get my first no-table xhtml1 strict layout playing nicely. Thanks to some sterling help from Mr Ian Glass, I have a basic working model (there are a few errors from where I've been playing, but it's on it's way there).

www.mattersoffact.co.uk/dev/

It looks more or less as it should in IE6, Mozilla and Opera. When I sort out the div order I should even be able to get it looking presentable in NS 4.x .... BUT

IE 5 buggers it up royally!!

If you have a copy spare, crack it open and you'll see what I mean.

Any chance one of the guru's here can point me in the right direction for sorting it out? I actually ran through a few toots dotted around the web for this sort of layout last night and even they had probs in IE5 - should I abandon the tableless utopia??

**dhtmlgod** · Sep 12, 2002, 02:50

I know this isn't what your asking, but this is what it looks like for me (ie6)

**Saz** · Sep 12, 2002, 02:59

Snap! Only with me it's not centred. That's in IE5.5.

H, can you keep us up to date with your progress on this site, particularly if you manage to solve your problems. Table-less designs are something I'd really like to get into only I've avoided them thus far because of the compatibility problems.

**Skunk** · Sep 12, 2002, 03:26

There are two main issues to take in to account when trying to fix a CSS site to work in IE5:

IE5 ignores margin:auto for centering. In CSS if you want to center a div on the page the suggested method is to apply margin-left: auto and margin-right: auto. IE5 ignores these properties, but luckily it has another bug in that it will (incorectly) apply the text-align attribute to block level elements. So, if you have a <div> inside your <body> that you want centered you can use the following code:
Code:
```
body {
  /* Center the div in IE5 */
  text-align: center;
}
body div {
  /* Make sure the contents of the div isn't centered itself */
  text-align: left; 
}
```
IE5 gets the "box model" wrong. This issue (and the recommended fix) is best described here: http://www.tantek.com/CSS/Examples/boxmodelhack.html

**platinum** · Sep 12, 2002, 04:11

The circles have dissapeared from the background of the menu

and the menu text is about 1 px too high

I liked the gradient extending to the bottom of the page too, but anywho...

It looks really good for a CSS only design kudo's to you H

**TheOriginalH** · Sep 12, 2002, 04:43

Originally posted by platinum
The circles have dissapeared from the background of the menu and the menu text is about 1 px too high I liked the gradient extending to the bottom of the page too, but anywho...

It looks really good for a CSS only design kudo's to you H

Don't worry sir, your artistic genius is being worked towards - as I said, I'll prolly use the table version until I get this sorted. When it is sorted, circles and gradient should hopefully be in-tact

**TheOriginalH** · Sep 12, 2002, 04:51

D - Yep, that's how it should look at the mo. I know some elements look a little quirky, it just hasn't been "tweeked" yet.

Saz - I'll certainly do that. If I can get this to work out OK I'm going to look at moving all of our corporate sites in this direction.... :nervous: <-!

Skunk, thanks muchly, I'm working through that toot as I type - prolly gonna start from scratch to ensure all is correct

**InQuE** · Sep 14, 2002, 19:01

hmm, from what i can see on my screen (using IE6 and 1152x864) some of the pieces are out of line. other than that, it looks nice.

**astericks** · Sep 15, 2002, 08:29

Originally posted by dhtmlgod
I know this isn't what your asking, but this is what it looks like for me (ie6)

same for me. minor misalignments...but pretty good.

The SitePoint Forums have moved.

User Tag List

Thread: Look ma, no tables (unless you're using IE 5 like half the world)

Thread Tools

Display

Look ma, no tables (unless you're using IE 5 like half the world)

Bookmarks

Bookmarks

Posting Permissions