I'm in need of inserting a Hack to a web page, so it works well on IE7.0
But I'm having issues with the way I'm doing things. It should be simple.
The actual CSS code is the following:
<style type="text/css">
body { margin:0;}
#home_splash { background-image:url(homeimages/image-background.jpg);background-repeat:repeat-x; background-position:left top;}
#home_splash #home_text { height:470px; padding-top:25px;padding-left:38px; }
#home_splash #home_text_1,
#home_splash #home_text_2 { display:none; }
#home_splash #home_text_1 { width:172px; height:58px; top:0px; left:70px; position:relative; background:inherit; background-position: -70px 0px; }
#home_splash #home_text_2 { width:212px; height:27px; top:460px; left:868px; position:relative; background:inherit; background-position: -868px -460px; }
#home_splash {background-color:#d1d1d9;margin-top:-15px; background-repeat:repeat;width:100%; }
#home_splash .picture { background-image: url(homeimage/image.jpg); width:960px; height:520px; display:block; margin-top:20px; margin-left :auto; margin-right:auto; }
#home_splash #boxes { margin-left:auto; margin-right:auto;padding-top:0px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#666; font-size:12px; font-weight:bold; height:190px; width:930px;}
#home_splash #boxes .box { width:33%; float:left; display:block;background-repeat:repeat-x;}
#home_splash #boxes h3 { font-size:23px; border-bottom: 1px solid #bcbcc4; color:#000033; margin:0; }
#home_splash #boxes h3,
#home_splash #boxes p {margin: 4px 25px; }
#home_splash #boxes p { line-height:160%; }
#home_splash #boxes .box_separator { border-right:1px solid #eee;}
ul#nav { width:100%; height:37px; margin:0px;display:block; background-color:#000; background-repeat:repeat-x; }
#container {background-color:#d1d1d9; zoom:1; }
#content { margin:0; }
.splash_text {width:885px; height:463px;}
</style>
I'd like to make ONE CHANGE in this CSS.
I'd like change the following line :
#home_splash .picture { background-image: url(homeimage/image.jpg); width:960px; height:520px; display:block; margin-top:20px; margin-left :auto; margin-right:auto; }
I want IE7.0 to remove the 'margin-top:20px;' property - but INLINE in this html file only
Conditional comments are exactly what you need. I'm assuming by "rmeove the margin-top: 20px' property, you mean set it to 0 (as there's really no other way to remove it). Here's the code:
<!--[if IE 7]><style type="text/css">#home_splash .picture { margin-top: 0; }</style<![endif]-->
Just stick that in your HTML file, below the CSS you already have, and you should be golden.
Since you're coding into an HTML file, by far the easiest option is conditional comments:
<!--[if IE 7]>
Special instructions for IE 7 here
<![endif]-->
See http://www.quirksmode.org/css/condcom.html for more info.
If you want the hack in the same css as the other browsers:
*+ html #home_splash .picture { background-image: url(homeimage/image.jpg);}
Look here:
http://css-discuss.incutio.com/wiki/Star_Html_Hack
Related
I have two classes, .growImage and .footer. When you hover over a div that contains the image, the image follow the following CSS...
.growImage:hover {
transform:scale(1.5,1.5);
transform-origin:0 0;
}
and it works... but below that CSS is this...
.growImage:hover ~ #footer {
height:1000px;
}
and it is supposed to enlarge the height of the footer as well but it doesn't. Please note I have tried converting both of them to ID'S (#example) and both of them to regular classes (.example), that didn't work. I tried add important! to the changing attribute, that also didn't work. The most confusing thing is, I started a new html webpage and made blank divs that contained nothing and minimal attributes and the code above worked on those so why isn't it working on the current webpage I am working on?
Here is the HTML...
<div class="growImage"><img src="images/familyTree.jpg" width="333px" height="250px"/></div>
<div class="footer">
This is the footer.</div>
Here is the CSS...
.footer{
height:50px;
width:960px;
font-size:16px;
text-align:center;
background-color:white;
color:black;
padding-top:27px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
}
.growImage:hover{
transform:scale(1.5,1.5);
transform-origin:0 0;
}
.growImage:hover ~ .footer {
height:1000px;
}
Sorry I should have included this before but this is the rest of the CSS...
#container{
height:920px;
width:960px;
background-color:#000;
margin:auto;
display: block;
float: none;
}
#header{
height:100px;
width:960px;
float:left;
background-color:white;
}
#navigation{
height:100px;
width:660px;
font-size:30px;
color:black;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
background-color:white;
}
#logo{
height:100px;
width:300px;
float:left;
background-color:white;
}
#body{
height:770px;
width:920px;
background-color:#0081c3;
color:white;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:20px;
padding-left:20px;
padding-right:20px;
padding-top:20px;
float:left;
}
#footer{
height:50px;
width:960px;
font-size:16px;
text-align:center;
background-color:white;
color:black;
padding-top:27px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
}
html{
/*background-color:#ffd636;*/
background-image:url(images/background.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
a:Link{
text-decoration:none;
}
a:visited{
text-decoration:none;
}
a:hover{
text-decoration:none;
}
a:active{
text-decoration:bold;
}
img{
border-style: none;
}
.buttonBorder{
width:165px;
height:100px;
padding-top:31px;
color:white;
float:left;
border-left: 1px solid white;
box-sizing: border-box;
background-color:#ffd636;
}
.buttonSelected{
width:165px;
height:100px;
padding-top:31px;
color:white;
float:left;
border-left: 1px solid white;
box-sizing: border-box;
background-color:#ed3133;
}
.buttonBorder:hover{
color:#ffd636;
background-color:white;
}
td{
width:150px;
}
.growImage:hover{
transform:scale(1.5,1.5);
transform-origin:0 0;
}
.growImage:hover ~ .footer {
height:1000px;
}
I tried with both id and class . it doesn't shows any problem.
But you should implement like this because css scale is not the best idea because its will overlap siblings elements. try to use height: ( If u want to see full image when hovering )or set parent element overflow as hidden
Check here
#footer{
height:50px;
width:960px;
font-size:16px;
text-align:center;
background-color:white;
color:black;
padding-top:27px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
}
/* This rule added just for testing purpose only */
div#footer {
background:green;
transition-duration:.5s;
}
/* overflow avoid overflow of child elements when hovering */
#growImage{
overflow:hidden;
}
#growImage:hover img{
transform:scale(1.5,1.5);
transform-origin:0 0;
transition-duration:.5s;
}
#growImage:hover ~ #footer {
height:1000px;
}
<div id="growImage">
<img src="http://devgene.com/wp-content/themes/devgene/assets/img/tba-mobile.png" width="333px" height="250px"/>
</div>
<div id="footer">
This is the footer.</div>
When I try to validate my CSS code on w3c, it gives me these errors sorry if this has already been asked but I can't seem to find an answer. Some errors where fixed but these ones are still there.
Parse Error <html> <head> > <title>style2.CSS</title> </head> <body> html{ background-image: url(headerimg.jpg); }
130 Parse Error
<head>
<meta http-equiv="content-type";content="text/html";charset="UTF-8"/>
<title>style2.CSS</title>
</head>
<body>
html{
background-image: url(headerimg.jpg);
}
header{
background-image: url(headerimg.jpg);
background-position: center top;
background-repeat: no-repeat;
background-size:1000px 150px;
}
body{
background-image:url(bg.jpg);
padding-left:175px;
padding-right:175px;
width:940px;
}
#text{
background-color:white;
padding-top:0px;
padding-left:20px;
padding-right:69.5px;
width:600px;
padding-bottom:0px;
display:inline-block;
}
#headchoix{
background-color:#333;
height:50px;
word-wrap: normal;
padding-top:30px;
}
#bot{
float: top;
float:right;
background-color:#D3D3D3;
height:713px;
padding-left:0.1px;
width:250px;
}
#top1,#top2,#top3,#top4,#top5,#top6{
padding-right:40px;
color:white;
padding-left:10px;
font-size:150%;
font-weight: bold;
text-decoration:none;
}
#pad{
float:left;
}
#footerchoix{
background-color:#333;
width:940px;
height:160px;
display:inline-block;
}
#aside2,#aside1{
float:left;
padding-right:170px;
color:white;
}
#aside3{
float:left;
color:white;
}
#aside4{
float:right;
color:white;
width:200px;
}
a:visited{
color:black;
}
a:hover{
color:red;
}
a:active{
color:yellow;
}
a:link{
color:blue;
}
</body>
Your meta tag has erroneous semi-colons:
This:
<meta http-equiv="content-type";content="text/html";charset="UTF-8"/>
Should read:
<meta http-equiv="content-type" content="text/html" charset="UTF-8" />
As the validator suggests, there was a parse-error at the semi-colon before the content attribute. That is because you are not supposed to separate attributes with semi-colons. You use white-space characters to separate attributes.
You should put CSS inside style tags
<style>
html{
background-image: url(headerimg.jpg);
}
header{
background-image: url(headerimg.jpg);
background-position: center top;
background-repeat: no-repeat;
background-size:1000px 150px;
}
body{
background-image:url(bg.jpg);
padding-left:175px;
padding-right:175px;
width:940px;
}
#text{
background-color:white;
padding-top:0px;
padding-left:20px;
padding-right:69.5px;
width:600px;
padding-bottom:0px;
display:inline-block;
}
#headchoix{
background-color:#333;
height:50px;
word-wrap: normal;
padding-top:30px;
}
#bot{
float: top;
float:right;
background-color:#D3D3D3;
height:713px;
padding-left:0.1px;
width:250px;
}
#top1,#top2,#top3,#top4,#top5,#top6{
padding-right:40px;
color:white;
padding-left:10px;
font-size:150%;
font-weight: bold;
text-decoration:none;
}
#pad{
float:left;
}
#footerchoix{
background-color:#333;
width:940px;
height:160px;
display:inline-block;
}
#aside2,#aside1{
float:left;
padding-right:170px;
color:white;
}
#aside3{
float:left;
color:white;
}
#aside4{
float:right;
color:white;
width:200px;
}
a:visited{
color:black;
}
a:hover{
color:red;
}
a:active{
color:yellow;
}
a:link{
color:blue;
}
</style>
Include this in head tag
I set the image header width to 100% and when i check the max-width of 959px or lower[i set it to that] i notice the image does not respond and move along like it should. It actually gets even bigger than normal for some reason. My aside and section are working properly however.
jsfiddle - http://jsfiddle.net/u04xr6pd/2/
<div class="container">
<header>
<img src="images/header.png" alt="taffies logo">
</header> <!-- end of header -->
</div>
CSS
#media screen and (max-width:959px){
.container{
width:100%;
}
.sidebar{
width:30%;
}
.first_article{
width:50%;
}
header img{
width:100%;
}
}
I would recommend this code...
header img{
width:calc(100% - 50px);
margin:0 auto !important;
}
and apply that EXACT same width to this class .first_article to make it more responsive.
You also have this code in your CSS:
header img {
padding: 43px;
margin-left: 260px;
}
So when your window width is less than 959px, your image will have width: 100% but also the padding and margin, pushing it to the right. You need to add rules for padding and margin in your #media code as well. Something like:
#media screen and (max-width: 959px) {
header img {
width: 100%;
padding: 0 !important;
margin: 0 !impotant;
}
}
Adjust the numbers as needed.
The !important is there because you've defined the #media section first, which would then be overridden by the normal rules defined later. If you move the #media section below the normal rules, then you don't need !important.
You have several misconceptions, but I can see you're trying and learning, so I want to give you some recognition on that. Now, for your problem, there are some thing to change, but the most important part: media queries goes AFTER the default definitions, not at the top, or you'll always have issues. So you need to change that, and then alter some things in your CSS, just not as many as when you started with this project a week ago or so. So take a look at your forked and cleaned fiddle
* {
margin:0px;
padding:0px;
list-style-type:none;
}
header, nav, section, article, aside, footer {
display:block;
}
.container {
width:960px;
margin:0 auto;
}
body {
background-color:#e8d4cb;
}
header img {
padding:43px;
margin-left:260px;
}
.first_article {
float:left;
width:500px;
margin:25px;
}
.first_main_paragraph {
font-family:arial;
font-size:20px;
color:#846a5f;
margin-bottom:50px;
}
.second_main_paragraph {
font-family:arial;
font-size:13px;
color:#846a5f;
}
.first_article .contact_button {
float:left;
margin-top:165px;
}
.first_article .cupcake {
float:left;
margin-top:20px;
margin-left:19px;
}
.sidebar {
float:left;
margin:30px;
margin-right:40px;
}
nav ul li a {
text-decoration:none;
font-family:myriad pro;
font-size:20px;
color:#3d2316;
display:inline-block;
padding-left:85px;
padding-right:29px;
padding-top:26px;
padding-bottom:26px;
width:39%;
}
nav ul li:hover a {
color:#e8d5cc;
}
nav ul li {
margin-bottom:3px;
background-color: #CBAFA2;
}
nav ul li:hover {
background-color: #3D2316;
}
.company_info {
background-color:#cbafa2;
padding:20px;
text-align:right;
margin-bottom:100px;
font-size:14px;
color:#3d2316;
font-family:myriad pro;
}
.about_section {
float:left;
width:500px;
margin:25px;
}
.about_title {
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.about_text {
font-family:arial;
font-size:13px;
color:#846a5f;
}
.orders_section {
float:left;
width:500px;
margin:25px;
}
.orders_title {
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.second_order {
margin-top:50px;
}
.order_text {
font-family:arial;
font-size:11px;
color:#846a5f;
}
.order_numbers {
color:#3D2316;
}
.gallery_section {
float:left;
width:600px;
margin:25px;
}
.gallery_title {
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.contact_section {
float:left;
width:500px;
margin:25px;
}
.contact_title {
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.contact_text {
font-family:arial;
font-size:13px;
color:#846a5f;
}
footer {
clear:both;
font-family:arial;
border-top:1px solid #aa8573;
height:100px;
}
footer p {
color:#784f3d;
margin:10px;
float:left;
margin-right:370px;
margin-top:30px;
}
footer ul li a {
text-decoration:none;
font-size:13px;
color:#784f3d;
float:left;
margin:10px;
margin-top:30px;
}
footer ul li a:hover {
color:#3d2316;
}
figure {
float:left;
margin:25px;
}
figcaption {
text-align:center;
font-family:arial;
font-size:13px;
color:#846a5f;
margin-top:15px;
}
span {
font-family:arial;
font-size:15px;
color:#846a5f;
font-weight:bold;
}
#media screen and (max-width:959px) {
.container {
width:100%;
}
.sidebar {
width:30%;
}
.first_article {
width:50%;
}
header {
text-align:center
}
header img {
width:100%;
max-width:462px;
height:auto;
padding:0px;
margin:0px auto;
}
}
As you will notice, besides moving the media queries, I'm removing your margins and paddings for the image since you don't need them at all, centered everything inside the header and limiting the width of your image so it will be 100% UP to 462px which is the real size of your image. And that's it, your image now is perfectly centered and isn't out of control. And while you still have several issues in your page, you're really close (btw, it's a show of respect to vote up and accept answers since you're getting so much help here)
I am facing a weird problem with my external css files. I am creating jSP website where i have 3 external CSS files for Mobile, Tablet and Desktop respectively. The css files are loading fine in the Local development environment. Their include statments are below.
<link rel="stylesheet" type="text/css" href="<c:out value="${pageContext.request.contextPath}"/>/css/style_eng.css" />
<link rel="stylesheet" type="text/css" href="<c:out value="${pageContext.request.contextPath}"/>/css/mobile_eng.css" media="only screen and (max-width:480px)">
<link rel="stylesheet" type="text/css" href="<c:out value="${pageContext.request.contextPath}"/>/css/tablet_eng.css" media="only screen and (min-width:481px) and (max-width:768px)">
<link rel="stylesheet" type="text/css" href="<c:out value="${pageContext.request.contextPath}"/>/css/style_eng.css" media="only screen and (min-width:769px)">
The JSTL statements are working fine and in in source code the statements are
<link rel="stylesheet" type="text/css" href="/ns/css/style_eng.css" />
<link rel="stylesheet" type="text/css" href="/ns/css/mobile_eng.css" media="only screen and (max-width:480px)">
<link rel="stylesheet" type="text/css" href="/ns/css/tablet_eng.css" media="only screen and (min-width:481px) and (max-width:768px)">
<link rel="stylesheet" type="text/css" href="/ns/css/style_eng.css" media="only screen and (min-width:769px)">
Now my problem is that the tablet_eng.css file is not loading. Even though the file is there in the view source. In chrome i noticed that the tablet_eng.css losses the code format and appears as a single string.
#charset "utf-8"; /* CSS Document */ body { font-size:.75em; } /*HeaderDiv */ .phoneMenu { display:none; } .LogImage { display:none; } .ArabicHome a { background-color:#e9ecef; position:absolute; top:45px; right:30px; font-size:1.3em; font-family:Tahoma, Geneva, sans-serif; font-weight:bold; width:25px; height:25px; background:url(../image/arabic_icon2.PNG) no-repeat center; background-size:20px 20px; border:solid #bfc7cf 1px; } .HeaderDivWrapper { border-bottom:solid #2a4660 4px; width:100%; position:relative; overflow:hidden; } .HeaderDiv { max-width:768px; background:url(../image/head_back.png) no-repeat; background-size:auto 100%; background-position:right top; padding:18px; height:100px; } #headerLogo p { background:url(../image/logo_mun_tab.png) no-repeat; padding-left:80px; padding-top:37px; } #menuDiv ul li { background:url(../image/arrow_down_tab.PNG) no-repeat center right; margin-left:15px; padding-right:10px; } #menuDiv { /*float:right; */ margin-top:100px; } /*end HeaderDiv */ /*Roll CSS*/ #rollDivWrapper { width:100%; position:relative; } #rollDiv { position:relative; max-width:768px; } #rollText { width:99.5%; max-width:768px; background:rgb(255,24,26); background-color:rgba(255,24,26, .8); padding:8px; color:#FFF; position:relative; left:0%; right:0; bottom:0; top:auto; font-size:.8em; border:none; -webkit-border-top-right-radius:0em; -webkit-border-bottom-left-radius:0em; -moz-border-radius-topright:0em; -moz-border-radius-bottomleft:0em; border-top-right-radius:0em; border-bottom-left-radius:0em; } #rollText a { position:relative; left:50%; line-height:2em; padding:.2em; -webkit-border-radius:.15em; -moz-border-radius:.15em; border-radius:.15em; } .bx-wrapper .bx-prev { display:none; } .bx-wrapper .bx-next { display:none; } #rollText h2 { font-size:2em; font-weight:bold; margin-bottom:.5em; margin-right:15px; width:100px; float:left; } #rollText p { font-size:1em; margin-bottom:.5em; } #rollText span { font-weight:bold; float:right; } #changeimg1 { display:none; } #changeimg2 { display:block; } #Bullet { position:absolute; top:55%; right:5%; } #Bullet ul li { display:inline; margin-left:20px; } #Bullet ul li img { width:15px; height:15px; } /*End of Roll CSS*/ /*followLink CSS*/ #followUS h2 { display:none; } #pclink { display:none; } #smartlink { display:block; float:right; } #smartlink ul li { display:inline; } #demo2 { margin-top:0px; } #Projects { width:30%; margin-left:3%; float:left; } .Projects1 { } .Projects2 { } .Projects3 { } #followLink { max-width:1000px; margin:0 auto; padding:18px; position:relative; } #followUSWrapper { width:100%; position:relative; float:right; bottom:0; margin-top:18px; } #shareThis { width:25%; position:relative; float:left; display:none; } #followUS { width:50%; position:relative; float:right; bottom:0; } #likeNet { float:right; width:50%; position:relative; } #likeNet #likeNetIn { float:left; width:66px; background:url(../image/share_box.png) no-repeat center top; margin-right:10px; margin-bottom:0px; padding-top:5px; } #likeNet ul li span { margin-left:20px; font-size:.9em; color:#0195f8; } #likeNet ul li img { margin-top:11px; } #likeNet ul li { display:inline; } /* End followLink CSS*/ /*news And Event CSS*/ /*End of news And Event CSS*/ /*Advertisement Roll*/ #AdvWrapper { display:none; } /*End of Advertisement Roll*/ /*footer CSS*/ #footerWrapper { background-color:#2a4660; } #footer { max-width:1000px; margin:0 auto; padding:25px; position:relative; overflow:hidden; } .footerOne { float:left; width:25%; border-right:solid #FFF 1px; padding-bottom:400px; margin-bottom:-400px; } .footerTwo { float:left; width:25%; margin-left:3%; border-right:solid #FFF 1px; height:100%; padding-right:10px; padding-bottom:400px; margin-bottom:-400px; } .footerThree { float:left; width:28%; margin-left:3%; border-right:solid #FFF 1px; padding-bottom:400px; margin-bottom:-400px; display:none; } .footerThreeMob { background-color:#09F; position:fixed; bottom:0; right:0%; padding:5px; display:block; width:80px; } .footerThreeMob p a { color:#2a4660; } .footerThreeMob p a:link { color:#FFF; text-decoration:none; } .footerThreeMob p a:visited { color:#FFF; text-decoration:none; } .footerThreeMob p a:hover { color:#bfc7cf; text-decoration:none; } .footerThreeMob p a:active { color:#2a4660; text-decoration:none; } .footerThreeMobIn { margin-top:10px; display:none; } .footerFour { float:left; width:25%; margin-left:3%; padding-bottom:400px; margin-bottom:-400px; } #Copyright { float:left; width:100%; margin-top:15px; margin-bottom:0px; padding-bottom:400px; margin-bottom:-400px; background-color:#2a4660; padding-top:15px; z-index:1; } /*End of footer CSS*/ #ContactMap { margin-top:145px; margin-left:20px; } .LoginMenuIn { margin-left:0%; }
Update: i have used web developer plugin and it is catching an error "Timestamp: 2/8/2014 5:26:42 PM
Error: The stylesheet http://websrv.municipality.gov.bh/ns/css/tablet_eng.css was not loaded because its MIME type, "text/html", is not "text/css".
Source File: http://websrv.municipality.gov.bh/ns/indexEn.jsp
Line: 0"
What is your browser's width? Because notice the media="only screen and (min-width:481px) and (max-width:768px)"> on it? It has a max-width:768px which will only take effect on view size with width of 481 - 768 pixels. Out of those ranges, css will load but will not be implemented.
A few things to try:
Run your css through a validator to make sure it isn't a simple syntax error.
Make sure it's not a caching issue – if you can't change the server settings, try a cachebuster by writing a version parameter to the .css file.
Concatenate your CSS files – you should do this anyways, along with minification, for optimized performance. Grunt is a good JavaScript taskrunner you can put into your deployment strategy that can handle this for you. GitHub example.
Switch to Sass (cleaner than regular CSS), and use Compass which concatenates and minifies for you.
Otherwise it's a little difficult to pinpoint the problem without more information.
Solved by Writing a Java Filter and adding text/css to all requests with .css extension.
if(request.getHeader("accept")!=null && request.getHeader("accept").indexOf("css") != -1){
response.setHeader("Content-Type", "text/css");
}
I have custom built CSS for me but am no longer in contact with the creator. I wanted to make a div (#rightcolumn) bigger by 55px. I did this by making iframe in the div bigger and it auto expands for me. However the banner, (#topsection), became a little short - so I had to add 55px to that to make it 1255px width.
Now page is off center some. When I try to edit other float commands to fix, the div's end up all over. I've tried for a few days. If anyone could help now with re-centering this. I would really appreciate.
Test page: Serious Sports Bigger
Link to css: CSS link
New Css
body {
margin:0;
padding:0;
line-height:1.5em;
background:#C0C0C0;
}
b {
font-size:110%;
}
em {
color:red;
}
#maincontainer {
width:1200px;
margin:0 auto;
}
#topsection {
background:#191919;
height:90px;
width:1255px
}
#contentwrapper {
float:left;
width:100%;
}
#contentcolumn {
margin:0 360px 0 180px;
color:#F1F1F1;
}
#leftcolumn {
float:left;
width:180px;
margin-left:-1200px;
background:#C8FC98;
}
#rightcolumn {
float:left;
width:355px;
margin-left:-355px;
background:#E5E5E5;
}
#footer {
clear:left;
width:100%;
background:#191919;
color:#FFF;
text-align:center;
padding:4px 0;
}
#footer a {
color:#62C301;
}
.innertube {
margin:10px;
margin-top:0;
}
.arrowgreen {
width:180px;
border-style:solid solid none solid;
border-color:#94AA74;
border-size:1px;
border-width:1px;
}
.arrowgreen ul {
list-style-type:none;
margin:0;
padding:0;
}
.arrowgreen li a {
font:bold 12px Verdana, Arial, Helvetica, sans-serif;
display:block;
background:transparent url(http://i39.tinypic.com/2r2rhnc.gif) 100% 0;
height:24px;
padding:4px 0 4px 10px;
line-height:24px;
text-decoration:none;
}
.arrowgreen li a:link, .arrowgreen li a:visited {
color:#5E7830;
}
.arrowgreen li a:hover {
color:#26370A;
background-position:100% -32px;
}
.arrowgreen li a.selected {
color:#26370A;
background-position:100% -64px;
}
You also have to change DOCTYPE to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
#maincontainer is only 1200px;, your contents are overflowing. Solution:
#maincontainer{
width:1255px; margin:0 auto;
}
Try to add this:
body {
margin : 0 auto;
}
All the CSS is being applied twice, you will need to look into that.
Just apply the following CSS:
#maincontainer {
width: 1255px;
margin: 0 auto;
}
#contentwrapper {
float: left;
width: 1200px;
}