My template looks pretty much the way I want it on my desktop but when I load it on my phone in either view the navigation on the left side does not resize to fit like the rest of the page does. You can view the layout at http://www.mytournamentonline.com/work/template3.php.
I would appreciate any help. Some of the css items may be redundant but I though tit was working then realized it was not displaying properly on my phone so I've tried all kinds of updates to get it working.
<style>
body {
background-color: #666;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
#container {
width: 80%;
margin: 0 auto;
background-color:#12295d;
border:5px solid #a6c250;
}
#header img {
width:100%;
margin:auto;
height: auto;
}
#content {
float:right;
width:81%;
background-color:#FFFFFF;
border-left:5px solid #a6c250;
min-height:350px;
}
#sidebar {
float:left;
width:18%;
}
#primary {
float: left;
width: 98%;
background-color:#245192;
border-top: 0;
}
/* nav */
nav {
background-color:#245192;
width:100%;
float:left;
height:inherit;
}
/* navigation button styles */
a.btn {
display: block;
width: 100%;
padding: 10px 0px 10px 10px;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #ffffff;
text-shadow: -1px -1px 2px #618926;
background: -moz-linear-gradient(#98ba40, #a6c250 35%, #618926);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #98ba40),color-stop(.35, #a6c250),color-stop(1, #618926));
border: 1px solid #618926;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
a.btn:hover {
text-shadow: -1px -1px 2px #465f97;
background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
border: 1px solid #0f2557;
}
.currentpage {
display: block;
width: 100%;
padding: 10px 0px 10px 10px;
font-family: Arial;
font-size: 1.5em;
text-decoration: none;
color: #ffffff;
text-shadow: -1px -1px 2px #465f97;
background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
border: 1px solid #0f2557;
}
#footer {
clear:both;
clear: both;
text-align:center;
width:100$;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #DCF414;
border-top: 5px solid #a6c250;
background-color: #12295d;
}
</style>
<body>
<div id="container">
<div id="header">
<img src="images/New_header_700_150.jpg" alt="My Tournamentonline Header" />
</div>
<div id="content">
<div style="padding:10px;">
<p>Main content</p>
</div>
</div>
<div id="sidebar">
<div id="primary">
<nav>
<?php
function curPageName() {
return substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
}
?>
<a href="index.php" class=<?php if (curPageName() == 'index.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Home</a>
<a href="tournaments.php" class=<?php if (curPageName() == 'tournaments.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Active Tournaments</a>
<a href="club_reg.php" class=<?php if (curPageName() == 'club_reg.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Club Registration</a>
<a href="login.php" class=<?php if (curPageName() == 'login.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Member Login</a>
<a href="contactUs.php" class=<?php if (curPageName() == 'contactUs.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Contact Us</a>
</nav>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
You can use media query for you requirement. You can also change some layout to fill in the mobile device.
Try the below code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: #666;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
#container {
width: 80%;
margin: 0 auto;
background-color:#12295d;
border:5px solid #a6c250;
}
#header img {
width:100%;
margin:auto;
height: auto;
}
#content {
float:right;
width:81%;
background-color:#FFFFFF;
border-left:5px solid #a6c250;
min-height:350px;
}
#sidebar {
float:left;
width:18%;
}
#primary {
float: left;
width: 98%;
background-color:#245192;
border-top: 0;
}
/* nav */
nav {
background-color:#245192;
width:100%;
float:left;
height:inherit;
}
/* navigation button styles */
a.btn {
display: block;
width: 100%;
padding: 10px 0px 10px 10px;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #ffffff;
text-shadow: -1px -1px 2px #618926;
background: -moz-linear-gradient(#98ba40, #a6c250 35%, #618926);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #98ba40),color-stop(.35, #a6c250),color-stop(1, #618926));
border: 1px solid #618926;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
a.btn:hover {
text-shadow: -1px -1px 2px #465f97;
background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
border: 1px solid #0f2557;
}
.currentpage {
display: block;
width: 100%;
padding: 10px 0px 10px 10px;
font-family: Arial;
font-size: 1.5em;
text-decoration: none;
color: #ffffff;
text-shadow: -1px -1px 2px #465f97;
background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
border: 1px solid #0f2557;
}
#footer {
clear:both;
clear: both;
text-align:center;
width:100$;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #DCF414;
border-top: 5px solid #a6c250;
background-color: #12295d;
}
#media screen and (max-width:680px) {
#sidebar {
float:none;
width:100%;display: block;
}
#content {
float:none;
width:100%;
}
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<img src="http://www.mytournamentonline.com/work/images/New_header_700_150.jpg" alt="My Tournamentonline Header" />
</div>
<div id="content">
<div style="padding:10px;">
<p>Main content</p>
</div>
</div>
<div id="sidebar">
<div id="primary">
<nav>
<?php
function curPageName() {
return substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
}
?>
<a href="index.php" class=<?php if (curPageName() == 'index.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Home</a>
<a href="tournaments.php" class=<?php if (curPageName() == 'tournaments.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Active Tournaments</a>
<a href="club_reg.php" class=<?php if (curPageName() == 'club_reg.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Club Registration</a>
<a href="login.php" class=<?php if (curPageName() == 'login.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Member Login</a>
<a href="contactUs.php" class=<?php if (curPageName() == 'contactUs.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Contact Us</a>
</nav>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body></html>
Use the media query to control the mobile view. start with the #container set width:100% . and in your Html I would suggest moving the sidebar div above the content div then swapping the floats.
Also, i would suggest setting width:100% on all #container > div.
Look into bootstrap link here
You can use media query as like below
#media only screen and (max-width: 768px) {
/* For mobile phones: */
body {
width: 100%;
}
/* customize the tag, class, id's according to your requirement */
.class{
}
<tag>{
}
#id's{
}
if the width is below 768px then you can make use of above media queries.
I have tried absolute to my footer to stay on the bottom of the page but it covers up the elements that are already at the bottom instead of going underneath them. Fixed does the similar thing except if the page is longer it will cover up elements in the center of the page. I literally just want the backgound color of my div to extend to the bottom of the page and have my logo and text stay in between the div at a set height. Here's what I've got.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css"/>
<title>
</title>
<div class="heading">
<img src="Images/Redbird.gif" alt="Redbird" style="float:left; padding-left:15px; padding-top:15px; width:150px;height:90px">
<form>
Search:
<input type="search" name="Search" style="float:right;">
</form>
<br></br>
<button type="button" id="Login">Login</button>
<button type="button" id="Login">Create New Account</button>
<h1>Technology Blog</h1>
<a href="index.html">
<img src="Images/House.png" alt="Home" style="width:35px; height:35px;">
</a>
</div>
<div class="table">
<table style+"width:100%">
<tr>
<td>Phones & Tablets</td>
<td>Computers & Laptops</td>
<td>Internships</td>
<td>Troubleshooting</td>
<td>Product Ratings & Reviews</td>
</tr>
</table>
</div>
</head>
<body>
<div class="Welcome">
<h2>Welcome</h2>
<p>Welcome to Illinois State University's Technology Blog. Here you can view and post questions, answers, reviews, and other information that is related to technology. This website is for Illinois State University Students ONLY! You must sign in or create an account to view or post on this website.</p>
</div>
<div class="Slideshow">
<img src="Images/DellComps.jpg" alt="Computers" style="width: 397px; height: 298px">
</div>
</body>
<div class="Footer">
<img src="Images/Seal.png" alt="ISU Seal" style="width: 40px; height: 40px; padding-bottom: 10px; padding-top: 10px">
Copyright 2014 # TEC 319 Group <br/> Illinois Sate University
</div>
</html>
heres the CSS. I only need to edit the .Footer tag i believe
html{
height: 100%;
position: relative;
}
h1{
text-align: center;
font-family: impact;
font-style: italic;
}
.heading{
background-color: #CA0000;
height:150px;
}
td{
border:5px solid black;
text-align:center;
background-color:#790000;
color:white;
padding:10px;
font-family: helvetica;
font-style: italic;
font-size: 15px;
}
table{
width:100%
}
.table{
background-color:black;
height:53px;
}
form{
float:right;
}
button{
float:right;
}
.Slideshow img{
display: block;
position: center;
margin-left: auto;
margin-right: auto;
}
.Footer img{
display: block;
position: center;
margin-left: auto;
margin-right: auto;
}
.Footer{
margin-top: 40px;
text-align: center;
background-color: #D8D8D8;
padding-bottom: 20px;
width: 100%;
}
.Preview td{
display: block;
text-align: left;
color: black;
background-color: white;
}
.Blog td{
display: block;
text-align: left;
color: black;
background-color: white;
border: 0px;
}
.newPost h2{
display: block;
position: center;
margin-left:auto;
margin-right: auto;
vertical-align: middle;
color: white;
background-color: #790000;
border: 5px solid black;
border-collapse: collapse;
width: 250px;
text-align: center;
}
h3 {
color: white;
background-color: #790000;
border: 5px solid black;
}
h4{
text-align: left;
font-size: 14pt;
color:#790000
}
.back h2{
display: block;
position: left;
border:5px solid black;
background-color:#790000;
color:white;
padding:10px;
font-family: helvetica;
font-style: italic;
font-size: 15px;
width: 100px;
}
form.comment{
float:left;
size
}
a.blogTitle:link {
color: #790000;
text-decoration: none;
}
a.blogTitle:visited{
color: #790000;
text-decoration: none;
}
a.blogTitle:active{
color: #790000;
text-decoration: none;
}
a.blogTitle:hover{
color: #CA0000;
text-decoration: none;
}
a:link {
color: white;
text-decoration: none;
}
a:visited{
color: white;
text-decoration: none;
}
a:active{
color: white;
text-decoration: none;
}
a:hover{
color: #CA0000;
text-decoration: none;
}
You need to set the footer position to relative to have it respect other elements on the page. Both absolute and fixed remove the element from the page flow, which causes overlapping.
Demo
Change position:relative to fixed in the demo CSS and then uncomment bottom to see the difference. You can also play with height on the body tag to see how behavior changes.
<div id="content">
<p>Content</p>
</div>
<div id="footer">
<p>Footer stuff</p>
</div>
body {
margin:0;
padding:0;
}
#content {
height:1200px;
width:100px;
background-color:#eee;
position:relative;
margin:0;
padding:0;
border:1px solid black;
}
#footer {
width:100px;
position:relative;
/* bottom:0; */
background-color:#eee;
margin:0;
padding:0;
border:1px solid black;
}
Hi i have coded my news content of my wordpress blog, i made the content float right and the date and comments float left of the conten, now it is floating perfectly except for one thing.
The date and comments for the first post is aligned but the date and comments for the second post is also aligned with the first post, when it should be aligned with the second post. and the date and comments under the second post is suppose to be for the third post, which leaves the last post without date time or comments. Example below.
here is my css
#content {
width: 1070px;
}
.right{
position:relative;
float:right;
right:215px;
}
.left{
position:relative;
float:left;
left:200px;
display:block;
}
.date{
width:80px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
clear:left;
}
.month {
color:#fff;
font-size:15px;
font-family:eurofurence;
text-transform:uppercase;
}
.year {
color:#fff;
padding:0 0 7px 0;
font-size:30px;
font-family:eurofurence;
text-transform:uppercase;
}
.commentbubble{
background: url('http://bleedartmedia.com/mock/wp-content/themes/KellyRowland/images/commentb.png') no-repeat;
width:40px;
height:49px;
padding:4px 0 0 14px;
}
.entry {
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 10px;
border-bottom: 0px solid #cccccc;
font-family:eurofurence;
font-size:17px;
width:610px;
background:#000;
}
.entry-top {
margin: 0 0 0px 0;
padding: 0 0 0px 0;
text-align: left;
}
.entry-top .entry-title {
color: #fff;
font-family:eurofurence light;
font-size:28px;
}
.entry-top .entry-author {
font-style: italic;
}
.entry-title {
margin: 0;
padding: 0;
font-size: 1.3em;
font-weight: bold;
line-height: normal;
font-stretch: narrower;
}
.entry-title a:link,
.entry-title a:visited {
color: #fff;
font-family:eurofurence light;
font-size:28px;
}
.entry-title a:hover {
color: #3E7AB9;
text-decoration: none;
}
.entry-content {
margin: 10px 0 10px 0;
padding: 0px 10px 10px 10px;
font-family:eurofurence;
font-size:17px;
}
and here is my coding
<div id="content">
<?php while ( have_posts() ) : the_post() ?>
<div class="date left">
<div class='month'><?php the_date('M');?></div>
<div class='year'><?php the_time('d');?></div>
<div class="commentbubble">
<?php comments_popup_link( __( '0', 'wpbx' ), __( '1', 'wpbx' ), __( '%', 'wpbx' ) ) ?>
</div>
Comments
</div>
<div class="entry right">
<div class="entry-top">
<h2 class="entry-title"><?php the_title() ?></h2>
</div>
<div class="entry-content clearfix">
<div class="entry-content">
<div id="text"><?php the_content() ?></div>
</div>
</div>
<div class="entry-meta">
</div>
</div><!-- .post -->
<br>
<?php endwhile; ?>
</div><!-- #content -->
Anyone have a solution
I'm guessing your php while loop starts outside of the shown html? What I would do here is make sure that you contain your date-left and entry-right in a single div, and use the php while to repeat the div. I think all you'll have to do is find where your while loop starts, add a div, and then right before it ends add a closing div.
<loop start>
<div>
....(divs containing entry and date here)
</div>
<loop end>
Try adding this to clear the float:
.date.left { clear: left; }
I have a simple layout and the logo appears to be different in firefox and I can't seem to get an even medium in all browsers as when I change the height of the letter 'f' in the blue box it effects all browsers.
The issue i am having is with the div "logofoxfont" as I want the letter 'f' to be in the same position in all broswers but it appears to be different in firefox.
How can I sort this?
<html>
<head>
</head>
<link href="fw.css" rel="stylesheet" type="text/css">
<body>
<div class="topbox">
<div class="logobox"><div class="logoboxfont">
f</div></div>
<div class="logotext"></div>
</div>
<div class="midbox">
<div class="menubox"><div class="menuboxfont">Home<br>About Us<br>Staff<br>News<br></div>
<div class="menubox2"><div class="menuboxfont2">Appointments<br>
Price Guide<br>Emergency Services<br>Feedback<br></div></div></div>
</div>
</body>
</html>
And the css is:
#logo{
background-image:url(40.jpg);
height:100px;
width:100px;
}
.topbox {
margin: 0px auto;
height:100px;
width:900px;
margin-top:0px;
background: #ffffff;
}
.logobox {
height:90px;
width:70px;
margin-top:10px;
background-color:#2FB2F4;
}
.logotext {
color: #333333;
font-family: Cambria;
font-size: 18px;
margin-top: -90px;
margin-left: 75px;
position:absolute;
}
#logotext1 {
margin-left:10px;
}
#logotext2 {
color: #00AAF5;
font-family: georgia;
font-size: 22px;
margin-top: -35px;
margin-left:10px;
}
.logoboxfont {
font-family:Cambria;
color: #ffffff;
font-size: 126px;
position:absolute;
margin-top:-20px;
margin-left:0px;
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-o-transform:rotate(10deg);
-ms-transform:rotate(10deg);
}
.midbox {
margin: 0px auto;
height:700px;
width:900px;
margin-top:0px;
background: #ffffff;
border-top: 1px solid #333333;
}
.menubox {
height:230px;
width:150px;
margin-top:10px;
background: #E6E6E6;
}
.menuboxfont {
color: #333333;
font-family:lucida grande;
font-size: 12px;
margin-top: 4px;
margin-left: 4px;
position:absolute;
}
.menubox2 {
height:160px;
width:150px;
margin-top:70px;
background: #FAFAFA;
position:absolute;
}
.menuboxfont2 {
color: #333333;
font-family:lucida grande;
font-size: 12px;
margin-top: 4px;
margin-left: 4px;
position:absolute;
}
Thanks for the help!
James
See fiddle for code and demo:
Fiddle: http://jsfiddle.net/kHtmf/1/
Demo: http://jsfiddle.net/kHtmf/1/embedded/result/
SS of Firefox:
SS of chrome:
SS of Safari:
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?