I have a page whos players update their stats
for each stat I have a cell, with description and (+) whos give them the option for chose which one to update, but when you trying to click the whole table is going left
its no script whos do it or something like that
this is how its need to be
this is the result after click\hover
I moved position: absolut
but still, nothing happened
position: static;;
}
.titlestat {
right:20px;
position:absolute;
margin-top:-3px;
margin-right:40px;
right:20px;
}
.substat {
right:20px;
font-size:12px;
margin-top:22px;
margin-right:40px;
position:absolute;
right:20px;
}
.upstat {
right:20px;
font-weight:600;
font-size:24px;
background:rgba(0,0,0,0.3);
padding:3px 10px;
padding-top:2px;
border:solid 1px #693b23;
box-shadow:0px 0px 0px 1px #000,0px 4px 3px
rgba(255,255,255,0.15);
color:#fff;
margin-top:0px;
margin-right:153px;
text-decoration:none;
border-radius:6px;
transition:0.3s;
-webkit-transition:0.3s;
-moz-transition:0.3s;
right:20px;
}
.upstat:hover {
background:rgba(0,0,0,0.4);
box-shadow:0px 0px 0px 1px #000,0px 4px 4px
rgba(255,255,255,0.35);
text-shadow:0px 0px 16px #fff,0px 0px 16px #fff;
}
.statsupdiv {
background:url(../img/code/chatbg.jpg);
width:472px;
margin-right:10px;
padding:10px 0px;
border-right:solid 1px #693b23;
border-left:solid 1px #693b23;
border-bottom:solid 1px #693b23;
box-shadow:1px 0px 0px #000,-1px 0px 0px #000,0px 1px 0px #000;
margin-bottom:8px;
font-weight:bold;
font-size:16px;
}
.stats1 {margin-right:-240px;margin-top:0px;}
.stats2 {margin-right:2px;margin-top:0px;}
.stats3 {margin-right:-240px;margin-top:80px;}
.stats4 {margin-right:2px;margin-top:80px;}
Related
I want to change the color of the header, color of the box in the middle (same as the color of header) and the background color, im new to html and css please help me with this i tried everything like finding the hex code of the color blue (#333580) and searching for it on the css, i was able to find it and replace with another color but nothing is changing.
*{
margin:0;
padding:0;
}
body{
background-image: url("../images/bg.jpg") repeat top left;
background-color:#333;
}
h1{
font-size:45px;
}
h1 span{
color:#ffa800;
}
a{
color:#777;
}
a:hover{
color:#222;
}
p{
padding:5px 0px;
}
.header{
margin-left:-20px;
}
.wrapper{
width:960px;
margin:10px auto;
min-height:550px;
background: red;
overflow:auto;
}
.wrapper_admin{
width:960px;
margin:10px auto;
min-height:550px;
background: red;
overflow:auto;
}
.box{
width:49%;
}
.left{
float:left;
}
.right{
float:right;
}
.clear{
clear:both;
}
a.back{
color:#777;
position:fixed;
top:5px;
right:10px;
text-decoration:none;
}
/* Form Style */
.form_wrapper{
background:#fff;
border:1px solid #ddd;
margin:0 auto;
width:350px;
font-size:16px;
-moz-box-shadow:1px 1px 7px #ccc;
-webkit-box-shadow:1px 1px 7px #ccc;
box-shadow:1px 1px 7px #ccc;
}
.form_wrapper h3{
padding:40px 30px 20px 30px;
background-color:#444;
color:#fff;
font-size:25px;
border-bottom:1px solid #ddd;
}
.form_wrapper form{
display:none;
background:#fff;
}
.form_wrapper .column{
width:47%;
float:left;
}
form.active{
display:block;
}
form.login{
width:350px;
}
form.register{
width:550px;
}
form.forgot_password{
width:300px;
}
.form_wrapper a{
text-decoration:none;
color:#777;
font-size:12px;
}
.form_wrapper a:hover{
color:#000;
}
.form_wrapper label{
display:block;
padding:10px 30px 0px 30px;
margin:10px 0px 0px 0px;
}
.form_wrapper input[type="text"],
.form_wrapper input[type="password"]{
border: solid 1px #E5E5E5;
background: #FFFFFF;
margin: 5px 30px 0px 30px;
padding: 9px;
display:block;
font-size:16px;
width:76%;
background:
-webkit-gradient(
linear,
left top,
left 25,
from(#FFFFFF),
color-stop(4%, #EEEEEE),
to(#FFFFFF)
);
background:
-moz-linear-gradient(
top,
#FFFFFF,
#EEEEEE 1px,
#FFFFFF 25px
);
-moz-box-shadow: 0px 0px 8px #f0f0f0;
-webkit-box-shadow: 0px 0px 8px #f0f0f0;
box-shadow: 0px 0px 8px #f0f0f0;
}
.form_wrapper input[type="text"]:focus,
.form_wrapper input[type="password"]:focus{
background:#feffef;
}
.form_wrapper .bottom{
background-color:#444;
border-top:1px solid #ddd;
margin-top:20px;
clear:both;
color:#fff;
text-shadow:1px 1px 1px #000;
}
.form_wrapper .bottom a{
display:block;
clear:both;
padding:10px 30px;
text-align:right;
color:#ffa800;
text-shadow:1px 1px 1px #000;
}
.form_wrapper a.forgot{
float:right;
font-style:italic;
line-height:24px;
color:#ffa800;
text-shadow:1px 1px 1px #fff;
}
.form_wrapper a.forgot:hover{
color:#000;
}
.form_wrapper div.remember{
float:left;
width:140px;
margin:20px 0px 20px 30px;
font-size:11px;
}
.form_wrapper div.remember input{
float:left;
margin:2px 5px 0px 0px;
}
.form_wrapper span.error{
color:red;
font-size:11px;
font-style:italic;
display:block;
margin:15px 30px;
}
.form_wrapper input[type="submit"] {
background: #e3e3e3;
border: 1px solid #ccc;
color: #333;
font-family: "Trebuchet MS", "Myriad Pro", sans-serif;
font-size: 14px;
font-weight: bold;
padding: 8px 0 9px;
text-align: center;
width: 150px;
cursor:pointer;
float:right;
margin:15px 20px 10px 10px;
text-shadow: 0px 1px 0px #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0px 0px 2px #fff inset;
-webkit-box-shadow: 0px 0px 2px #fff inset;
box-shadow: 0px 0px 2px #fff inset;
}
.form_wrapper input[type="submit"]:hover {
background: #d9d9d9;
-moz-box-shadow: 0px 0px 2px #eaeaea inset;
-webkit-box-shadow: 0px 0px 2px #eaeaea inset;
box-shadow: 0px 0px 2px #eaeaea inset;
color: #222;
}
.clock{
float:Right;
margin-right:-80px;
}
.date{
float:left;
margin-right:50px;
margin-top:30px;
}
.trans{
background:transparent;
border:none;
font-size:17px;
font-family:Century Gothic;
}
.popup
{
position: fixed;
width: 100%;
opacity: 0.9;
top:0px;
min-height:200px;
height:100%;
z-index: 100;
background: #FFFFFF;
font-size: 20px;
text-align: center;
/* display:none; */
}
HTML LOGIN PAGE(index.php)
<html>
<body>
<link rel="stylesheet" type="text/css" href="admin/css/style.css" />
<html>
<head>
<title>ABE E-Voting System</title>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand">
<img src="ABE.jpg" width="135" height="60">
</a>
<a class="brand">
<h2>E-Voting System</h2>
<div class="chmsc_nav"><font size="4" color="white">CABANATUAN</font></div>
</a>
</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="screen, projection" />
<link rel="stylesheet" href="css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/Home.css" media="screen, projection" />
</body>
</html>
<div class="wrapper_admin">
</br>
</br>
</br>
<div id="element" class="hero-body-index">
<div id="loginform">
<p><font color="white"><h2>Login</h2></font></p>
<form action="loginprocess.php" method="POST" >
<table>
<tr><td><font color="white">Username<br>or USN:</font> </td><td><input type="text" name="username" id="username" maxlength="11" required></td></tr>
<tr><td><p><td></tr>
<tr><td><font color="white">Password:</font> </td><td><input type="Password" name="password" id="password" maxlength="50" required></td></tr>
<tr><td><p><td></tr>
<tr><td></td><td><button class="btn btn-primary" value="Login"><i class="icon-ok icon-large"></i> Login</button><p>
</td></tr>
<tr><td><font color="white" size=2>No account?<td><a href='register.php'><font size=2>Register!</a></font>
</td><tr>
</form>
</table>
</div>
</div>
</br>
</br>
</br>
</br>
</br>
<hr>
<footer>
<div class="foot_center"><p>Copyright © 2018 ABE CABANATUAN
<br>
-------------Programmed by------------
<br>Jordan J. Santos - John Marlou Agulto</div>
</div>
</footer></div>
</body>
</html>
Good day,
I have two buttons with an up and down arrow, as shown in my picture below.
The corresponding html code is the following :
[...]
<tr>
<td class="tablerows" height="40">lab01 - Températ. pièce [T1]</td>
<td class="tablerows"><input id="lab01" type="text" name="country" class="resizedTextbox" value="20" readonly>
<i class="fa fa-chevron-down"></i>
<i class="fa fa-chevron-up"></i>
</td>
</tr>
[...]
Edit, thanks to your help. However, I am still not able to align all my elements, as I would like
The linked CSS is the following :
td{
vertical-align:middle;
}
.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
box-shadow:inset 0px 1px 0px 0px #54a3f7;
background-color:#3e12cc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:18px;
padding: 0 10px 10px 10px;
text-decoration:none;
text-shadow:0px 1px 0px #154682;
width:20px;
height:25px;
vertical-align:-1px;
line-height:auto;
}
.myButton:hover {
background-color:#0061a7;
}
.myButton:active {
position:relative;
top:1px;
}
.resizedTextbox {width: 50px;
height: 20px;
padding: 5px 5px 5px 5px;
border-color:#3e12cc;
text-shadow:0px 1px 1px #154682;
background-color:#f5effb;
vertical-align:text-top;
text-align:center;
font-size:18px;
}
progress {
background-color: #0061a7;
border: 0;
height: 18px;
border-radius: 9px;
}
What I am basically trying to do is to have a 'good' vertical alignment (in my example, we can see that it's not very well aligned).
Before annoying you - and risking a negative downvote - I tried to google my problem, but I could not find the issue that I am having. Am I missing a property or did I set it incorrectly ?
Thanks for your hints
Use this css, removed height and width and added box-sizing
box-sizing: border-box;
padding:10px;
.myButton {
-moz-box-shadow: inset 0px 1px 0px 0px #54a3f7;
-webkit-box-shadow: inset 0px 1px 0px 0px #54a3f7;
box-shadow: inset 0px 1px 0px 0px #54a3f7;
background-color: #3e12cc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 18px;
text-decoration: none;
text-shadow: 0px 1px 0px #154682;
box-sizing: border-box;
padding: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-chevron-down"></i>
<i class="fa fa-chevron-up"></i>
I was able to align it with
vertical-align:-6px;
Try this it should work. Please share a codepen going forward, so that its easier for others
Add line Height for .myButton
line-height:25px;
You need vertical-align:middle. Try it and tell me if works, otherwise, you can add padding-top: for separete it from top.
Thanks all for your very quick replies. The solution provided by Gowtham Shiva helped me a lot, although many other ones that I upvoted are perfect.
Finally, here is the contents of my css file :
td{
vertical-align:middle;
}
.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
box-shadow:inset 0px 1px 0px 0px #54a3f7;
background-color:#3e12cc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:18px;
padding: 5px 10px 5px 10px;
text-decoration:none;
text-shadow:0px 1px 0px #154682;
width:20px;
height:25px;
vertical-align:-6px;
}
.myButton:hover {
background-color:#0061a7;
}
.myButton:active {
position:relative;
top:1px;
}
.resizedTextbox {width: 40px;
height: 20px;
padding: 5px 5px 5px 5px;
border-color:#3e12cc;
text-shadow:0px 1px 1px #154682;
background-color:#f5effb;
vertical-align:text-top;
text-align:center;
font-size:18px;
}
progress {
background-color: #0061a7;
border: 0;
height: 18px;
border-radius: 9px;
}
Hope this post will help someone in a similar situation.
Have a good week-end.
What is the minimalist syntax for these two classes?
.sortable1Wrapper { width:190px; height:200px; border: 1px solid #eee; float:left; margin: 0px 5px 0px 0px }
.sortable2Wrapper { width:190px; height:200px; border: 1px solid #eee; float:left; }
What is I style by their ids?
.sortable1Wrapper { width:190px; height:200px; border: 1px solid #eee; float:left; margin: 0px 5px 0px 0px }
.sortable2Wrapper { width:190px; height:200px; border: 1px solid #eee; float:left; }
the minimalist sintax for your two class is
.sortable1Wrapper, .sortable2Wrapper { width:190px; height:200px; border: 1px solid #eee; float:left; }
.sortable1Wrapper { margin: 0px 5px 0px 0px }
I was experimenting with text-align:; and text-justify:;, which only appears in the header id, and am now getting the effect on divs I no longer want it on. I've since removed the rules entirely with no effect. This especially irritating when li's are involved with syntax highlighting etc. Any idea where this is coming from?
css:
#content{
position:relative;
float:left;
clear:both;
background-color:#ffffff;
width:100%;
overflow:hidden;
text-align:left;
vertical-align:left;
margin:10px 3px 3px 03x;
padding:10px 10px 10px 10px;
}
#contentspace{
position:relative;
float:left;
clear:both;
background-color:#ffffff;
width:91%;
overflow:hidden;
text-align:left;
vertical-align:center;
left:4%;
margin:10px 0px 0px 0px;
padding:5px 5px 5px 5px;
border-top:1px solid #000000;
border-left:1px solid #000000;
}
#header{
position:relative;
float:left;
clear:both;
background-color:#ffffff;
vertical-align:center;
text-align:center;
text-align:justify;
text-justify:distribute;
width:91%;
left:4%;
margin:15px 0px 0px 0px;
padding:5px 5px 5px 5px;
border-top:1px solid #000000;
border-left:1px solid #000000;
}
html:
the content div is loaded into the contentspace div
Hello i have made a template and a whole role playing game with over 400 pages of coding now users have told me the page does not work in i.e . I have viewed my website in firefox and chrome and works fine. But when i view it in i.e it shows a messed up page.
I have tried using
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
But does not work / help i also have scroll bars ( when logged in ) And if your shuffle over to the left or right of the page by using left or right keys on the keyboard the slidey bar does not slide down.
So is there anyways to make my template work in i.e and stop users from pressing left and right e.g the template from moving left to right ?
Here is my css
html
{
background: url(../images/background.png);
background-color: transparent;
}
body {
width: 1000px;
margin: auto;
padding: 0;
text-align: center;
color: #000000;
font-family: verdana;
font-size: 0.7em;
}
.auction_box
{
display:inline-block ;
}
div.container
{
width:100%;
height:100%;
position:absolute;
margin:auto;
}
div.holder
{
width:990px;
background-color:#d7f7f7;
height:100%;
margin:auto;
margin-top:0px;
background-image:url('../images/swampertbackground.png');
background-repeat:no-repeat;
background-position:bottom center;
}
#container{
height: 100%;
width: 1000px;
background-color: #d7f7f7;
position: fixed;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-left: solid #25a5a6 2px;
border-right: solid #25a5a6 2px;
overflow-y: auto;
overflow-x: auto;
}
div.banner
{
height:125px;
width:700px;
display:block;
position:absolute;
margin-top:2px;
margin-left:140px;
background-color:#FFF;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
border-top-left-radius:7px;
border-top-right-radius:7px;
border: solid #25a5a6 1px;
background-image:url('../images/banner.png');
box-shadow: 3px 3px 3px #4b8384;
}
ul , li
{
margin:0px;
padding:0px;
list-style:none;
}
div.left_navigation
{
position:absolute;
margin-left:5px;
margin-top:150px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
width: 152px;
}
div.leftside2_navigation
{
position:absolute;
margin-left:5px;
margin-top:280px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
width: 152px;
}
div.left_navigation2
{
position:absolute;
margin-left:5px;
margin-top:330px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
div.clans
{
position:absolute;
margin-left:5px;
margin-top:410px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
div.left_navigation3
{
position:absolute;
margin-left:5px;
margin-top:525px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
div.left_navigation4
{
position:absolute;
margin-left:5px;
margin-top:620px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
div.left_navigation5
{
position:absolute;
margin-left:5px;
margin-top:680px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
div.left_navigation6
{
position:absolute;
margin-left:5px;
margin-top:750px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
li.header
{
width:150px;
height:14px;
background-color:#54c0c1;
border:1px #188c8d solid;
border-top-left-radius:7px;
border-top-right-radius:7px;
background-image:url('../images/header.png');
border-left:2px #188c8d solid;
color:#FFFFFF;
font-weight:900;
}
li.links
{
width:150px;
height:16px;
background-color:#c1f9fa;
border-bottom:1px #188c8d solid;
border-left:2px #188c8d solid;
border-right:1px #188c8d solid;
color:#074647;
}
li.links:hover
{
background-color:#FFFF00;
color:#296584;
font-weight:bold;
text-shadow: 1px 2px 2px #0096ff;
}
li.footer
{
width:150px;
height:9px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
background-image:url('../images/header.png');
border-bottom:1px #188c8d solid;
border-left:2px #188c8d solid;
border-right:1px #188c8d solid;
}
div.centerboxholder
{
position:absolute;
top:150px;
margin-left:165px;
width:661px;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
div.centerbox
{
position:absolute;
width:661px;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
li.chead
{
width:660px;
height:14px;
border-top-left-radius:7px;
border-top-right-radius:7px;
background-image:url('../images/header.png');
border-left:2px #188c8d solid;
border-right:1px #188c8d solid;
border:1px #188c8d solid;
color:#FFFFFF;
font-weight:900;
box-shadow: 0px 0px 3px #4b8384;
}
li.ccontent
{
width:659px;
background-color:#c1f9fa;
border-bottom:1px #188c8d solid;
border-left:2px #188c8d solid;
color:#000;
font-size:0.9em;
border-right:1px #188c8d solid;
box-shadow: 3px 3px 3px #4b8384;
}
li.cfoot
{
width:659px;
height:9px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
background-image:url('../images/header.png');
border-bottom:1px #188c8d solid;
border-left:2px #188c8d solid;
border-right:1px #188c8d solid;
box-shadow: 3px 3px 3px #4b8384;
}
div.right_navigation
{
position:absolute;
margin-left:834px;
top:150px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
table
{
padding:0px;
margin:0px;
border: 0px;
font-size:0.9em;
font-weight:bold;
color:#000;
}
td
{
border:1px #188c8d solid;
width:200px;
text-align:center;
}
#textfield
{
color: #000000;
font-family: verdana;
font-size: 1em;
font-weight: bold;
background-color:#e2fffc;
border:1px #188c8d solid;
border-radius:5px;
}
#gender
{
color: #000000;
font-family: verdana;
font-size: 1em;
font-weight: bold;
background-color:#e2fffc;
border:1px #188c8d solid;
border-radius:5px;
width:110px;
padding:0px;
}
#gendertop
{
color: #000000;
font-family: verdana;
font-size: 1em;
font-weight: bold;
background-color:#e2fffc;
border:1px #188c8d solid;
}
#genderbottom
{
color: #000000;
font-family: verdana;
font-size:1em;
font-weight: bold;
background-color:#e2fffc;
border:1px #188c8d solid;
}
#button
{
background-color:Transperent;
color: #000000;
font-family: verdana;
font-size: 1em;
font-weight: bold;
background-color:#e2fffc;
border:1px #188c8d solid;
width:100px;
padding-top:0px;
margin:0px;
height:16px;
padding-bottom:5px;
}
#Avatar
{
color: #000000;
font-family: verdana;
font-size: 1em;
font-weight: bold;
background-color:#e2fffc;
border:1px #188c8d solid;
border-radius:5px;
width:110px;
}
#changer
{
color: #000000;
font-family: verdana;
font-size: 1em;
font-weight: bold;
background-color:#e2fffc;
border-bottom:1px #188c8d solid;
}
li.topper
{
height:12px;
border:1px #188c8d solid;
border-top-left-radius:5px;
border-top-right-radius:5px;
background-image:url('../images/header.png');
}
li.bottomer
{
border:1px #188c8d solid;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
background-image:url('../images/header.png');
height:12px;
}
#button:hover
{
cursor:pointer;
}
a:link { color:#296584; text-decoration:none;display:block;}
a:visited { color:#296584; text-decoration:none;}
a:hover { color:#296584; text-decoration:none;text-shadow: 1px 2px 2px #0096ff;}
a:active {color:#296584; text-decoration:none; background-color:}
My website url is pokemontoxic.net so everyone cna view it in i.e and see what i mean. Thanks
You've got your doctypes wrong. At the top of your pages, change this:
<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
to this:
<!doctype html>
<html>
Or, at least swap their places.
1st:
Emulate7 will tell all IE browsers to pretend to act as if they're IE7. Just remove these lines:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
and instead, add the below code, which means your site supports IE7:
<meta http-equiv="X-UA-Compatible" content="IE=7"/>
2nd:
In your CSS, you have div.container and div.holder, the dot stands for a "class", but you have <div id="container"> and <div id="holder">. So either you change the CSS to div#container and div#holder OR change the attribute id to class, like this <div class="container"> and <div class="holder">