Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts

    CSS is misaligning in IE, works in Firefox

    Hi I am (slowly) re-writing what I have done thus far on a website to avoid tables and use CSS only. The problem can be found at http://www.techlimelight.com/beta in the top right login box. The box displays correctly in Firefox but gets shifted down in IE. Safari works for the most part, however the password field is slightly misaligned.

    Any suggestions on how to fix this/avoid this in the future? How can I make sure my code works as intended in most browsers? Particularly Firefox, Safari, and IE?

    I've uploaded the css file.

    Thanks in advance,
    Marc
    Attached Files Attached Files

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Begin by recognizing that the "remember me" and the "enter" are floated, so IE will handle them differently than a more compliant Browser.

    Use the same approach on them as the rest of the form elements and see how you make out.

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for the quick reply! Ok I just tried that and it didn't seem to make any difference. I also tried completely getting rid of "remember me" and "enter" and the box is still misaligned so the problem must be elsewhere. Hmm

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Put this at the top of your css to remove all the stray margins and padding
    Code:
    * html { margin:0; padding:0; }

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by jlhaslip View Post
    Put this at the top of your css to remove all the stray margins and padding
    Code:
    * html { margin:0; padding:0; }
    No not that, that only targets IE. You want this
    Code:
    * {
    margin:0;
    padding:0;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    Evario (10-03-2007)

  • #6
    New Coder
    Join Date
    Oct 2007
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ok well I seemed to have fixed the problem. I'm not sure if this is the correct way to go about it, or why it even fixed the problem though. Instead of applying a style to the login_rule.jpg image (the ruler below "Login" and "Forgot Password") via the <img id="">, I wrapped the <img> in a <div> tag and assigned the id to the div element. That seemed to fix the problem in IE. Still don't know why though. I have updated the website to reflect the result.

    -Marc

  • #7
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    I wouldn't be too scared of floats in IE. Most of IE's problems come from positioned elements and their proprietary "layout" concept.

    Anyways you might want to check out:

    http://www.456bereastreet.com/archiv...s_problematic/

    LOTS of information about form styling with CSS, and how it can look on other browsers. There's also some pretty practical links to articles about formatting forms with CSS (as well as some good best-practices).

    Also, "best viewed in Firefox" is a cop-out. :P It's easy to evangelize web-standards as a designer, but the responsibility still lies with you to provide a consistent experience for your users. Once designers let go of the need for pixel precision cross-browser and just focus on creating accessible, semantic content presented in a consistent presentation all of the OCD will go away. =) For all its faults, IE6 really isn't bad to develop for--IE5/Mac is another beast entirely though.

  • #8
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    ff2, ie6 and ie7 all look good.

  • #9
    New Coder
    Join Date
    Oct 2007
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts
    @vtjustinb, haha yeah I was thinking of getting rid of that. I just put it up with all my frustrations in IE. Firefox just seems to "work better."

    Does the style of coding look decent? Is what I am doing considered good practice both in the stylesheet and in the code itself? I just want to make sure I get this all sorted out before I convert the rest of my code from tables. Any suggestions to avoid browser conflicts, coding style suggestions, etc?

    Thanks again,
    Marc

  • #10
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    No not that, that only targets IE. You want this
    Code:
    * {
    margin:0;
    padding:0;
    }
    yup, my bad... thanks for correcting that one, AE


  •  

    Posting Permissions

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