Hi,
i am using css for my website it works properly in google chrome but while using internet explorer there is alignment issues... page contents are not properly aligned.
is there any solution for css so that it will not be browser specific.
My css code is given below..
/*
Table Of Contents
1. =GENERAL
2. =HEADER
2.1 =LOGO
2.2 =NAVIGATION
3. =CONTENT
3.1 =MAIN CONTENT
3.2 =SIDEBAR
3.2.1 =SIDEBAR NAVIGATION
3.2.2 =CONTACT INFO
4. =FOOTER
5. =MISC
5.1 =ROUNDED CORNERS
5.2 =CONTACT FORM
-----------------------------------------------------------------------------------*/
/* =GENERAL
------------------ */
body {
background:#114E7B url(../images/bg/bgBlue.jpg) no-repeat top center;
color:grey;
font:normal 12px Arial, Helvetica, sans-serif; position:relative;
}
a { color:#0000FF; }
a:hover { }
img{ border:none; }
code{ display:block; margin-bottom:15px; padding:10px; border-left:5px solid #ddd; }
blockquote{ display:block; margin:15px; padding-left:50px; background:#fff url(images/blockquote-quotemark.gif) no-repeat top left; }
blockquote p{ font-style:italic; font-family:Georgia,"Times New Roman",Times,serif; margin:0; height:1%; }
/* align images + text */
.img-left{ float:left;
margin-top:5px;
margin-bottom:40px;
margin-right:50px;
} /* Add this to any image you want to left align */
.img-right{ float:right;} /* Add this to any image you want to right align */
.text-right{ text-align:right; }
.text-center{ text-align:center;}
/* Clear Fix Hack - add class="fixed" to div's that have floated elements in them */
.fixed:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
.fixed{display:block;}
/* \*/
.fixed{min-height:1%;}
* html .fixed{height:1%;}
/* =HEADER
------------------ */
#login{
width: 400px;
height: 300px;
margin:0 auto;
background-color: white;
}
#header {
margin:5px auto 30px auto;
width:900px;
height: 200px;
background: url(../images/banner/banner3.jpg) no-repeat top center;
}
#headerAbout {
margin:5px auto 30px auto;
width:900px;
height: 200px;
background: url(../images/banner/banner_about_us.jpg) no-repeat top center;
}
#headerNews{
margin:5px auto 30px auto;
width:900px;
height: 200px;
background: url(../images/banner/news_banner.jpg) no-repeat top center;
}
#headerCareers{
margin:5px auto 30px auto;
width:900px;
height: 200px;
background: url(../images/banner/careers_banner.jpg) no-repeat top center;
}
#headerContact{
margin:5px auto 30px auto;
width:900px;
height: 200px;
background: url(../images/banner/contact_us_banner.jpg) no-repeat top center;
}
#headerControlPanel{
margin:5px auto 30px auto;
width:900px;
height: 200px;
background: url(../images/banner/cntrlpnl.jpg) no-repeat top center;
}
#header h1{
color:#FF8000;
}
#headerAbout h1{
color:#FF8000;
}
#headerNews h1{
color:#DF0101;
}
#headerCareers h1{
color:#FF8000;
}
/* =LOGO
------------------*/
.logo { padding:31px 10px 0px 10px; margin:0; float:left; color:#FFFFFF; }
.logo a{}
/* =NAVIGATION
------------------*/
.nav { padding:7px 0 0 0; margin:140px 20px 0 0; float:right;}
.nav ul { padding:0; margin:0; list-style:none; border:0;}
.nav ul li { float:left; margin:0; padding:0 2px 0 0; border:0;}
.nav ul li a { float:left; margin:0; padding:11px; color:#fff; font-size: 15px; text-decoration:none; outline:none; }
.nav ul li a:hover{ text-decoration:underline; }
.nav ul li a.active { text-decoration:underline; }
/* =CONTENT
-------------------*/
#contentTop{
width: 840px;
margin:0 auto;
background-color: white;
padding: 0 30px;
height:100px;
}
#contentTop table{
margin-left: 10px;
margin-bottom: 10px;
}
#contentTop td{
width: 200px;
color: red;
font-weight: bold;
font-size: 10px;
}
#contentBottom{
width: 840px;
margin:0 auto;
background-color: white;
padding: 0 30px;
}
#contentBottom Table{
background-color:white;
margin-bottom: 10px;
}
#contentBottom th{
background-color:#CA0308;
border-top:3px solid #970205;
border-bottom:3px solid #970205;
color:#ffe401;
}
#contentBusStructure{
width: 840px;
margin-left: 164px;
}
#content { width:840px;
margin:0 auto;
background-color:#FFF;
padding:0 30px;
}
#content a{
color:grey;
font-weight:bolder;
}
#content a:hover{
color:red;
}
#content table{
background-color:white;
margin:0 auto;
}
#content th{
font-size: 12px;
font-weight:bold;
color:white;
}
#content td{
font-size: 12px;
}
/*for second toplinks */
#header2 {
height:30px;
padding:5px 10px 20px 10px;
margin-top:5px;
/* border-top:2px solid #c5fc08;*/
}
#header2 ul{
margin:0;
padding:0;
font-size:14px;
list-style:none;
margin-left:10px;
}
#header2 li{
margin:10px 35px 0 15px;
padding:0;
list-style:none;
float:left;
color:red;
}
/* ------------End ----------------*/
#content h2 { margin:0; padding:10px 5px; font-size: 30px; color:#424a55; }
#content h3 { margin:0; padding:15px 5px; font-size:18px; }
#content h4 { margin:0; padding:15px 5px; font-size:16px; font-weight:bold; color: yellow; }
#content h4 { margin:0; padding:15px 5px; font-size:16px; font-weight:bold; color: maroon; }
#content ul { margin:0 40px 0 0; padding:0 10px 15px 20px; list-style:inside; }
#content li { margin:0; padding:0;}
#content ul li ul{ padding-bottom: 0px; }
#content p, #content li { line-height:24px; }
#content p { padding:5px; margin:0;}
/* =MAIN CONTENT
------------------*/
#maincontent { float:left;
width:600px;
padding:0 0 30px 0;
margin-top:20px;
}
#maincontent h2 { border-bottom:3px solid #e3e3e3;
margin-bottom:25px;
margin-right: 5px;
color:#DF7401;
}
#maincontent table{
line-height:1px;
margin-bottom: 10px;
padding: 2px;
margin-top:25px;
}
#maincontent th{
border-top:3px solid #970205;
border-bottom:3px solid #970205;
padding:5px;
color:#ffe401;
background-color:#CA0308;
text-align:center;
}
#maincontent tr td{
padding:2px;
font-size: 12px;
color:gray;
}
/* =SIDEBAR
------------------*/
#sidebar { float:right;
width:240px;
padding:12px 0 0 30px;
margin-top: -30px;
font-size:13px;
color:black;
color:grey;
}
#sidebar p{
color:#585858;
}
#sidebar table{
padding: 10px;
}
#sidebar th{
font-size: 22px;
font-weight:bolder;
color:#FF8000;
}
#sidebar td{
font-size: 10px;
}
#sidebar h3{ padding:10px 0; margin-bottom:10px; font-size:20px; border-bottom:3px solid #e3e3e3; }
#sidebar .title { background:url(images/news_title.gif) no-repeat left center; padding:5px 0 5px 20px; font-weight:bold;}
/* =SIDEBAR NAVIGATION
---------------------*/
#sidebar ul.sidebar_nav { padding:0; margin:0; list-style:none;}
#sidebar ul.sidebar_nav li { padding:5px 10px; border-bottom:1px solid #e5e5e5;}
#sidebar ul.sidebar_nav li a { background:none; color:#6e6e6e; font-weight:normal; padding:0 0 0 15px; text-decoration:none; }
#sidebar ul.sidebar_nav li a.active { color:#0000FF;}
#sidebar ul.sidebar_nav li a:hover { text-decoration:underline; color: #F87431;}
/* =CONTACT INFO
-------------------*/
#sidebar ul.contact_info { padding:0; margin:0; list-style:none;}
#sidebar ul.contact_info li { width:210px; float:left; background:url(images/cont_bg.gif) no-repeat left center; padding:0 0 0 15px; margin:0 0 0 5px;}
#sidebar ul.contact_info li a { padding:0; margin:0; background:none;}
/* =FOOTER
-------------------*/
#footer { background: url(images/bg_footer.gif);
padding:0; height:58px;
margin:0 auto;
margin-top: 15px;
margin-left: 40px;
padding:10px 40px;
width:830px;
border-top:2px solid #c5fc08;
height:50px;
font-weight: bolder;
}
#footer p { font-size: 12px; color:#fff;}
#footer a { color:#fff; text-decoration:underline;}
.copyright{ float:left;}
.credits{ float:right;}
#footer ul{
margin:0;
padding:0;
font-size:18px;
list-style:none;
margin-left: 160px;
}
#footer li{
margin:10px 15px 0 15px;
padding:0;
list-style:none;
float:left;
}
/* =MISC
-------------------*/
/* =ROUNDED CORNERS
-------------------*/
#round_top{ width:900px; height:20px; background:url(../images/round-top.png) no-repeat top center; margin:0 auto; }
#round_bottom{ width:900px; height:20px; background:url(../images/round-bottom.png) no-repeat top center; margin:0 auto; }
/* =CONTACT FORM
-------------------*/
form { margin:0; padding:5px 10px;}
form ol { margin:0; padding:0; list-style:none;}
form li { margin:0; padding:0; background:none; border:none; display:block;}
form li.buttons { margin:5px 0 5px 110px;}
form label { margin:2px 10px 2px 0; width:170px; display:block; padding:3px 0;
text-transform:capitalize; float:left; text-align:right;}
form label span { color:#2c2c2c;}
form input.text { width:320px; border:1px solid #dcdcdc; margin:5px 0; padding:5px; height:16px; background:#FFF; float:left;}
form textarea { width:320px; border:1px solid #dcdcdc; margin:5px 0; padding:5px; background:#FFF; float:left;}
#menu
{ height:45px;
margin-top: 120px;
}
.toplinks
{
width:100px;
text-align:center;
float:right;
height:30px;
line-height:35px;
font-family:tahoma;
font-size:10px;
font-weight:bold;
background-color:#A9D0F5;
display:block;
margin:40px 0 0 1px;
border:1px solid #993300;
color:#FF8000;
text-decoration:none;
}
.toplinks:hover
{ color:maroon; background-color:#FF8000;
}
h1{
color: white;
}
h2{
color: white;
}
h3{
color: #F87217;
}
.table-center{margin-left: 450px;
margin-right: 100px ;
margin-bottom: 20px;
margin-top: 20px;
}
.border{
border: 1px solid #cccccc;
color: #000000;
font-family: Arial,Helvitica,sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
}
.borderHidden{
border: none;
color: #000000;
font-family: Arial,Helvitica,sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
}
.redbold{
color: #CA0000;
font-family: Arial,Helvitica,sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.cellcolor
{
background-color: #84C1DF;
}
.seats-table{
line-height:1px;
margin-bottom: 20px;
margin-left: 100px;
margin-right: 0px;
background-color: silver;
}
.table-left{float:left; margin:10px 15px 15px 5px;}
.m{
font-size: 20px;
color: red;
}
#login
{
height:200px;
width:300px;
margin-top:200px;
}
#login table th
{
font-weight:bolder;
color:red;
}
#login table td
{
font-weight:bold;
font-size:15px;
color:blue;
}Thanks in advance
:)