Hi
html layout not rendering properly in internet explorer.
I have attached the screenshot of the layout rendering in firefox and internet explorer.
Please see the area of red rendering in internet explorer and gap between yellow bar and red in firefox where as the same gap is not rendering properly in internet explorer.
Also the color of body tag in css has been set to white but where as in internet explorer it is rendering gold color.
code for html page
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../css/LifeSangaati_css.css" media="screen">
<!-- include the Tools for carousel -->
<script src="../javascript/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../css/slideshow/tabs-slideshow.css">
</head>
<body>
<div id="login">
</div>
<div id="masthead">
</div>
<div id="menu">
</menu>
<div class="images">
<!-- first slide -->
<div style="display: none;">
<h3>First pane</h3>
<img src="slideshow_files/screens.png" alt="Flying screens" style="float: left; margin: 0pt 30px 20px 0pt;">
<p style="font-weight: bold;">
The promise of marriage.
</p>
<p>
Times have changed and perhaps not use so numerous more formalities, and you tell it sufficient.
</p>
</div>
<!-- second slide -->
<div style="display: none;">
<h3>Second pane</h3>
<img src="slideshow_files/eye192.png" alt="Flying screens" style="float: left; margin: 0pt 30px 20px 0pt;">
<p style="font-weight: bold;">
Registration
</p>
<p>
abcd ehakdkad a dajdkadkadf afkafkakfakfkafafjafkafkakfakf afmakfkafkafkakf afkafkakfkafkakfkaf afkafkafkkafkaf afkafkakfkafkaf afkafkakfkafkafkafkakfakfkafkaf akfkafkafkafkakf fkakfkaf afkakf afkakf afkaf afk akfaf afafkafkakfkafkaf kafkfafkaf a a f af a af afafafa a fa afaffkfkfkakkakfkfkfkk.
</p>
</div>
<!-- third slide -->
<div style="display: block;">
<h3>Third pane</h3>
<p style="font-weight: bold;">
Premium Membership.
</p>
<p>
Hello How are you.
</p>
</div>
</div>
<!-- the tabs -->
</p><div class="slidetabs">
<a class="" href="#"></a>
<a class="" href="#"></a>
<a class="current" href="#"></a>
</div>
<div style="clear: both; margin: 30px 0pt; text-align: center; padding-right: 40px;">
<!--<button onclick='$(".slidetabs").data("slideshow").play();'></button>
<button onclick='$(".slidetabs").data("slideshow").stop();'></button>-->
</div>
<script language="JavaScript">
$(function() {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true
// use the slideshow plugin. It accepts its own configuration
}).slideshow();
});
</script>
<div id="quick-search">
</div>
<div id="area">
</div>
<body>
</html>code for CSS
body {
width: 990px;
height:968px;
background-color: white;
}
#login{
width:990px;
height:50px;
background-color:blue;
}
#masthead{
width:990px;
height:90px;
background-color:green;
}
#menu{
width:990px;
height:50px;
background-color:gold;
}
#tab{
width:650px;
height:300px;
margin-top:60px;
background-color:green;
float:left;
}
#quick-search{
width:330px;
height:400px;
margin-top:-280px;
margin-right:3px;
float:right;
background-color:red;
}
#area{
width:990px;
height:300px;
}thanks.
Looking forward to your reply.
