I have one main div & in that main div i have included 2 differrent div it show good result in firefox but in ie it doesn't show that same result div just get one above the other.plz do help me.
my ccs is:
/* General elements */
body
{
padding: 0;
background: #db7093;
text-align: justify;
font-family: "Georgia", "Times New Roman","sans serif";
font-size: 12px;
color: black;
}
h1, h2, h3
{
margin-top: 0;
color: #8C0209;
}
h1
{
font-size: 1.6em;
font-weight: normal;
}
h2
{
font-size: 1.6em;
}
h3
{
font-size: 1em;
}
table
{
align:center;
border:1;
}
a
{
text-decoration: none;
color: #8C0209;
}
a:hover
{
border-bottom: none;
color : olive;
}
a img
{
border: none;
}
/* for Sidebars in menu section*/
.sidebar
{
width: 220px;
font-size: 12px;
margin-left:5px;
position:relative;
height:200px;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
padding: 0 0 20px 0;
}
.sidebar li ul {
}
.sidebar li li {
margin: 0 20px 0 15px;
padding: 8px 0px;
border-bottom: 1px #BBBBBB dashed;
}
.sidebar li h2 {
height: 30px;
margin: 0 0 0 0;
padding: 10px 15px 0px 15px;
background: #db7093 url(../images/img05.jpg) no-repeat left top;
letter-spacing: -1px;
font-size: 16px;
color: #FFFFFF;
}
.sidebar a
{
}
/* for spaces */
.spacer10
{
height:10px;
}
/*for main div's*/
.mainDiv
{
text-align:center;border:1px solid ;width:1000px;background:#FFFFFF;
}
.mainContentDiv
{
width:990px;padding-top:10px;margin-left:5px;height:auto;
}
.mainHeaderDiv
{
width:990px;padding-top:10px;margin-left:5px;height:160px;
}
/* for header logo */
.headerLogo
{
width:150px;height:140px;margin-top:5px;margin-left:5px;
}
.headerBanner
{
width:830px;height:140px;margin-top:5px;margin-right:5px;
}
.colorBorder
{
border:1px solid;
border-color:#ffe4e1;
}
.contentHolder
{
width:750px;
bottom:200px;
left:235px;
position:relative;
/*float:top;*/
min-height:570px;
background-color:#e8e8e8;
/*background-color:#d3d3d3;*/
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
a-hover:FFD700;
}
.tdLeftAlign
{
text-align:left;
line-height:25pt;
}
.tdCenterAlign
{
text-align:center;
line-height:25pt;
}
.msgText
{
color:#db7093;
text-align:center;
line-height:25pt;
}
.errorMsg
{
color:red;
text-align:left;
line-height:25pt;
}
.tdHeading
{
text-align:center;
line-height:25pt;
color:blue;
font-weight:bold;
}
.tdSpacer
{
line-height:30pt;
}
.tdData
{
text-align:left;
line-height:25pt;
color:blue;
font-weight:bold;
font-size:10pt;
}
.blockHeading
{
text-align:left;
line-height:25pt;
color:blue;
font-weight:bold;
font-size: 15px;
}
.pageTitle
{
text-align:center;
line-height:25pt;
color:green;
font-weight:bold;
font-size: 20px;
text-decoration:underline;
}
.spacer20
{
height:20px;
}
and page is actually includes three diffrent files PageHeader.jsp,PageFooter.jsp & SideMenu.jsp.
============================
PageHeader.jsp
====
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Dating Administration Tool</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link href="../include/css/default.css" type="text/css" rel="stylesheet" />
<link href="../include/css/popup.css" type="text/css" rel="stylesheet" />
<script src="../include/js/validate.js"></script>
<script src="../include/js/ajaxhandler.js"></script>
</head>
<body>
<!--div id="closeDiv" style="height:20px;border:1px solid;text-align:left;bachground-color:#db7093;display:none"><a href="#" onClick="javascript
:hidepopup('divPopUp','layerpop ');"><img src="" alt="Close" /></a></div-->
<div id='divPopUp' STYLE="position: absolute;margin-left:250px;margin-top:100px;align:center;z-index: 10000;background-color:white;display:none">
</div>
<div id='layerpop' STYLE="position: absolute;z-index:9000;height: 100%; width:100%; background-color: black ;opacity:.5;background:black;display:none;"></div>
<table>
<tr>
<td width="49%"></td>
<td width="2%">
<div class="mainDiv colorBorder">
<div class="mainHeaderDiv">
<table border="0">
<tr>
<td class="headerLogo colorBorder"><img src="../include/images/datinglogo.gif" height="150"></td>
<td class="headerBanner colorBorder"><img src="../include/images/datingbanner.png" height="150" width="850"></td>
</tr>
</table>
</div>
<div class="mainContentDiv colorBorder">
SideMenu.jsp
============
<div class="spacer20" style="text-align:right;width:980px;border:0px solid;height:60px;" >
<table border="0" width="100%" cellspacing="5px">
<tr>
<td>
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</div>
<div class="sidebar">
<ul>
<li>
<h2>Hedaing</h2>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
</ul>
</div>
PageFooter.jsp
===========
</div>
<div class="spacer10"></div>
<div class="spacer10"></div>
<div style="width:990px;">text<br/>
a link <a></a>
</div>
<div class="spacer10"></div>
</div>
</td>
<td width="49%"></td>
</tr>
</table>
</body>
</html>
================
i am including these files as first PageHeader.jsp , SideMenu.jsp and then code for content in that i am starting with <div class="contentHolder">
<div class="spacer10"></div>
all content
</div>
and then PageFooter.jsp
