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.
Related
making a web page and the main page is to wide and shows the scroll bars. have tried everything I can think of.
this is the url for the site www.sfbblag.com
here is the css`
/* start of Blaynes Code! */
html {
background: url(images/bg.png) no-repeat center center fixed ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
body{
margin: 0px;
padding: 0px;
}
#Content {
width:100%;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
#menu {
width: 100%;
height: 35px;
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
border-radius: 8px;
}
#menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#menu li {
display: inline;
}
#menu a {
text-decoration: none;
color:#F90;
padding: 8px 8px 8px 8px;
}
#menu a:hover {
color:#FFFFFF ;
background-color: #000000;
}
#menuside {
width: 100%;
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
border-radius: 8px;
float:right;
}
#menuside ul {
padding: 8px 0px;
margin: 0px;
list-style-type: none;
margin: 0;
padding: 0;
}
#menuside li {
width:100%;
height:30px;
display: block;
text-align:left;
}
#menuside a {
text-decoration: none;
color:#F90;
padding: 8px 8px 8px 8px;
}
#menuside a:hover {
color:#FFFFFF ;
}
#header {
width:100%;
height:180px;
position:absolute;
text-align:center;
background-color: rgba(3, 3, 3, 0.9); /* Color white with alpha 0.9*/
position:fixed;
top: 0px;
float:left;
}
#header1 {
width:20%;
float:left;
display: inline-block;
box-shadow: 10px 10px 5px #888888;
}
#header2 {
width:46%;
float:left;
display: inline-block;
box-shadow: 10px 10px 5px #888888;
}
#header3 {
width:33%;
float: left;
display: inline-block;
box-shadow: 10px 10px 5px #888888;
}
#header3a {
width:100%;
height:25%;
float:left;
color:#0000FF;
box-shadow: 10px 10px 5px #888888;
}
#header3b {
width:100%;
height:75%;
float:left;
box-shadow: 10px 10px 5px #888888;
}
#header4 {background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
width:100%;
float: left;
box-shadow: 10px 10px 5px #888888;
}
#clock { color:#ffffff;
font:Arial, Helvetica, sans-serif;
}
#navbar {
width:100%;
float:left;
height:10%;
color:#FFFFFF;
text-align:center;
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
box-shadow: 10px 10px 5px #888888;
}
#contentholder {
box-shadow: 10px 10px 5px #888888;
width:50%;
height:60%;
position:fixed;
}
#contentleft {
display:inline;
width:20%;
float:left;
border:#0a61a6;
box-shadow: 10px 10px 5px #888888;
}
#contentleft1 {
height:40%;
}
#contentleft2 {
width:20%;
height:20%;
}
#contentleft3 {
height:20%;
width:100%;
}
#contentleft4 {
height:20%;
width:100%;
}
#containercenter {
box-shadow: 10px 10px 5px #888888;
height:100%;
display:inline;
width:50%;
float:left;
}
#containercenter1 {
color:#FFFFFF;
height:33%;
width:100%;
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
padding-left:5px;
font-size: 14px;
font:"Times New Roman", Times, serif;
font-weight: bold;
text-align: center;
}
#containercenter2 {
height:33%;
width:100%;
background-color:#0a61a6;
font-size: 14px;
font:"Times New Roman", Times, serif;
font-weight: bold;
text-align: center;
top: 400px;
}
#containercenter3 {
height:33%;
width:100%;
background-color:#0a61a6;
}
#contentright {
box-shadow: 10px 10px 5px #888888;
float:left;
height:100%;
width:30%;
display:inline;
}
#contentright1 {
float:left;
height:25%;
width:100%;
text-align:center;
}
#contentright2 {
float:left;
height:25%;
width:100%;
margin-top: 20px;
}
#contentright3 {
float:left;
height:25%;
width:100%;
margin-top: 20px;
}
#contentright4 {
float:left;
height:25%;
width:100%;
margin-top: 20px;
margin-bottom: 20px;
}
#inputbox {
height: 33%;
}
#slider {
box-shadow: 10px 10px 5px #888888;
width:100%;
float:left;
}
#slider1 {
float:left;
width:33%;
display:inline;
}
#slider2 {
float:left;
width:33%;
display:inline;
}
#slider3 {
float:left;
width:33%;
display:inline;
}
#footer{
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
float:left;
width:100%;
height:5%;
}
#footermenu{
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
float:left;
width:100%;
height:5%;
}
/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */
/*------------------------------------*\
NAV
\*------------------------------------*/
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left; /* Clear floats */
width:100%;
/* Bring the nav above everything else--uncomment if needed.
position:relative;
z-index:5;
*/
}
#nav li{
float:left;
position:relative;
}
#nav a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#nav a:hover{
color:#dfaa09;
background:#6b0c36;
text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background:#6b0c36;
text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background:#333;
}
#navContainer {
box-shadow: 10px 10px 5px #888888;
margin:0;
padding:0;
text-align:left;
width:50%;
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: left;
text-shadow: 3px 2px 3px #333333;
}
#navContainer ul{
margin:0;
padding:0;
list-style:none;
}
#navContainer ul li {
position:relative;
}
#navContainer ul li span{
display:block;
background:url(images/blueVertNav/buttonLeft.png) top left no-repeat;
}
#navContainer ul li a{
text-decoration:none;
font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;
display:block;
padding:8px;
background:url(images/blueVertNav/buttonRight.png) top right no-repeat;
}
#navContainer ul li span:hover {
background:url(images/blueVertNav/hoverLeft.png) top left no-repeat;
}
#navContainer ul li a:hover{
background:url(images/blueVertNav/hoverRight.png) top right no-repeat;
}
#navContainer ul ul{
position:absolute;
display:none;
}
#navContainer ul ul li a{
background:#bec8cb;
}
#navContainer ul li:hover ul{
width:80%;
position:relitive;
display:block; left:100%;
top:0;
}
/* end of Blaynes Code! */
form {
background: #fafafa;
padding: 20px;
margin: 0 auto;
border: 1px solid #ffe2e3;
}
form div {
/* Float containment */
overflow: hidden;
}
/* Things are looking good now, onto the main input field
styling now! */
/*
Lets change the box model to make the label and input
contain into the 100% div.
You might want to specify the box sizing properties inside
`* {}` at the top.
Things are looking great now! Lets just spice it up a bit.
*/
form label, form input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form label {
font-weight: bold;
background: linear-gradient(#f1f1f1, #e2e2e2);
padding: 5px 10px;
color: #444;
border: 1px solid #d4d4d4;
/* lets remove the right border */
border-right: 0;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
line-height: 1.5em;
width: 30%;
/* takes the width properly now and also the
spacing between the label and input field got removed. */
float: left;
text-align: center;
cursor: pointer;
}
/* The label is looking good now. Onto the input field! */
/*
Everything is broken now! But we can fix it. Lets see how.
*/
form input {
width: 70%;
padding: 5px;
border: 1px solid #d4d4d4;
border-bottom-right-radius: 5px;
border-top-right-radius: 4px;
line-height: 1.5em;
float: right;
/* some box shadow sauce :D */
box-shadow: inset 0px 2px 2px #ececec;
}
form input:focus {
/* No outline on focus */
outline: 0;
/* a darker border ? */
border: 1px solid #bbb;
}
/* Super! */
/*New additions to css main sheet*/
#board{
width:60%;
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
outline-color: #000066;
color: #000000;
border: 4;
border-color: #000000;
box-shadow: 10px 10px 5px #888888;
}
#example4 {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
font-size: 9px;
font-weight: normal;
}
`
and here is the html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Content-Script-Type" content="text/javascript">
<title>SFBBL AG TRUST</title>
<link rel="stylesheet" type="text/css" href="maintestafix.css"/>
<style type="text/css">
<!--
.style3 {color: #FFFFFF}
-->
</style>
</head>
<body>
<!-- start of Header -->
<div id="header">
<div id="header1">
<div align="left">
<p><img src="Switzerland Flag.png" width="15%" /> </p>
<p class="style3"> </p>
</div>
</div>
<div id="header2">
<div align="center">
<img src="images/01-SFBBL.png" width="100%" />
</div>
</div>
<div id="header3">
<div id="header3a">
<div id="clock" align="right" >
<script type="text/javascript">
document.write ('<p>Current time is: <span id="date-time">', new Date().toLocaleString(), '<\/span>.<\/p>')
if (document.getElementById) onload = function () {
setInterval ("document.getElementById ('date-time').firstChild.data = new Date().toLocaleString()", 50)
}
</script>
</div>
</div>
<div id="header3b">
<div align="center">
<img src="Trust_LH.jpg" width="30%" border="0" />
</div>
</div>
</div>
<div id="header4" >
<!-- Start of Top Menu -->
<div id="navbar">
<div id="menu">
<ul>
<li>Home</li>
<li>Bank Accounts</li>
<li>Credit Cards</li>
<li>Our Board</li>
<li>News</li>
<li>Products</li>
<li>Investments</li>
<li>Banking Options</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- End of Top Menu -->
</div>
</div>
<!-- End of Header -->
<div class="clear"></div>
<!-- Start of Main Content -->
<div id="content" >
<div id="contentleft">
<div id="contentleft1">
<img src="images/blueVertNav/spacer.png" />
<img src="images/blueVertNav/spacer.png" />
<div id="menuside">
<ul>
<li>Log in</li>
<li>Resources</li>
<li>Branches</li>
<li>Calculator</li>
<li>Talk to us</li>
</ul>
</div>
</div>
<div id="contentleft2">
<!-- Start FreeStockCharts.com WatchList Widget -->
<p width="100%" align="left">
<iframe width="160" height="120" scrolling="no" frameborder="0" style="border:none;" src="http://widgets.freestockcharts.com/WidgetServer/WatchListWidget.aspx?sym=DIA,NYSE,COMPQX,SPY&style=WLBlueStyle&w=160">
</iframe>
</p>
<!-- End FreeStockCharts.com WatchList Widget -->
</div>
<div id="contentleft3">
<!-- Start FreeStockCharts.com WatchList Widget -->
<p width="100%" align="left">
<iframe width="160" scrolling="no" frameborder="0" style="border:none;" src="http://widgets.freestockcharts.com/WidgetServer/WatchListWidget.aspx?sym=EUR/USD,USD/JPY,GBP/USD,USD/CAD,AUD/USD&style=WLBlueStyle&w=200">
</iframe>
</p>
<!-- End FreeStockCharts.com WatchList Widget -->
</div>
</div>
<div class="clear"></div>
<div id="containercenter" >
<div id="containercenter1">
<div>
<img src="images/blueVertNav/spacer.png" />
<img src="images/blueVertNav/spacer.png" />
</div>
<div align="center">
<p align="left">The purpose of SFBBL Trust AG is to provide creative, working solutions to qualified governments, projects, companies and individuals through the detailed comprehension and proper leveraging of usable assets, acquisition of adjustable collateral, debt reduction hedge strategies and opportunity analysis of changing market conditions, while furthering local and global communities to better living conditions.
</p>
</div>
<div>
<p align="left">Accounts, Cards and Payments<br />
Asset Management and Investments<br />
Private Client and Institutional Client Solution
</p>
</div>
<div><img src="images/blueVertNav/spacer.png" width="100%"/>
</div>
<div align="left">
<p><img src="images/blueVertNav/currentevents.png" width="100%" />
</p>
<p> </p>
<p>SFBBL is proud to announce our merger with Trust Bank, presently in eleven locations and expanding in Dubai, London and Vienna. Trust Bank has been an established fully operational Bank conducting full banking business for the last 20 years. SFBBL provides, The Private Client Premier Division which is the core focus of the addition of SFBBL, providing a select clientele with a niche portfolio of private banking solutions. Our premier services allow clients to access and securitize liquid capital as well as assets, internationally with great ease. Our account holders have access to a large number of private banking services including our three primary areas of service.
</p>
</div>
<div id="example4"><img src="images/blueVertNav/spacer.png"width="100%" />
</div>
<div><img src="images/blueVertNav/askusaquestion.png" width="100%" border="0" />
</div>
<div><img src="images/blueVertNav/spacer.png"width="100%" />
</div>
</div>
</div>
<div id="contentright">
<div id="contentright1">
<img src="images/blueVertNav/spacer.png" />
<img src="images/blueVertNav/spacer.png" />
<!-- Exchange Rates Script - EXCHANGERATEWIDGET.COM -->
<div style="width:100%;border:1px solid #040442;text-align:left;">
<div style="text-align:left;background-color:#0A61A6;width:100%;border-bottom:0px;height:16px; font-size:12px;font-weight:bold;padding:5px 0px;">
<div align="center"><span style="margin-left:2px;background-image:url(http://www.exchangeratewidget.com/flag.png); background-position: 0 -1232px; width:100%; height:15px; background-repeat:no-repeat;padding-left:5px;">
<a href="http://www.exchangeratewidget.com/" target="_blank" style="color:#FFFFFF; text-decoration:none;padding-left:22px;">
US Dollar Exchange Rates</a>
</span>
</div>
</div>
<script type="text/javascript" src="http://www.exchangeratewidget.com/converter.php?l=en&f=USD&t=EUR,GBP,JPY,CHF,CAD,AUD,CNY,ZAR,RUB,BRL,HKD,MXN,&a=1&d=0A61A6&n=FFFFFF&o=FCF4F4&v=5">
</script>
</div>
<!-- End of Exchange Rates Script -->
</div>
<div id="contentright2">
<!-- Currency Converter Script - EXCHANGERATEWIDGET.COM -->
<div style="width:100%;border:1px solid #0A61A6;"><div style="text-align:center;background-color:#0A61A6;width:100%;font-size:13px;font-weight:bold;height:18px;padding-top:2px;">
<div align="center">
Currency Converter
</div>
</div>
<script type="text/javascript" src="http://www.exchangeratewidget.com/converter.php?l=en&f=USD&t=EUR&a=1&d=0A61A6&n=FFFFFF&o=FAF2F2&v=1">
</script>
</div>
<!-- End of Currency Converter Script -->
<div id="contentright3">
<div align="center">
<img src="images/MrPrivateMortgage_DreamHome.jpg" width="95%" />
</div>
</div>
<div id="contentright4">
<div align="center"></div>
</div>
</div>
</div>
<!-- End of Main Content -->
</div>
<!-- Start of Pic Slider -->
<!-- End of Pic Slider -->
<div class="clear"></div>
<!-- Start of Stock ticker -->
<div id="footer">
<div align="center">
<!-- START Worden Top Gainers Ticker Widget -->
<script src="http://widgets.freestockcharts.com/js/jquery-1.3.1.min.js" type="text/javascript">
</script>
<script src="http://widgets.freestockcharts.com/script/WBIHorizontalTicker2.js?ver=12334" type="text/javascript">
</script> <link href="http://widgets.freestockcharts.com/WidgetServer/WBITickerblue.css" rel="stylesheet" type="text/css" />
<script>
var gainTicker = new WBIHorizontalTicker('gainers');
gainTicker.start();
</script>
<!-- End Scrolling Ticker Widget -->
</div>
</div>
<!-- End of Stock ticker -->
<div class="clear"></div>
<!-- Start of bottom menu -->
<div id="navbar">
<div id="menu">
<ul>
<li>Home</li>
<li>Privacy</li>
<li>Security</li>
<li>Copyright</li>
</ul>
</div>
</div>
<!-- End of bottom menu -->
<div id="header4" >
<p align="left" class="style3">
SFBBL is not a brick and mortar depository institution.
Our services are reserved for Private Banking clientele and qualified institutional investors.
SFBBL DOES NOT PROVIDE TAX ADVICE OF ANY KIND.
IT IS THE CUSTOMER'S RESPONSIBILITY TO COMPLY WITH THEIR COUNTRY'S TAX.
SFBBL IS A REGISTERED SWISS TRUST COMPANY. SFBBL IS NOT A REGISTERED BANK
</p>
</div>
<script>
var timeOnSlide = 3,
timeBetweenSlides = 2,
animationstring = 'animation',
animation = false,
keyframeprefix = '',
domPrefixes = 'Webkit Moz O Khtml'.split(' '),
pfx = '',
slidy = document.getElementById("slidy");
if (slidy.style.animationName !== undefined) { animation = true; }
if ( animation === false ) {
for ( var i = 0; i < domPrefixes.length; i++ ) {
if ( slidy.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
pfx = domPrefixes[ i ];
animationstring = pfx + 'Animation';
keyframeprefix = '-' + pfx.toLowerCase() + '-';
animation = true;
break;
} } }
if ( animation === false ) {
// animate using a JavaScript fallback, if you wish
} else {
var images = slidy.getElementsByTagName("img"),
firstImg = images[0],
imgWrap = firstImg.cloneNode(false);
slidy.appendChild(imgWrap);
var imgCount = images.length,
totalTime = (timeOnSlide + timeBetweenSlides) * (imgCount - 1),
slideRatio = (timeOnSlide / totalTime)*100,
moveRatio = (timeBetweenSlides / totalTime)*100,
basePercentage = 100/imgCount,
position = 0,
css = document.createElement("style");
css.type = "text/css";
css.innerHTML += "#slidy { text-align: left; margin: 0; font-size: 0; position: relative; width: " + (imgCount * 100) + "%; }";
css.innerHTML += "#slidy img { float: left; width: " + basePercentage + "%; }";
css.innerHTML += "#"+keyframeprefix+"keyframes slidy {";
for (i=0;i<(imgCount-1); i++) {
position+= slideRatio;
css.innerHTML += position+"% { left: -"+(i * 100)+"%; }";
position += moveRatio;
css.innerHTML += position+"% { left: -"+((i+1) * 100)+"%; }";
}
css.innerHTML += "}";
css.innerHTML += "#slidy { left: 0%; "+keyframeprefix+"transform: translate3d(0,0,0); "+keyframeprefix+"animation: "+totalTime+"s slidy infinite; }";
document.body.appendChild(css);
}
</script>
</body>
</html>
thanks in advance
you can use body{overflow-x: hidden;} in your CSS. However, I'd recommend restructuring your page so that the page isn't ~1500px wide.
Cheers!
Try to use this:
#content{
overflow-x: hidden;
}
#slider {
float: left;
overflow-x: hidden;
width: 100%;
}
#footer {
background-color: rgba(3, 3, 3, 0.7);
float: left;
height: 5%;
width: 99.9%;
}
Cheers!
I want to center align logo image of my wordpress theme, I've tried to do so but failed;
Here's the CSS for Header Area
/* Header
-------------------------------------------------------------- */
.logo { float:left; width:370px; margin-bottom: 10px; }
.logo .logo-text { color:#595959; font-size:58px; line-height: 54px; font-family:Georgia; }
.logo .logo-text:hover { color:#575757; text-decoration: none;}
#search { float:left; width:235px; text-align: left; margin-bottom: 10px; }
#search #site-description { line-height: 11px; margin-bottom: 1px; font-size: 11px;}
#search input[type="text"] { width:190px; color:#828282; font-size:11px; padding-right: 30px; }
#search input:focus{ border: 1px solid #acacac;}
#search input[type="submit"] { color: #818181; }
#search input[type="submit"]:hover{ color: #FF4949; }
#search .button { margin-left:-30px; padding:0; border:none; background: none; }
#search .button span { color:#828282; background: none; text-transform: uppercase; }
#top-cart { text-align: right; float:right; position: relative; padding:1px 20px 5px 0; background: url(images/shopping-bag.png) no-repeat top right; width:280px; line-height: 16px;}
#top-cart > a{ color:#818181;}
#top-cart .mobile-link { display: none; position: absolute; width: 100%; height: 100%; text-indent: -9999em;}
#top-cart .dark-span .amount { color:#090909; font-size: 12px;}
#top-cart .cart-popup { display:none; width:295px; text-align: left; padding:20px 15px 15px 15px; border:1px solid #acacac; background: white url(images/line3.png) repeat-x top; position: absolute; z-index:10001; right:0; top:20px;}
#top-cart .cart-popup .empty { text-align: center;}
#top-cart .cart-popup .recently-added { font-size:10px; text-transform: uppercase;}
#top-cart .cart-popup .totals .amount, #top-cart .cart-popup .totals { font-family: Verdana; clear: both; padding:5px 0; margin-bottom: 10px; font-size:14px; text-transform: uppercase; text-align: right; color:#818181; }
#top-cart .cart-popup .totals .amount{ color:#090909; }
#top-cart .amount { font-size:14px; font-weight: normal; color:#FF4949;}
#top-cart .cart-popup .totals .price { font-size:14px; font-weight: normal; color:#090909;}
#top-cart .cart-popup .button { }
#links { text-align: right; float:right; width:280px; margin-top:3px; margin-bottom: 10px;}
.links li { padding:3px 0 3px 17px; background: url(images/link-divider.png) no-repeat center left; display:inline-block;}
.links li:first-child { background: none; }
.entry-title,.page-title { font-size:24px; font-weight:normal; padding-top: 5px;color: #090909 !important; }
.page-description { padding:40px 0; border:1px solid #efefef; border-right:0; border-left:0; margin:10px 0 30px 0; font-size:32px; line-height:40px; font-weight:normal; h1.notFound { font-size:48px; }
h1.notFound strong{ color: #FF4949 }
.error404 { padding:0 0 20px 0; }
I've tried text-align:center but failed to center align.
HTML Code:
<header id="header">
<div id="search">
<div id="site-description"><?php bloginfo( 'description' ); ?></div>
<?php get_search_form(); ?></div>
<div class="logo">
<?php $logoimg = etheme_get_option('logo'); ?>
<?php if($logoimg): ?>
<img src="<?php echo $logoimg ?>" alt="<?php bloginfo( 'description' ); ?>" />
<?php else: ?>
<?php bloginfo( 'name' ); ?>
<?php endif ;?></div>
<div class="cart-wrapper">
<?php if(class_exists('Commerce') && etheme_get_option('just_catalog')!=1 && etheme_get_option('cart_widget')): ?>
<a class="mobile-link" href="<?php echo wpsc_cart_item_url(); ?>"></a>
<div id="top-cart" class="shopping-cart-wrapper">
<?php get_template_part( 'cart_widget' ); ?></div>
<?php endif ;?>
<?php if(class_exists('-') && etheme_get_option('just_catalog')!=1 && etheme_get_option('cart_widget')): ?>
<?php global $c?>
<a class="mobile-link" href="<?php echo $c->cart->get_cart_url(); ?>"></a>
<div id="top-cart" class="shopping-cart-wrapper widget_shopping_cart">
<?php $cart_widget = new Cart(); $cart_widget->widget(); ?>
</div>
<?php endif ;?></a></div>
</header>
I need suggestions on how to center align the logo image.
Thanks
Regards
Remove the float and the make the width 100% for the logo class. That is if you want your logo to fill up the width of your page/container.
.login{
width:100%;
text-align:center;
margin-bottom:10px;
}
If you have other elements/divs on either side of the logo, then you will need to calculate the width of the logo container, and do a text-align:center.
Can you provide your site URL, I have to see on site how the logo is aligned.
Normally what you need to do is split all menu items(ul>li) by two. Lets assume you have 6 Menus, to do so, align the first item to more left and then shift the 4th Menu more right, By this you will make space for the logo in the middle.
Now Shift your logo to the middle by css rule: left:10% (% will make it Responsive, you may also use 10px).
If you can provide site url, i can provide you exact rule.
very new to code and all this, i am trying to make a simple page with html and css for class. Basically the problem is there is a space between the picture div and the menu div, you can see if you check out my code, also if there is anything that i really don't need, it would be really helpful to point it out. Also i am making this in Chrome. Cheers :)
PS. I am only showing one page of the html so the links wont work.
Here the link to jsFiddle.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cristiano Ronaldo</title>
<link rel="stylesheet" type="text/css" href="../realstyle.css" />
</head>
<body>
<div id="contentwrap">
<div id="languagebar">
<ul id="languagelist">
<li id="Ronaldo">CRISTIANO RONALDO</li>
<li>Português</li>
<li>English</li>
</ul>
</div> <!--languagebar-->
<div id="bigpic">
<a href="http://www.realmadrid.com/cs/Satellite/en/Home.htm">
<img id="Madrid" border="0" src="../GalleryI/Madrid.jpg" width="100" height="100px" />
</a>
<a href="http://www.manutd.com/Splash-Page.aspx">
<img id="United" border="0" src="../GalleryI/United.jpg" width="120" height="100px" />
</a>
</div> <!--bigpic-->
<div id="menubar">
<ul id="menubarlist">
<li>Home</li>
<li>Early Life</li>
<li>Clubs</li>
<li>Records/medals</li>
<li>Personal Life</li>
</ul>
</div> <!--menubar-->
<div id="content">
</div> <!--Content-->
</div> <!--contentwrap-->
</body>
</html>
CSS
body {
background-image: url("GalleryI/Background.jpg");
width:100%;
margin:0;
padding:0;
}
A:hover {text-decoration: none; color:#CD2626;}
a:link {color: White; text-decoration: none;}
a:visited {color: White; text-decoration: none;}
#contentwrap {
text-align:center;
white-space: nowrap;
width: 50%;
margin-left: auto;
margin-right: auto;
background-color: red;
}
#languagebar {
width:800px;
height:30px;
background-image: url("GalleryI/languagebaricon.jpg");
background-repeat: no-repeat;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
margin:0 auto;
}
#languagelist li {
display:inline;
list-style:none;
position: relative;
line-height:25px;
padding: 2px 10px 0px 10px;
color:#CD2626;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
float: right;
}
#languagelist li a:hover{
color:#CD2626;
}
#bigpic {
width:800px;
height:100px;
background: #fff;
background-image: url("GalleryI/Jersey1.jpg");
background-repeat: no-repeat;
background-position: 190px -155px;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
margin:0 auto;
}
#menubar {
width:800px;
height:40px;
background-image: url("GalleryI/menuicon.jpg");
background-repeat: no-repeat;
padding:0;
white-space: nowrap;
list-style:none;
font-family: Impact, Arial, sans-serif;
text-transform:uppercase !important;
font-size: 16px;
margin:0 auto;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
}
#Madrid {
float: left;
}
#United {
float: left;
}
#content {
width: 800px;
height: 726px;
background-color: #FFF;
color: white;
font-size: 18px;
text-align:center;
font-family: arial,sans-serif;
color: white;
margin:0 auto;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
}
li#Ronaldo {
line-height:25px;
padding: 2px 25px 2px 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: white;
float: left;
font-weight: bold;
}
ul#menubarlist li {
display:inline;
position: relative;
letter-spacing:2px;
line-height:35px;
padding: 0px 25px 0px 25px;
color:#CD2626;
}
ul#menubarlist li a:hover{
color:#CD2626;
}
ul#list-nav li a {
text-decoration:none;
color:#ffffff;
}
Just remove this:
#languagebar{
border-left:1px solid #FFFFFF;
}
There is a white space because you have a border!
Edit:
If you mean the gap between the images, see http://jsfiddle.net/GZ8ZT/5/
Just add
#bigpic{font-size:0}
And if you want to add text inside bicpic, you will also need
#bicpic>*{font-size:16px} /* Or your default font-size value */
Remove this
border-left:1px solid #FFFFFF;
from *css #languagebar *
Hy!
I don't know how to center the Nav-Bar please help!
HTML:
<html>
<script src="jquery-1.6.1.min.js"></script>
<script src='jquery.divslideshow-1.2-min.js' type='text/javascript'></script>
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<div id="page-wrap">
<table>
<tr>
<td><img src="images/logo.png"/></td>
<td> <div id="slideshow">
<img src="/images/trompete.jpg" alt="Slideshow Image 1" class="active" />
<img src="/images/floete.jpg" alt="Slideshow Image 1" />
</div></td>
</tr>
</table>
<div class="container">
<ul id="minitabs">
<li>News</li>
<li><a href="#" >Fotos</a></li>
<li>Mitglieder</li>
<li>Jugend</li>
<li>Gästebuch</li>
<li>Intern</li>
</ul>
</div>
<br/>
<div><p>Pellentesque habitant morbi</p>
</div>
</div>
</body>
</head>
</html>
Css:
#page-wrap { position: relative; width: 1024px;
margin: 50px auto; padding: 20px;
background: white; -moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black; -webkit-border-radius:30px;
}
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 10px 56px;
text-decoration: none;
font-weight: bold;
color: #069;
}
#nav li a:hover {
color: #c00;
background-color: #fff; }
p { font: 15px/2 Georgia, Serif; margin: 0 0 30p x 0; text-indent: 5px; }
#slideshow {
position:relative;
height:165px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
height:146px;
width: 650px;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
.container {
padding: 1px;
margin: 40px 0px 40px 0;
background: #fff;
}
#minitabs {
margin: 0;
padding: 0 0 40px 10px;
border-bottom: 1px solid #587DC6;
}
#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#minitabs a:link, #minitabs a:visited {
float: left;
font-size: 40px;
line-height: 10px;
font-weight: bold;
margin: 0 10px 4px 10px;
padding-bottom: 2px;
text-decoration: none;
color: #C6C6C6;
}
#minitabs a.active:link, #minitabs a.active:visited, #minitabs a:hover {
border-bottom: 4px solid #B80028;
padding-bottom: 20px;
background: #fff;
color: #587DC6;
}
To centre your nav you will need to do the following:
CSS:
In #minitabs assign
text-align:center;
In #minitabs a:link, #minitabs a:visited remove or comment out float:left;
That should centre your nav. You will have to adjust some of your styles in your nav to get it to look the same as before but at least it should be a starting point for you.
See live link on JSfiddle: http://jsfiddle.net/AvavN/
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?