Cross Browser Issue With Split Login Page... CSS or DIV?

[limelites]

My poor login page does not look right on Safari, Crome or Opera.... The layout is a bit distorted...

Here's how it should look (as it is now in FF and IE7 and IE8)
[SCR]http://www.limelites.co.uk/screen104.jpg[/SCR]

Here's how it looks in Chrome and Safari:
[SCR]http://www.limelites.co.uk/screen104-chrome-and-safari.jpg[/SCR]

Here's how it looks in Opera:
[SCR]http://www.limelites.co.uk/screen104-opera.jpg[/SCR]

Here's the login.css:
http://www.limelites.co.uk/login.rar

Here's the tpl_checkout_split.php which generates this page:
http://www.limelites.co.uk/tpl_checkout_split.rar

I tried messing with the CSS but it seems as though it's more of a <DIV> problem or <BR> problem. Now, I'm woeful with DIV tags..... I wonder if anything obvious jumps out at any of you out there as the culprit for this?

[mprough]

The width for the containers is too wide, I had the same issue on ours.
/includes/templates/freetemplate2/css/login.css

#loginColumnLeft (line 23)

{

width: 58%;

margin-left: 0pt;

float: left;

}

#loginColumnRight (line 29)

{

width: 37%;

padding-left: 3em;

float: left;

}

I would go with like 45% & 45%.. In any case it can only be a max of 100% together minus any padding.

~Melanie

[limelites]

Hi Melanie,

I made some changes to the login.css:

/**
 * Login CSS Stylesheet
 *
 * @package easy signup and login
 * @copyright Copyright 2007 Numinix Technology http://www.numinix.com
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: login.css 12 2009-01-20 23:53:46Z numinix $
 */

#login-password {
    margin-left: 0px;
    }

#login-email-address {
    margin-left: 0px;
    }

.centerColumn {
    margin-bottom: 2.5em;
    margin: auto;
}

#loginColumnLeft {
float:left;
margin:10px;
width:540px;
}

#loginColumnRight {
float:left;
margin:10px;
width:400px;
    }
    
.loginFieldsetRight { 
}

.loginFieldsetLeft {
}

.loginFieldsetCenter {  
}

fieldset {
border:1px solid #CCCCCC;
margin:0;
padding:5px;
}

legend {
    border: 1px solid #4A4A4A; /*#cccccc;*/
    background-color: #F0FFF0; /*#E8E8E8;*/
    color: #4A4A4A;
}

.buttonRow {
    padding-top: 5px;
}

hr {
  /*
  border: 1px dotted #9A9A9A;
  height:1px;
  margin-top:0.5em;
  */
  border-style:none;
  border-top: 2px dotted #CCCCCC;
  border-bottom: 0px solid white;
  height: 0px;
} 

It tidied up some margins and widths but unfortunately, chrome, safari and opera just look the same.

Opera has a strange staggered alignment on the password and email fields. I'm guessing this must be CSS but I can't seem to style them into alignment?

Chrome and Safari seem to have the whole 'Returning Customers' table inside the same left column/cell as the submit button on the left? I guess this is something to do with the position of the DIVs in the php file

[mprough]

Only 3 px left over is not going to do it...

Your space is about 983px to use and you are using 980px

Melanie

[limelites]

Even when I knock 80px off to test it and change the 580px to 500px... it makes no difference.

I think it must be a DIV and TD TR tag validation problem

[Website Rob]

In looking at the code for your "login" page I'm surprized anything shows at all.

You have mis-matched tags for a TR and a DIV plus you are trying to start another HTML page at the bottom of your page.

http://validator.w3.org/ is a good online Validator if needed to see the errors.

[mprough]

Even when I knock 80px off to test it and change the 580px to 500px... it makes no difference.

I think it must be a DIV and TD TR tag validation problem

580px + 500px = 1080

You have 983px to work with

~Melanie

[limelites]

In looking at the code for your "login" page I'm surprized anything shows at all.

You have mis-matched tags for a TR and a DIV plus you are trying to start another HTML page at the bottom of your page.

http://validator.w3.org/ is a good online Validator if needed to see the errors.

Hi Rob, thanks for the pointer, but I prefer not to use the Validator sites as they just flag up problems that aren't really problems. In my book, if the site is displaying and functioning in all browsers then why waste time trying to fix all those weird little errors that don't matter.

Try typing www.eBay.com into the validator site and you'll see that even the mighty eBay have hundreds of errors.

[limelites]

580px + 500px = 1080

You have 983px to work with

~Melanie

Hi Melanie.... That was a typo, meant to say that I'd tried 580+300

I manged to solve this though, thanks to the help of s_t_e_v_e. It was a little DIV missing that has now been inserted and now, the login page displays perfectly in all browsers (IE7, IE8, FF, Opera, Safari and Chrome).

No need to Validate now