Centered Form and IE

HTML & CSS
1

Hi Guys,

I am trying to build a simple log in page. I have a logo image floated left. Then I have a “user log in” table embedded inside a form. The css for the form is:

#ezLogInTable {
position: relative;
border-style: inset;
border-color: #FFFFFF;
background-color: #A2B5CD;
border-width: 5px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
padding: 25px;
width: 400px;
clear: left;
}

In FF (V 8) this table is nicely centered on the page. However, with IE :rolleyes: (V 8) the table is shown hard left, as if the CSS auto margins don’t exist.

I hope this is sufficient information, and I can supply more.

Chrome (V 18) is happy with this, as is Opera (V 11.62) and Safari (5.*). But can anyone give me a hint as to what IE’s problem is please?

Many thanks in advance,

S

2

Hello :). First things first, do you have a doctype on your page? If not, add one. The above code will work for me if a doctype is added. That’s because without a doctype, IE reverts to quirks mode which makes it behave like IE5.5 which doesn’t understand auto margins.

3

Thank you. This now works. I have also learned something.

One more thing whilst I am here - margin-top: 100px;

All the browsers I test on do give the table a margin at the top, but FF behave differently in as much as it appears to give a greater margin. It is easier to visualise this, so please see these screen shots. First Firefox:

and now Chrome:

You can just see the different margins. Is there something else I need to do to ensure my page behaves in a consistent manner?

You can view the page in question here:

http://development.eazy-gen.com/lib/ezLogIn.php

Lastly, do others despair at IE as I do? :rolleyes:

Many thanks for any assistance.

S

4

Few things

  1. Yes, other loathe IE. It has gotten better but it’s still not amazing. Legacy browsers still give us isues.

  2. Your doctype is still incomplete. It doesn’t have a URI at the end which means it’s still quirks mode for IE. Though you shouldn’t be usingtransitional doctype. That implies your page is in transition from years ago. Use this doctype. Note the bold
    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

  3. The page still isn’t centered in IE8 for me (IE9 crashes for me). Though add that in and the auto margins should start working now. Please either remove the Javascript so that it’s not crashing IE9, or just plain fix it (something is causing it to crash, and I ASSUME the Javascript. Might not be the case but I’ll blame that for now.

  4. I can’t see the screenshots so I can’t really see what you’re seeing. I will say though that my Chrome and FF are appearing identical to one another. What versions are you using? Be sure to clear your cache and tell us your versions (if that doesn’t fix it)

5

Many thanks for your time.

S

6

Ah, well I’m using 11.0 so that’s probably why I haven’t noticed anything.

Hopefully one of the other members using 8.0 shows up and can help, although that browser seems to be a bit…outdatd. No idea when 8.0 came out (I’m sure a search would tell me) but it’s had to have come out a while ago.

7

I think I will do an upgrade. Thanks for your time and assistance.

S