What is wrong with this css code? How do I make It Display Correctly In Every Resolut

HTML & CSS
1

What is wrong with this css code? How do I make It Display Correctly In Every Resolution?

@charset "utf-8";
/* CSS Document */

body, div, span, p, h1,h2,h3,h4,h5,h6, a, img, ul,li,ol, input,textarea{ margin:0px; padding:0px; outline:none; border:none; }
h1,h2,h3,h4,h5,h6{ margin:0px; padding:0px; line-height:normal; font-weight:normal; }
ul,ol,li{ list-style:none;}
a{outline:none; text-decoration:none;}
img{float:left; border:0px;}


/* ----------------------------- Layout Starts from here ------------------------- */

body{
	background:url(images/body_bg.jpg) repeat;
	margin: 0;
        padding: 0;
}

#page {
width: 100%
}

#compare
{
position:absolute;
margin:620px 0 0 210px;
float:left;
left:0;
top:0;
z-index:1
}

#basictitle
{
position:absolute;
left:20.4%;
top:91.5%;
z-index:4
}

#basicnowonly
{
position:absolute;
left:20.4%;
top:96%;
z-index:4
}

#basicprice
{
position:absolute;
left:20.4%;
top:98.5%;
z-index:4
}

#normaltitle
{
position:absolute;
left:37.6%;
top:91.5%;
z-index:4
}

#normalnowonly
{
position:absolute;
left:37.6%;
top:96%;
z-index:4
}

#normalprice
{
position:absolute;
left:37.6%;
top:98.5%;
z-index:4
}


#bestvalue
{
position:absolute;
left:58%;
top:86%;
z-index:4
}

#bestvaluetitle
{
position:absolute;
left:55.4%;
top:91.5%;
z-index:4
}

#bestvaluenowonly
{
position:absolute;
left:55.8%;
top:96%;
z-index:4
}

#bestvalueprice
{
position:absolute;
left:55.8%;
top:98.5%;
z-index:4
}

#ultimatetitle
{
position:absolute;
left:72.5%;
top:91.5%;
z-index:4
}

#ultimatenowonly
{
position:absolute;
left:72.8%;
top:96%;
z-index:4
}

#ultimateprice
{
position:absolute;
left:72.8%;
top:98.5%;
z-index:4
}

#outer-wrap{
	width:100%;
	min-height:900px;
	float:left;
	background:url(images/overlay-grad.png) repeat-x left top;
}

#main-wrap{
	width:820px;
	float:none;
	margin:0 auto;
}

/* --------- Header content ---------- */
#header{
	width:820px;
	height:91px;
	display:block;
	float:left;
	margin:60px 0 0 203px;
	position:relative;
	z-index:20;
}

#header h1{
	display:block;
	float:left;
	position:absolute;
	top:0px;
	left:-58px;
}

#menu{
	width:1224px;
	height:59px;
	float:right;
	background:url(images/menu_back.png) no-repeat;
}

ul.navigation{
	min-width:329px;
	height:52px;
	float:left;
	margin:7px 0 0 9px;
}
ul.navigation li{
	width:auto;
	float:left;
	margin-right:10px;
}
ul.navigation li.about{
	margin:0 0 0 -26px;
}
ul.navigation li.products{
	margin:0 13px 0 -5px;
}
ul.navigation li a{
	width:90px;
	height:48px;
	float:left;
	font-family:Myriad Pro;
	font-size:15px;
	font-weight:bold;
	color:#3c3c3c;
	text-align:center;
	line-height:38px;
}
ul.navigation li a:hover, ul.navigation li a.active{
	width:128px;
	height:42px;
	float:left;
	color:#ffffff;
	background:url(images/nav-hover.png) no-repeat center bottom;
}

/* ---- Site Search content ----- */
#siteSearch{
	width:352px;
	display:block;
	float:right;
	margin:8px 10px 0 0;
}

#siteSearch input{
	width:340px;
	height:42px;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:13px;
	color:#828993;
	line-height:20px;
	padding:0 17px;
	margin-right:11px;
	background:url(images/search_bg.png) no-repeat;
}
#siteSearch a{
	width:53px;
	height:32px;
	float:right;
	margin:-38px 8px 0 0;
	background:url(images/search_go.png) no-repeat;
}

/* ------------------------------------------------- Stylin Banner content --------------------------------------- */
#banner-wrap{
	width:820px;
	height:395px;
	float:left;
	position:relative;
	z-index:5;
}
.banner{
	width:820px;
	height:341px;
	float:left;	
	background:url(images/banner_back.png) no-repeat;
}

img.banner-back{
	position:absolute;
	top:-102px;
	left:-159px;
	z-index:-1;
}

.banner-content{
	display:block;
	float:right;
	margin-right:48px;
}
	




/* ------------------------------- Middle content in header ----------------------------------- */

#middleContent{
	width:100%;
	float:left;
	margin:0px 0 0 45px;
	/* margin:52px 0 0 45px; */
	position:relative;
	z-index:10;
}

img.spline{
	position:absolute;
	top:-1px;
	left:-260px;
	z-index:-2;
}

#middleContent p{
	width:740px;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	line-height:22px;
	color:#f5f5ed;

	margin:21px 0 0 0;
}

/* ----------------------------------- Hosting Plans ---------------------------------------- */

#plans{
	width:820px;
	float:left;
	padding-bottom:32px;
}

ul.panel{
	width:100%;
	display:block;
	float:left;
}
ul.panel li{
	display:block;
	float:left;
}
ul.panel li img{
	float:left;
	margin-bottom:8px;
}
ul.panel li p{
	width:100%;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#dbdbdb;
	text-align:center;
}

ul.panel li.plan1{
	width:155px;
	float:left;
	padding:0 83px 0 40px;
	margin-left:0px;
	background:url(images/plan-seperator.png) no-repeat right 75px;
}
ul.panel li.plan1 p{
	margin:0 0 0 10px;
}

ul.panel li.plan2{
	width:140px;
	float:left;
	padding:0 71px 0 64px;
	background:url(images/plan-seperator.png) no-repeat right 75px;
}
ul.panel li.plan2 p{
	margin:0 0 0 16px;
}

ul.panel li.plan3{
	width:136px;
	float:left;
	margin:0 0 0 78px;
}
ul.panel li.plan3 p{
	width:130px;
	float:left;
	margin:0 0 0 19px;
}

/* -------------------------------------------------- Body content ------------------------------------------------ */
#content-wrap{
	width:100%;
	float:left;
	background:url(images/content_bg.png) repeat;
}

/* Gradients top and bottom */
span.gradient-top{
	width:100%;
	height:19px;
	float:left;
	background:url(images/content-top_wrap.png) repeat-x left top;
}
#inner-wrap{
	width:100%;
	float:left;
	padding-bottom:17px;
	background: url(images/content-botm_wrap.png) repeat-x left bottom;
}
/* end of backgrounds */

#content{
	width:820px;
	float:none;
	margin:0 auto;
}

.leftContent{
	width:480px;
	float:left;
	padding:20px 60px 6px 20px;
	background-color:#ffffff;
	margin:0px 18px 0 0;
}
.leftContent h2{
	font-family:'YanoneKaffeesatzRegular';
	font-size:37px;
	color:#414141;
	padding-bottom:35px;
}

.leftContent h3{
	width:480px;
	float:left;
	font-family:'YanoneKaffeesatzRegular';
	font-size:26px;	
	color:#414141;
	padding-bottom:25px;
}

.leftContent p{
	width:100%;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	line-height:18px;
	color:#2e2e2e;
	padding-bottom:23px;
}

.rightContent{
	width:232px;
	float:left;
	padding:19px 0 0 0;
}
.rightContent h3{
	width:100%;
	float:left;
	font-family:'YanoneKaffeesatzRegular';
	font-size:37px;
	color:#414141;
	padding-bottom:37px;
	letter-spacing:-1px;
	text-transform:uppercase;
}
p.newsletter{
	width:223px;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	color:#434343;
	letter-spacing:-1px;
}
p.newsletter span{
	width:auto;
	float:left;
	font-size:12px;
	color:#5c5c5c;
	letter-spacing:0px;
	padding-bottom:17px;
}
p.tag{
	width:240px;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#5c5c5c;
	padding-bottom:16px;
}

.rightContent input{
	width:145px;
	height:29px;
	float:left;
	background:#fff;
	border:1px solid #e8e6e0;
	margin-right:12px;
}
.rightContent a{
	width:auto;
	float:left;
	margin:9px 0 0 0;
}

/* ------------------------------------------------------ Footer Content ----------------------------------------------- */
#footer-wrap{background: #000000;
	width:100%;
	float:left;
}

#footer{background: #000000;
	width:820px;
	height:143px;
	margin:0 auto;
	position:relative;
	z-index:10;
	padding:51px 0 0 0;
}
img.footGrad{background: #000000;
	position:absolute;
	top:0px;
	left:-93px;
	z-index:-1;
}

p.callUs span{	
	width:222px;
	float:left;
	font-family:'Colaborate-ThinRegular';
	font-size:34px;
	color:#848484;
	line-height:27px;
}
p.callUs{
	width:213px;
	display:block;
	float:left;
	font-family:'Colaborate-ThinRegular';
	font-size:22px;
	line-height:20px;
	color:#646d79;
	padding-bottom:16px;
	margin-right:17px;
}
p.email{
	clear:left;
	width:162px;
	float:left;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:14px;
	font-style:italic;
	color:#646d79;
	line-height:27px;
}
p.email a{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:14px;
	font-style:italic;
	color:#848484;
	line-height:27px;
}

/* ---- Footer links ----- */

div.content-box1{
	width:233px;
	float:left;
	margin-right:79px;
	margin-left:20px;
}

div.content-box2{
	width:182px;
	float:left;
	margin-right:83px;
}
ul.footNav{
	width:180px;
	display:block;
	float:left;
}
ul.footNav li{
	width:90px;
	float:left;
}
ul.footNav li a{
	width:90px;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#5e5e5e;
	line-height:23px;
}

div.content-box3{
	width:163px;
	float:left;
}
div.content-box3 p{
	width:100%;
	float:left;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#5e5e5e;
	line-height:19px;
}
div.content-box3 p a{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#5e5e5e;
	line-height:19px;
}


/* -------------------------------------------------------------------- Inner Page Styles Starts from here ------------------------------------------------------------ */

/* --------- Header content ---------- */
.header{
	width:820px;
	height:91px;
	display:block;
	float:left;
	margin:78px 0 5px 0;
	position:relative;
	z-index:20;
}

.header h1{
	display:block;
	float:left;
	position:absolute;
	top:0px;
	left:-58px;
}


/* --------------------------------------------- About Page ------------------------------------------ */

.leftContent a{
	min-width:35px;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#41c2d9;
}
.leftContent a:hover{
	color:#434343;
	text-decoration:underline;
}

/* right Content  */
.rightContent ul.lists{
	width:230px;
	float:left;
	margin:-10px 0 20px 0;
}
ul.lists li{
	width:230px;
	float:left;
}
ul.lists li a{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#5c5c5c;
	line-height:19px;
}
ul.lists li a:hover{
	color:#41c2d9;
}

/* ------------------------------------------------- Products page ---------------------------------------------- */

#products{
	width:480px;
	float:left;
}
#products li{
	width:100%;
	float:left;
	margin-bottom:30px;
}
#products li div{
	width:300px;
	display:block;
	float:right;
	padding:20px 0 0 0;
}
#products li div p{
	width:100%;
	float:left;
	text-align:justify;
}

/* ----------------------------------- Download Page  ------------------------------------- */

.leftContent a.red{
	color:#F00;
}
.leftContent a.red:hover{
	color:#434343;
	text-decoration:underline;
}

/* --------------------------------- Contact Page ------------------------------------------ */

/* Contact Form */
.contact-form{
	width:420px;
	float:left;
}
.contact-form p{
	width:100%;
	display:block;
	float:left;
	padding-bottom:10px;
}
.contact-form label{
	width:125px;
	float:left;
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#4c4c4c;
	text-transform:uppercase
}
.contact-form input{
	width:295px;
	height:32px;
	float:left;
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#4d4d4d;
	line-height:normal;
}
.contact-form textarea{
	width:295px;
	height:150px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#4d4d4d;
	float:left;
}

.contact-form p.buttons{
	width:295px;
	display:block;
	float:right;
	padding-bottom:20px;
}
.contact-form p.buttons input{
	width:60px;
	float:left;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:center;
	font-weight:normal;
	text-transform:uppercase;
	color:#cccccc;
	background-color: #969696;
	border:0px;
	cursor:pointer;
}
.contact-form p.buttons input.reset{
	width:60px;
	float:left;
	margin-right:10px;
}

.rightContent p.address{
	width:120px;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#4d4d4d;
	line-height:19px;
}


/* ------------------------------------ Privacy Page ---------------------------------- */
.leftContent p.little{
	font-size:11px;
}
2

Hi CSSCODERS. Welcome to SitePoint. :slight_smile:

It’s not so easy to answer your question without seeing the HTML to which this code applies (or ideally the live page) but the first thing I notice is a lot of position: absolute declarations. Position:absolute should only be rarely used on a web page, as these elements are taken out of the document flow and will be very hard to organize nicely on a fluid page.

3

Well, it’s hard to answer your question since I have no idea what you want to do. Is there any html coming with this?

But now I’m at it, your styles could use some cleaning.

body, div, span, p, h1, h2, h3, h4, h5, h6, a, img, ul, li, ol, input, textarea { margin:0; padding:0; outline:none; border:none; font-weight:normal; }
ul ,ol { list-style:none; }
a { text-decoration:none; } /* no :hover declaration? */
img { float:left; display:block; }

4