IE 7 CSS Fixes for Login & Content Screens

Discussion in 'Templates customization' started by karyng01, Apr 5, 2012.

  1. karyng01

    karyng01 aMember Pro Customer

    Joined:
    Jul 30, 2008
    Messages:
    56
    Internet Explorer 7 has some rendering issues with the aMember 4.x theme, here's what I've come across so far, together with the fixes. The CSS needs to be added to an IE-7 specific CSS file (for example ie-7.css) and called by a conditional statment by a custom theme layout.phtml file.

    Login & Content Column Alignment
    The login & content screens don't align correctly in IE7 for the default aMember 4.x theme. The problem lies with how IE7 deals with widths, rather than percentages you need in the custom file (ie-7.css) to define left & right column widths using pixels. When this is done IE7 handles the column widths and floats the right column correctly instead of stacking the elements vertically.

    .am-coll-left,
    .am-coll-right {
    /* width: 50%; */
    width: 446px; /IE 7 needs the width defined in pixels to work */

    Login Fieldset Labels
    The login fieldset labels need a left margin adjustment to align correctly on the login screen for the default aMember 4.x theme. Again place this in the ie-7.css file.

    .am-form fieldset legend {
    margin-left: -7px; /* IE 7 needs this left margin shift to align labels correctly */

    IE Conditional Statment added to Custom layout.phtml
    <?php
    echo $this->doctype('XHTML1_TRANSITIONAL');
    ?>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title><?php echo $title ?></title>
    <?php $this->printLayoutHead(); ?>
    <!--[if IE 7]>
    <link href="/amember/application/default/views/public/css/ie-7.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    </head>

    Screen Shots
    The attached PDF file shows the problems and fixes. Though the screen shots show a customized theme the code for these login & content screens hasn't been altered (apart from visually changing colors) so remains the same as in the default theme.

    Attached Files:

  2. alexander

    alexander Administrator Staff Member

    Joined:
    Jan 8, 2003
    Messages:
    6,274
    Thanks for this! We appreciate this a lot!
  3. karyng01

    karyng01 aMember Pro Customer

    Joined:
    Jul 30, 2008
    Messages:
    56
    Update on the CSS mods needed for IE7. I have tested with IE7 some more and actually you can keep the percentages on the login screen but for some reason must make one column greater than 50% then IE7 will work with the code.

    .am-coll-left {
    width: 51%;
    }
    .am-coll-right {
    width: 49%;
    }
  4. alexander

    alexander Administrator Staff Member

    Joined:
    Jan 8, 2003
    Messages:
    6,274
    Ok. Thanks again!

Share This Page