By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,640 Members | 1,600 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,640 IT Pros & Developers. It's quick & easy.

I have one main div & in that main div i have included 2 differrent div it show good

P: 1
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
Oct 30 '09 #1
Share this Question
Share on Google+
1 Reply


TheServant
Expert 100+
P: 1,168
First of all, please use [code] tags around your code which makes it easier to read.

Secondly, IE does not conform to web standards, so generally, if it looks good in FF and is valid HTML and CSS, it's good work. IE has so many issues (getting better very slowly) that it's not worth changing all your CSS to accomodate for it. Unfortunately a lot of people still use it, so you need to do something.

I suggest that you make and include a special ie.css if the browser is IE, and in that, include all of your changes for CSS, so that it doesn't mess up your real coding.

One fix which I come across a lot to get you started is giving div's widths of 100%, even when not needed, so have a look at that. Here are some links for you:
Validate HTML
Validate CSS
Nov 1 '09 #2

Post your reply

Sign in to post your reply or Sign up for a free account.