SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Central London
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centered Form and IE

    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 (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. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Central London
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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.
    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:

    FF-Margin.JPG

    and now Chrome:

    CHROME-margin.JPG

    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?

    Many thanks for any assistance.

    S

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Central London
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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">

    Thanks I have that now locally, but I just didn't update the server. The Doctype works - thank you.

    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.

    I am using IE8, but my other lap top has Windows 7 - I will check IE9 on that to see what the problem is - thanks for the heads up.

    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)

    I am using FF Version 8.0.1 and Chrome Version 18.0.1025.142 m
    Many thanks for your time.

    S

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Central London
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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.
    I think I will do an upgrade. Thanks for your time and assistance.

    S


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •