I am totally stumped.
I've uploaded some images that I hope will help explain what is happening (see below).
The site you can visit (yes yes, its not complete but it is a MODX Rev site)..
http://myneverwinter.com
As you can see, the login form has just the two input fields username and password, both have the same CSS, see the included code below.
In the first image, you see how the site SHOULD look, and DOES look while I preview the page in Chrome on my local machine. No modx just pure HTML + CSS.
In the second image is the form, as it should be displayed CORRECTLY.
In the third image is the form as it appears LIVE in MODX.
Clearly MODX does not handle CSS well? or.. can someone see something I do not? IF you click on the username field POOF! the background images appear. Why are they NOT appearing on page load? Any help would be appreciated.
mnloginFormTPL chunk
<div class="mnloginForm"><!-- start .mnloginForm -->
<form action="[[~[[*id]]]]" method="post">
<legend>[[+actionMsg]]</legend>
<label>[[%login.username]]
<input id="text"
type="text"
name="username"
placeholder="Enter Username"
autofocus />
</label>
<label>[[%login.password]]
<input id="text"
type="password"
name="password"
placeholder="Enter Password" />
</label>
<input type="hidden"
name="returnUrl"
value="[[+request_uri]]" />
<input type="hidden"
name="service"
value="login" />
<span><input type="submit"
name="Login"
value="[[+actionMsg]]" />
</span>
</form>
<div class="mnloginMessage"><!-- start .mnloginMessage -->
[[+errors]]
</div><!-- end .mnloginMessage -->
</div><!-- end .mnloginForm -->
.mnloginForm {
position: relative; float:left;
text-align: left; display: block;
clear: both; width: 135px;}
.mnloginMessage {
position: relative; float:left; width: 135px;
font-family: Verdana, Geneva, sans-serif; font-size: 10px;
font-style: italic; line-height: 12px; text-transform: capitalize;
color: #ff9900; display: block; text-align: center; vertical-align: middle;}
input[type=text], input[type=password] {
background: url(../images/login_input_bg.png) no-repeat center center;
color:#ff9900; width:135px; height:40px; border:0;
text-align: center; vertical-align: middle; font-size: 12; padding:0;}
input[type=submit] {
background: url(../images/login_submit_btn.png) no-repeat center center;
border:0px; width:135px; height:28px; font-size:0px; line-height:0px;}
input[type=submit]:hover {cursor:pointer;}
::-webkit-input-placeholder {color:#993300;}/* WebKit browsers */
:-moz-placeholder {color:#993300;} /* Mozilla Firefox 4 to 18 */
::-moz-placeholder {color:#993300;} /* Mozilla Firefox 19+ */
:-ms-input-placeholder {color:#993300;} /* Internet Explorer 10+ */
*:focus {outline: none;}
☆ A M B ☆
☆ A M B ☆
on the design page.. not yet live. but that's where it will go
