i have a login page that seems to work fine in chrome, chrome(windows), safari and firefox but when i test it in IE. There seems to be a huge break between the login boxes and the 'forgot username or password' link. I have no idea as to why this is, could someone please help me resolve this issue?
HTML:
<body id="loginpage">
<table cellpadding="0" cellspacing="0" id="maintable">
<tbody>
<tr>
<td id="container">
<div id="login_header">
<h1><b>TEST Vario Press CMS Demo</b></h1>
<div id="logo"></div>
</div>
<div id="content">
<!-- Begin Content -->
<div id="dialog">
<h2>Client Login</h2>
<div class="content">
<form action="#" name="login" id="login" method="post" accept-charset="utf-8" autocomplete="off" _lpchecked="1">
<div id="login_form">
<div class="error"></div>
Please enter your username and password
<ul>
<li id="username_field"><label>Username:</label><input type="text" name="username" value="" id="username" onkeypress="return checkenter(event)"></li>
<li id="password_field"><label>Password:</label><input type="password" name="password" value="" onkeypress="return checkenter(event)"></li>
</ul>
</div>
<div class="ok_button" title="Login" onclick="login.submit()">
GO
</div>
<div class="button" id="submit_button">
<input type="submit" name="submit_button" value="Login">
</div>
</form>
<div id="login_links">
<div class="forgot">
Forgot username or password?
</div>
<div class="register">
Register
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
CSS:
#login_header h1, #login_header #logo, #header h1 b {
display:none;
}
#dialog {
width:520px;
margin:0 auto;
text-align:center;
color:#FFF;
}
#login_form {
background-color:#808080;
padding:18px;
padding-bottom:42px;
text-align:center;
}
#dialog, #dialog .error {
color:#FFF;
}
#dialog h2 {
background-color: #808080;
background-image: url("../imgs/table_bg.gif");
color:#fff;
padding:9px;
font-size:20px;
text-align:left;
margin:0px;
}
#dialog .content {
padding:0;
list-style: none;
}
#dialog .ok_button {
display:none;
}
#dialog #submit_button input {
padding:7px 5px;
text-align: center;
}
#dialog .clear {
display:none;
}
.highlight_field {
background-color:#f57921;
}
#forgot h3 {
text-align:center;
}
#my_details {
width:auto;
}
#loginpage #my_details {
width:400px;
}
#forgot h3 {
font-size: 12px;
}
#login ul {
margin-left:8px;
list-style: none;
}
#login ul input{
width: 350px;
height: 25px;
padding-left: 10px;
background-color: #FFF;
border: none;
border-width: 0px;
position: relative;
left: -20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
behavior : url(../js/PIE.htc);
/*
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;*/
}
#login #submit_button {
display:block;
position:relative;
top:-48px;
right:10px;
}
#login_links {
margin-top:0;
text-align:left;
}
#login_links .forgot {
float:none;
display:block;
}
#login_links .register, #login_links .whyregister {
display: none;
}
#login_links .forgot a {
display:block;
width:484px;
color:#FFF;
background-color:#808080;
padding:18px;
font-weight:normal;
text-decoration: none;
}
#login_links .forgot a:hover {
text-decoration: underline;
}
#login label {
width:6em;
display: block;
text-align: left;
/*float: left;*/
line-height: 25px;
margin-left: 22px;
}
#ie6 #login_form {
margin-bottom:-47px;
}
#ie6 #submit_button {
position:relative;
top:-4px;
}
#page_mydetails .recordset {
width:48%;
}
.recordset h4 {
font-size:11px;
background-image:url(../imgs/table_bg.gif);
background-color:#535c66;
color:#fff;
border-bottom:1px solid #FFFFFF;
padding:9px;
}
#loginpage #content {
padding-top:18px;
}
DEMO: http://jsfiddle.net/MpEX2/
I fixed it so it looks good in Chrome. See this fiddle.
I moved everything inside the login_form div and removed any position: relative; stuff from the CSS. I have no idea why anything was using position: relative; as it just screwed up the layout.
Try not to over us position: relative and other positioning values except for static which is the default. Another age old advice is don't use tables for layout.
HTML:
<table cellpadding="0" cellspacing="0" id="maintable">
<tbody>
<tr>
<td id="container">
<div id="login_header">
<h1><b>TEST Vario Press CMS Demo</b></h1>
<div id="logo"></div>
</div>
<div id="content">
<!-- Begin Content -->
<div id="dialog">
<h2>Client Login</h2>
<div class="content">
<form action="#" name="login" id="login" method="post" accept-charset="utf-8" autocomplete="off" _lpchecked="1">
<div id="login_form">
<div class="error"></div>
Please enter your username and password
<ul>
<li id="username_field">
<label>Username:</label>
<input type="text" name="username" value="" id="username" onkeypress="return checkenter(event)">
</li>
<li id="password_field">
<label>Password:</label>
<input type="password" name="password" value="" onkeypress="return checkenter(event)">
</li>
</ul>
<div class="ok_button" title="Login" onclick="login.submit()">
GO
</div>
<div class="button" id="submit_button">
<input type="submit" name="submit_button" value="Login">
</div>
</div>
</form>
<div id="login_links">
<div class="forgot">
Forgot username or password?
</div>
<div class="register">
Register
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="clear"></div>
</td>
</tr>
</tbody>
</table>
CSS:
#login_header h1, #login_header #logo, #header h1 b {
display:none;
}
#dialog {
width:520px;
margin:0 auto;
text-align:center;
color:#FFF;
}
#login_form {
background-color:#808080;
padding:18px;
padding-bottom:42px;
text-align:center;
}
#dialog, #dialog .error {
color:#FFF;
}
#dialog h2 {
background-color: #808080;
background-image: url("../imgs/table_bg.gif");
color:#fff;
padding:9px;
font-size:20px;
text-align:left;
margin:0px;
}
#dialog .content {
padding:0;
list-style: none;
}
#dialog .ok_button {
display:none;
}
#dialog #submit_button input {
padding:7px 5px;
text-align: center;
}
#dialog .clear {
display:none;
}
.search_button {
background-image:url(../imgs/nav_ok.gif);
background-repeat:no-repeat;
background-position:left -2px;
width:26px;
height:30px;
margin-top:2px;
margin-right:12px;
float:right;
cursor:pointer;
}
.highlight_field {
background-color:#f57921;
}
#forgot h3 {
text-align:center;
}
#my_details {
width:auto;
}
#loginpage #my_details {
width:400px;
}
#forgot h3 {
font-size: 12px;
}
#login ul {
margin-left:8px;
list-style: none;
}
#login ul input{
width: 350px;
height: 25px;
padding-left: 10px;
background-color: #FFF;
border: none;
border-width: 0px;
position: relative;
left: -20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
behavior : url(../js/PIE.htc);
/*
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;*/
}
#login_links {
margin-top:0;
text-align:left;
}
#login_links .forgot {
float:none;
display:block;
}
#login_links .register, #login_links .whyregister {
display: none;
}
#login_links .forgot a {
display:block;
width:484px;
color:#FFF;
background-color:#808080;
padding:18px;
font-weight:normal;
text-decoration: none;
}
#login_links .forgot a:hover {
text-decoration: underline;
}
#login label {
width:6em;
display: block;
text-align: left;
/*float: left;*/
line-height: 25px;
margin-left: 22px;
}
#page_mydetails .recordset {
width:48%;
}
.recordset h4 {
font-size:11px;
background-image:url(../imgs/table_bg.gif);
background-color:#535c66;
color:#fff;
border-bottom:1px solid #FFFFFF;
padding:9px;
}
.highlight {
background-color:#f7b100;
color:#000;
}
.highlight a, .highlight a:visited {
color:#000;
}
#nav a:hover, #nav .active a {
color:#f7b100;
}
#loginpage #content {
padding-top:18px;
}
Related
i have a weird bug with my css
#box1 {
border:2px solid #CC9933;
padding:5px;
-moz-border-radius:10px 0;
-webkit-border-radius:10px 0;
border-radius:10px ;
margin-bottom: 10px;
width: auto;
}
#box1 label {
background-color: black;
color:white;
float: left;
margin-left: 1px;
}
#box1 span {
display: block;
overflow: hidden;
}
#box1 span input {
width: 100%;
border:none;
border-bottom:solid 1px #000;
outline:none;
}
<div id="box1">
<form>
<div>
<label> Nom de la société </label>
<span><input type="text" value=""></span>
</div>
<div>
<label> Adresse </label>
<span><input type="text" value=""></span>
</div>
</form>
</div>
I won't show all the HTML because it is the same structure.
The thing is that in my web browser it looks like this :
However, this is how it should looks like :
(this is the same code !)
http://jsfiddle.net/8vsyxtys/
It's most likely the float:left.
Try adding a clear div after each:
css would be: .clear { clear:both; height: 1px; }
#box1 {
border:2px solid #CC9933;
padding:5px;
-moz-border-radius:10px 0;
-webkit-border-radius:10px 0;
border-radius:10px ;
margin-bottom: 10px;
width: auto;
}
#box1 label {
background-color: black;
color:white;
float: left;
margin-left: 1px;
}
#box1 span {
display: block;
overflow: hidden;
}
#box1 span input {
width: 100%;
border:none;
border-bottom:solid 1px #000;
outline:none;
}
.clear {
clear: both;
height: 1px;
}
<div id="box1">
<form>
<div>
<label> Nom de la société </label>
<span><input type="text" value=""></span>
</div>
<div class="clear"> </div>
<div>
<label> Adresse </label>
<span><input type="text" value=""></span>
</div>
</form>
</div>
I am having this really weird issue where I cannot highlight my text in my form fields.
I cannot seem to figure out what the issue is, since everything but that seems to be working correctly.
I can't seem to understand where the problem lies - it doesn't work on Chrome or Safari.
{
position:relative;
width:100%;
margin-bottom:-20px;
}
.outerForm img {
width:800px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
form {
display: table;
position:absolute;
top:0px;
left:0px;
right:0px;
margin-left: auto;
margin-right: auto;
color:black;
width:600px;;
height:300px;
margin-top: 100px;
}
.innerForm > input, .innerForm > label {
display: inline-block;
vertical-align: top;
margin-left: 5px;
margin-top: 25px;
margin-right: 5px;
}
.innerForm > label {
width:70px;
text-align: left;
}
#messageLabel {
}
input[type="text"] {
width:200px;
height:30px;
border:none;
outline:none;
box-shadow: none;
background-color:transparent;
border-bottom: 1px solid black;
}
textarea {
resize: vertical;
width:85%;
border:none;
outline:none;
box-shadow: none;
background-color: transparent;
padding-bottom: 18%;
border-bottom: 1px solid black;
margin-top: 20px;
}
textarea:focus {
border:none;
outline:none;
background-color: transparent;
box-shadow: none;
border-bottom: 1px solid red;
}
.innerForm > h4 {
margin-bottom:-10px;
text-transform:none;
font-family: 'Novecento sans wide';
}
input[type="text"]:focus, input[type="textarea"] {
border:none;
outline:none;
background-color:transparent;
box-shadow: none;
border-bottom:1px solid red;
}
#submitBtn {
background-color:transparent;
color:black;
font-weight:400;
border:none;
outline:none;
border:2px solid white;
padding:10px 20px 10px 20px;
font-size: 15px;
margin-top:15px;
transition: all 0.5s ease;
}
#submitBtn:hover {
background-color: #0080ff;
color:white;
}
<div class="outerForm">
<img id="cardImage" class="img-responsive" src="PlayingCardTemplate.png"/>
<form id="contactForm" action="Contact.php" method="POST">
<div class="innerForm">
<h4>Arshdeep Soni</h4>
<label id="nameLabel" for="name">Name:</label>
<input id="name" name="name" type="text"/>
<label id="phoneLabel" for="phone">Phone:</label>
<input id="phone" name="phone" type="text"/>
<label id="emailLabel" for="email">Email:</label>
<input id="email" name="email" type="text"/>
<label id="occasionLabel" for="occasion">Occasion:</label>
<input id="occasion" type="text" name="occasion"/>
<label id="messageLabel" for="message">Message:</label>
<textarea id="message" name="message" ></textarea>
<input type="submit" value="Submit" id="submitBtn" name="submit"/>
</div>
<p id="feedback"></p>
</form>
</div>
Look for ::selection inside the CSS Stylesheet.
An imported stylesheet or a theme might be include ::selection{background:transparent
for multiple reasons.
looking for that class and editing it can be solve the issue.
Also you can add color: in order to color the text inside your selection.
For mozilla use ::-moz-selection
I would like to add a border to the input fields on my login form, however when i add border:1px solid black; to #login-form input then all of the text boxes move out of position.
Here is what it looks like without a border : http://imgur.com/mjXjf3W
Here it is with the border : http://imgur.com/Yt9H2Nr
When the user inputs the incorrect credentials into the form then a message is displayed above the form, this also causes the form to change position, this happens even when there is no border applied to the inputs.
Here is a screen shot of this : http://imgur.com/c3Frc0z
I have tried clearing all the floats however this did not make a difference:
Here is my HTML:
<div class="sign_in_header">
<div class="sign_in">Sign In</div><div class="sign_up"> or Sign Up</div>
</div>
<div class="sign_in_text">
Sign in with your account
</div>
<div id="login_error"></div>
<div id="login-form">
<form method="post">
<div id="login_form_input">
<label>Email:</label><input align="right" text="Email" name="email" required />
<br>
<label>Password:</label><input type="password" name="pass" required />
</div>
<button type="submit" name="btn-login">Log In</button>
<div class="sign_up_label">Not Registered ?</div>
</form>
</div>
Here is the CSS:
.sign_in_header {
margin-top:40px;
width:100%;
border-bottom:1px solid #aaa;
line-height:30px;
}
.sign_in, .sign_up{
font-size:20px;
color:#000000;
font-family: 'Roboto', sans-serif;
font-weight:300;
display:inline-block;
}
.sign_up {
font-size:14px;
}
.sign_up a {
text-decoration: none;
color:#0790cb;
}
.sign_up a:hover {
text-decoration: underline;
}
.sign_in_text {
margin-top:20px;
font-family: 'Roboto', sans-serif;
font-weight:500;
font-size:16px;
}
#login-form {
margin-top:20px;
}
#login-form label {
float: left;
width: 150px;
text-align: right;
margin-right: 0.5em;
margin-bottom:15px;
font-size:13px;
line-height:30px;
}
#login-form input {
width:250px;
height:25px;
margin-bottom:15px;
clear:both;
}
#login-form button {
-webkit-border-radius: 2;
-moz-border-radius: 2;
border-radius: 2px;
border:none;
font-family: 'Roboto', sans-serif;
color: #ffffff;
font-size: 14px;
background: #004d6e;
padding: 8px 20px 8px 20px;
text-decoration: none;
display:inline-block;
}
#login-form button:hover {
background: #343434;
text-decoration: none;
}
.sign_up_label {
display:inline-block;
margin-left:20px;
font-size:12px;
font-weight:300;
font-family: 'Roboto', sans-serif;
}
If anybody would please be able to update my code with any solution and possibly explain how the issue was fixed - it would be greatly appreciated.
Many thanks in advance.
I just increase margin bottom in #login-form input and add border in this.
margin-top:40px;
width:100%;
border-bottom:1px solid #aaa;
line-height:30px;
}
.sign_in, .sign_up{
font-size:20px;
color:#000000;
font-family: 'Roboto', sans-serif;
font-weight:300;
display:inline-block;
}
.sign_up {
font-size:14px;
}
.sign_up a {
text-decoration: none;
color:#0790cb;
}
.sign_up a:hover {
text-decoration: underline;
}
.sign_in_text {
margin-top:20px;
font-family: 'Roboto', sans-serif;
font-weight:500;
font-size:16px;
}
#login-form {
margin-top:20px;
}
#login-form label {
float: left;
width: 150px;
text-align: right;
margin-right: 0.5em;
margin-bottom:15px;
font-size:13px;
line-height:30px;
}
#login-form input {
width:250px;
height:25px;
border:1px solid black;
margin-bottom:18px;/*increase margin -bottom*/
clear:both;
}
#login-form button {
-webkit-border-radius: 2;
-moz-border-radius: 2;
border-radius: 2px;
border:none;
font-family: 'Roboto', sans-serif;
color: #ffffff;
font-size: 14px;
background: #004d6e;
padding: 8px 20px 8px 20px;
text-decoration: none;
display:inline-block;
}
#login-form button:hover {
background: #343434;
text-decoration: none;
}
.sign_up_label {
display:inline-block;
margin-left:20px;
font-size:12px;
font-weight:300;
font-family: 'Roboto', sans-serif;
}
<div class="sign_in_header">
<div class="sign_in">Sign In</div><div class="sign_up"> or Sign Up</div>
</div>
<div class="sign_in_text">
Sign in with your account
</div>
<div id="login_error"></div>
<div id="login-form">
<form method="post">
<div id="login_form_input">
<label>Email:</label><input align="right" text="Email" name="email" required />
<br>
<label>Password:</label><input type="password" name="pass" required />
</div>
<button type="submit" name="btn-login">Log In</button>
<div class="sign_up_label">Not Registered ?</div>
</form>
</div>
If you add a second <br> after your fist input, it works. Can't explain why your code wasn't working, thought.
I´m here with a strange situation, trying to float my button input[type="submit"] to the right.
I have space there and so I´m floating the button to the right to stand beside my input text.
But the float is not working and the button is not going, in any way, to the right.
My jsfiddle with problem illustrated:
http://jsfiddle.net/ritz/5Nq2N/1/
My Html:
<footer id="footer-container">
<section id="footer1">
<div id="col">
<h1>NEWSLETTER</h1>
<p>Register in our Newsletter.</p>
<form action="" name="newsletter" method="post" enctype="multipart/form-data">
<label id="email-label2">
<i class="fa fa-envelope-o"></i>
<input type="text"id="email2" name="email" placeholder="e-mail" required/>
</label>http://jsfiddle.net/#save
<br />
<label id="submit">
<input type="hidden" name="news_register" value="register" />
<input type="submit" name="register" value="Register" src="" />
</label>
</form>
</div>
</footer>
My Css:
#footer-container
{
width:100%;
float:left;
background:brown;
height:auto;
}
#footer1
{
width:320px;
margin:15px 10px 15px 10px;
height:auto;
}
#col
{
float:left;
margin-right:53px;
}
#col h1
{
border-bottom:1px dashed #ccc;
font-family:'bariol_boldbold';
color:#fff;
width:300px;
font-size:17px;
font-weight:bold;
margin-bottom:10px;
}
#col p
{
width:300px;
color:#fff;
text-align:justify;
color:#ccc;
font-size:14px;
font-family:'bariol_regularregular';
margin-bottom:10px;
}
input[type="text"]
{
font-size: 14px;
line-height: 20px;
padding: 4px 3px;
}
#email2
{
padding-left: 20px;
text-indent:5px;
width:172px;
height:18px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family:'Tahoma';
font-size:14px;
color:#000;
}
input[type="submit"]
{
float:right;
margin-right:5px;
text-align: left;
font-family: 'Tahoma';
font-size: 14px;
color: #333;
margin-top:10px;
outline:none;
background: blue;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
outline:none;
cursor: pointer;
color:#fff;
width: 70px;
height: 26px;
text-align:center;
border:1px solid #3c3412;
margin-bottom:15px;
}
You had a couple of problems with the semantics and broken tags. I fixed it up and and updated the CSS:
http://jsfiddle.net/5Nq2N/3/
Tips:
Don't place input fields inside label elements. Labels should describe the input field and sit above them. <label for="email">Enter your email</label>
Float the container with your items in it, the containers will stack against each other.
Clear your floats ;)
Read CSS Mastery by Andy Budd, its a great foundation.
<footer id="footer-container">
<section id="footer1">
<div id="col">
<h1>NEWSLETTER</h1>
<p>Register in our Newsletter.</p>
<form action="" name="newsletter" method="post" enctype="multipart/form-data">
<div id="email-label2">
<i class="fa fa-envelope-o"></i>
<input type="text"id="email2" name="email" placeholder="e-mail" required />
</div>
<div id="submit">
<input type="hidden" name="news_register" value="register" />
<input type="submit" name="register" value="Register" />
</div>
<div class="clear"></div>
</form>
</div>
</section>
</footer>
.clear {
clear: both;
}
#footer-container
{
width:100%;
float:left;
background:brown;
height:auto;
}
#footer1
{
width:320px;
margin:15px 10px 15px 10px;
height:auto;
}
#col
{
float:left;
margin-right:53px;
}
#col h1
{
border-bottom:1px dashed #ccc;
font-family:'bariol_boldbold';
color:#fff;
width:300px;
font-size:17px;
font-weight:bold;
margin-bottom:10px;
}
#col p
{
width:300px;
color:#fff;
text-align:justify;
color:#ccc;
font-size:14px;
font-family:'bariol_regularregular';
margin-bottom:10px;
}
input[type="text"]
{
font-size: 14px;
line-height: 20px;
padding: 4px 3px;
}
#email2
{
padding-left: 20px;
text-indent:5px;
width:172px;
height:18px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family:'Tahoma';
font-size:14px;
color:#000;
float: left;
}
#submit {
float: left;
margin: 5px 0px 0px 5px;
}
input[type="submit"]
{
text-align: left;
font-family: 'Tahoma';
font-size: 14px;
color: #333;
outline:none;
background: blue;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
outline:none;
cursor: pointer;
color:#fff;
width: 70px;
height: 26px;
text-align:center;
border:1px solid #3c3412;
margin-bottom:15px;
}
Ignoring the float, your layout looks like this:
/----------------Container------------------\
| [Text input here] |
| [Submit button here] |
\-------------------------------------------/
Now let's factor in the float:right:
/----------------Container------------------\
| [Text input here] |
| [Submit button here] |
\-------------------------------------------/
See how even though there's room, it's not magically moving up.
Now, let's try moving the submit button to be before the text input in your layout:
/----------------Container------------------\
| [Submit button here] |
| [Text input here] |
\-------------------------------------------/
Result with float:
/----------------Container------------------\
| [Text input here] [Submit button here] |
\-------------------------------------------/
Yay! But... having the submit button before the text is not very semantic at all. What else can be done?
Well, you could try removing the <br /> tag.
Adjust margins as needed!
I have a web page that is using a CSS style sheet. When I run the page on localhost, it works fine on IE, Firefox and Google Chrome.
But when I upload the page and the CSS sheet, doesn`t work in IE but work in Firefox and Google Chrome.
This is my page code:
<div id="container">
<div id="header">
<h1><img src="../img/logo.png" alt="rattle me" class="png" /></h1>
<div>
</div>
<br class="clear" />
<?php
if(isset($_POST['err']))
echo "<script>alert('Invalid Captcha ...')</script>";
?></div>
<div id="content">
<div class="text">
<h2>Support</h2>
<form action="verify.php" id="contact" onsubmit="return validateForm();" method="post">
<div id="form">
<table>
<tr style="height:75px">
<td><div style="width:75px">Name:</div></td>
<td><div class="input"><input type="text" value="<?php echo (isset($_POST['usrName']))?$_POST['usrName']:"Your Name"; ?>" name="contact[name]" id="contactName" onfocus="clearInputValue(this,'Your Name')" onblur="setInputValue(this,'Your Name')"/></div></td>
</tr>
<tr style="height:75px">
<td><div>Email:</div></td>
<td><div class="input"><input type="text" value="<? echo (isset($_POST['usrEmail']))?$_POST['usrEmail']:"Your E-Mail"; ?>" name="contact[email]" id="contactEmail" onfocus="clearInputValue(this,'Your E-Mail')" onblur="setInputValue(this,'Your E-Mail')"/></div></td>
</tr>
<tr style="height:75px">
<td><div>Phone:</div></td>
<td><div class="input"><input type="text" value="<? echo (isset($_POST['usrPhone']))?$_POST['usrPhone']:"Your Phone Number"; ?>" name="contact[phone]" id="contactPhone" onfocus="clearInputValue(this,'Your Phone Number')" onblur="setInputValue(this,'Your Phone Number')"/></div></td>
</tr>
<tr style="height:150px">
<td><div>Message:</div></td>
<td height="50px"><textarea type="text" style="width:263px; height:25px; font:bold 14px Arial, Helvetica, sans-serif; color:#9F9F9F; outline:0 none; background:none; padding:9px 10px 75px 10px;" name="contact[message]" id="contactMessage" onfocus="clearInputValue(this,'Your Message')" onblur="setInputValue(this,'Your Message')"><? echo (isset($_POST['usrMsg']))?nl2br($_POST['usrMsg']):"Your Message"; ?></textarea></td>
</tr>
<tr style="height:75px">
<td><div>Human Verification:</div></td>
<td>
<?php
require_once('recaptchalib.php');
$publickey = "6Le4hb8SAAAAAKyDYU31NJ1KsROl4sxUW90coeea";
echo recaptcha_get_html($publickey);
?>
</td>
</tr>
<tr style="height:75px">
<td colspan="2"><div class="input" style="background:none"><button type="submit"><span class="button large">Submit</span></button></div></td>
</tr>
</table>
</div>
</form>
</div>
</div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
</div>
<div id="footer">
<div class="wrap">
<ul>
<li>Home .</li>
<li>Terms of Service .</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
and this is my CSS file:
html, body {
height: 100%;
}
body {
background: url(../../img/bg.jpg) repeat-x top #f0f0f0;
color:#000;
font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
a {
color:#5f2f80;
}
.left {
float:left
}
.right {
float:right
}
.clear {
display:block;
clear:both;
visibility:hidden;
height:0px;
border-width:0;
margin:0;
padding:0;
font-size: 0px;
}
.button, .button:visited {
background: #d46f1d url(../../img/overlay.png) repeat-x;
display: inline-block;
padding: 5px 15px 5px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
text-transform:uppercase;
}
.button:hover {
background-color:#ff6600;
}
.small.button, .small.button:visited {
font-size: 11px
}
.button, .button:visited,
.medium.button, .medium.button:visited {
font-size: 15px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.large.button, .large.button:visited {
font-size: 20px;
padding: 6px 18px 5px;
}
.super.button, .super.button:visited {
font-size: 36px;
padding: 8px 24px 9px;
}
#container {
width:660px;
margin:0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
}
#header {
padding:20px 0;
}
#header h1 img {
display:block;
float: left;
}
#header div {
float: right;
width: 424px;
padding-top: 84px;
}
#header p {
font-weight: bold;
font-size: 18px;
}
#header p span {
color: #5f2f80;
}
#content {
padding-bottom:20px;
}
#content .box {
padding-top:20px;
}
#content .box p {
text-align:justify;
}
#content p {
line-height:140%;
padding-bottom:12px;
}
#content h2 {
font-size:18px;
padding-bottom:18px;
}
#content #swf {
width:640px;
margin:0 auto 20px auto;
border:solid 10px #85796F;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#content #swf object {
display:block;
}
#content .text {
float:left;
width:424px;
line-height:140%;
}
#content .text h6 {
font-size:14px;
padding-bottom:14px;
}
#content .text .input {
background:url(../../img/bg-input.gif) no-repeat;
width:263px;
height:27px;
display:block;
float: left;
padding:9px 10px 0 10px;
}
#content .text .input input {
border:0;
background:none;
width:100%;
text-align:center;
font:bold 14px Arial, Helvetica, sans-serif;
outline:0 none;
color: #9F9F9F;
}
#content .text button {
float: right;
background:none;
border:0;
cursor:pointer;
}
#content .app {
float:right;
}
#content .app img {
display:block;
}
#footer, .push {
height: 50px;
}
#footer {
border-top:solid 1px #85796F;
}
#footer .wrap {
width: 660px;
margin: 0 auto;
}
#footer .img {
float: right;
padding-top:15px;
}
#footer ul {
text-align:left;
padding-top:15px;
}
#footer ul li {
display:inline;
color:#57247b;
}
#footer ul li a {
letter-spacing:normal;
text-decoration:none;
color:#57247b;
}
#footer ul li a:hover {
color:#000;
}
I'm not sure about how they've set up IE9 but I know that IE8 automatically turned on compatibility mode for any site in the 'intranet' zone. Could it be that when you are viewing the site on your local machine you are in this zone and therefore compatibility mode is enabled?