I created a simple web page with gradient background settings and some texts.I can see my web page in google chrome at its original structure that i give.But in IE it changes.I could not see the gradient background I applied.Can any one help me to fix this problem?How can i give a default structure in all browsers?
Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Contact us</title>
</head>
<style type="text/css">
body
{
background-color:#000000;
}
.adv
{
background-image:url('p5.jpg');
height:100px;
width:auto;
}
.css-grd {
/* default background colour, for all layout engines that don't implement gradients */
/* gecko based browsers */
/*background: -moz-linear-gradient(top, #55aaee, #003366);*/
background: -moz-linear-gradient(top, #800000 , #804040);
border:0px, solid;
-webkit-border-radius:30px;
-moz-border-radius:30px;
/* webkit based browsers */
/*background: -webkit-gradient(linear, left top, left bottom, from(#55aaee), to(#003366));*/
background: -webkit-gradient(linear,left top, left bottom, from(#800000),to(#804040));
color: #000000; /* text colour (black) */
height:50px; /* gradient uses the full height of the element */
padding: 5px; /* distance from border edge to text */
}
.css-grd2
{
background: -moz-linear-gradient(top, #800000 , #804040);
border:0px,solid;
-webkit-border-radius:30px;
-moz-border-radius:30px;
background: -webkit-gradient(linear,left top,left bottom,from(#800000),to(#804040));
height:600px;
}
div.pne
{
background: -moz-linear-gradient(top, #804040 , #800000);
border:0px,solid;
-webkit-border-radius:30px;
-moz-border-radius:30px;
background: -webkit-gradient(linear,left top,left bottom,from(#804040),to(#800000));
padding-left:10px;
height:10px;
width:400px;
}
.cont
{
font:"Times New Roman", Times, serif;
color:#FFFFFF;
font-size:300%;
font-style:italic;
font-weight:bold;
padding-left:30px;
}
.conttab
{
font:"Times New Roman", Times, serif;
color:#FFFFFF;
font-size:150%;
font-style:italic;
font-weight:bold;
padding-left:60px;
}
ul {
padding:0px;
margin:auto;
list-style:none;
float:right;
}
ul li {
float:left;
display:block; /*For ignore double margin in IE6*/
margin: 10px;
}
ul li a {
text-decoration:none;
float:right;
color:#FFFFFF;
cursor: pointer;
font: 900 14px/22px "Arial", Helvetica, sans-serif;
}
ul li a span {
margin:inherit /*0 10px 0 -10px;*/
padding: 1px 8px 5px 18px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
}
</style>
<body>
<div class="adv"><br />
<div id="ii" class="css-grd">
<div id="nav" class="current">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">Our Clients</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div class="css-grd2">
<p><div class="cont"><br />Contact Us</div></p>
<div class="pne"></div><br />
<div class="conttab"> Phone number:06jjgjgjhjh<br />Mobile :900000000<br />
Fax: :97100000000
<br />
E-mail: ssss@legendsdubai.com
</div>
<div class="trans25"></div>
</div>
</body>
</html>
Comment