CSS IE Woes [Resolved]

**ober0330** · Jan 31st, 2005, 11:12 AM

So I'm switching a work internal site over to a complete CSS design, but I'm having one major problem. I have the following code that contains a small navigation menu and then the content:

Code:

#navigate {
	background-color: #0099ff;
	float: left;
	width: 180px;
}

#content {
	margin-left: 182px;
	border: 1px solid red;
}

Pretty simple, right? It displays correctly in Opera, Firefox and Netscape but craps out in IE on one specific page. On that page I have various elements, some being tables that use percentages to specify width. I am assuming that is the main problem since the css styled elements in that "content" div fit correctly.

I can post the code of that entire page if it would help. (It is a lot, tho)

And it does pass the W3C validator without errors.

I'm pulling my hair out here.

**mendhak** · Jan 31st, 2005, 11:17 AM

Yes, upload the HTML page here. If it's an external CSS file, that too. No images required. Postage not necessary.

**ober0330** · Jan 31st, 2005, 11:36 AM

By the way, I've posted this on another forum also that doesn't use those annoying scroll bars. If you're like me, you like to see it all in one shot, so here is a link to it:

http://www.phpfreaks.com/forums/inde...howtopic=51529

**visualAd** · Jan 31st, 2005, 11:51 AM

As this is a HTML issue, it would be better if you posted the HTML source after the PHP has been executed. Is it also possible to post a link to the page or a screen shot showing exactly what happens in IE and how it messes up?

**ober0330** · Jan 31st, 2005, 11:56 AM

I can't give you link to it because the webserver is internal and you can't see it from the outside. I will post a screenshot however.

And yeah... someone on the other forum asked for that too. My bad:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Volvo Powertrain - Mack Division E&amp;R Lab Databases</title>
<link rel="shortcut icon" href="../images/volvo.ico">
<link rel="stylesheet" type="text/css" href="../ss.css"><script type="text/javascript" src="../js/cnphp.js"></script>
<script type="text/javascript" src="../js/hidemenu.js"></script>
<script type="text/javascript" src="../js/CalendarPopup-combined.js"></script>
<script type="text/javascript">document.write(getCalendarStyles());</script>
</head>
 
<body><div class="tablehead2">
<div id="floatLheader">VOLVO POWERTRAIN</div>
<div id="floatRheader">Monday . January 31st . 2005</div>
</div>


<div id="navigate">
<script type="text/javascript" src="../js/goback.js"></script>

<div class="prev"><a href="../" style="color:white">Database Selection</a></div>

<div class="navcontain">
    <div class="navmenu">
    <br>
    <p class="header3">Nonconformance Menus:</p><br>
    <a href="index.php" class="other3">Home</a><br/>
    <a href="cn.php">Cell Equipment</a><br/>
    <a href="find.php?type=1&amp;action=1" class="chatter" style="color:gray;padding-left:10px">- Reports</a><br/>
    <a href="points.php?point=1" class="chatter" style="color:gray;padding-left:10px">- Cal Points</a><br/>
    <a href="pn.php">Portables</a><br/>
    <a href="find.php?type=2&amp;action=1" class="chatter" style="color:gray;padding-left:10px">- Reports</a><br/>
    <a href="points.php?point=2" class="chatter" style="color:gray;padding-left:10px">- Cal Points</a><br/>
    <br>
    </div>
</div>

<div class="prev"><a href="javascript:goBack()" style="color:white;">&laquo; Previous Page &laquo;</a></div>
<div class="navbottom"><img src="../images/php-power-micro.png" width="80" height="15" alt="php icon"></div>
</div>
<div id="content">


<div class=title3>Cell Equipment Non-Conforming Action</div>

<form action="submitreport.php" enctype="multipart/form-data" name="dform">

<div align="center">
    <div class=region style="background-color:Silver;text-align:left">Section 1</div>
</div>

<table width="90%" align="center" cellpadding="3" cellspacing="2">
    <tr>
        <td>Record Number: 
            <span style='font-weight:bold;color:green;font-size:12pt;'>971</span>        </td>
        <td align="right">
        Cell Number: <select name="CellNum" size="1" onChange="gofull()">
    	    <option value='99' selected></option><option value='1'>1</option></select>
        </td>
    </tr>
    
    <tr>
        <td>Component Tag Number: 
        <select name='TagNum' size='1'><option value='1' selected></option></select>        </td>
        <td align="right">
        <script type="text/javascript">
        var cal1df = new CalendarPopup("testdiv1");
        cal1df.showNavigationDropdowns();
        </script>
        Date Discovered: <input type='text' name='Date_Found' size='12' maxlength='10'>        <A HREF="#" onClick="cal1df.select(document.dform.Date_Found,'anchor1','MM/dd/yyyy'); return false;" NAME="anchor1" ID="anchor1">select</A>
        </td>
    </tr>
    
    <tr>
        <td>Tag Description: 
                </td>
        <td align="right">
        <script type="text/javascript">
        var cal1good = new CalendarPopup("testdiv1");
        cal1good.showNavigationDropdowns();
        </script>
        Last Known to be Good: <input type='text' name='Last_Known' size='12' maxlength='10'>    <A HREF="#" onClick="cal1good.select(document.dform.Last_Known,'anchor2','MM/dd/yyyy'); return false;" NAME="anchor2" ID="anchor2">select</A>
        </td>
    </tr>
    
    <tr>
        <td colspan="2">Problem Symptoms: 
        <input type='text' name='SYMP' size='40' onkeyup='checkap(document.dform.SYMP)'></td>
    </tr>
    
    <tr>
        <td colspan="2">Cal Range:
    	    <select name='CalRange' size='1' onChange="gofull()"><option value='99999' selected></option><option value='1'>         -30lb -20lbs, -10lbs, 0lbs, 10lbs, 20lbs,</option><option value='84'> Mass Flow Computer</option><option value='2'>+2500 to -2500 lb/ft</option><option value='3'>0 - 100 In H2O</option></select> (<a target='_blank' href="points.php?point=1">Add New Range</a>)        </td>
    </tr>
</table>

<table width="90%" align="center" border="0" cellpadding="3" cellspacing="2">
    <tr>
        <td class='title4' colspan="2" bgcolor="#ffffcc">Immediate Resolution of Nonconformity:</td>
    </tr>
    <tr>
        <td colspan="2">
        <textarea cols='50' rows='3' name='Immed_Res' onkeyup='checkap(document.dform.Immed_Res)'>N/A</textarea></td>    </tr>
    <tr>
        <td>Technician's Name: 
        <select name='User'><option value='1' selected></option><option value='8'>B.P. Dennis</option></select>        </td>
        <td>Date Generated: 
            <span class='chatter'>1/31/2005</span><input type='hidden' name='GenDate' value='1/31/2005'>        </td>
    </tr>
</table>
<div align="center">
    <div class=region align="center" style="background-color:Silver;text-align:left">Section 2</div>
</div>
<table width='90%' align="center">
    <tr>
        <td class=title4 colspan="2" bgcolor="#ffffcc">Impact of Nonconformity on Previous Test Results:</td>
    </tr>
    <tr>
        <td colspan="2">
        <textarea cols=50 rows=3 name=impact onkeyup='checkap(document.dform.impact)'>N/A</textarea></td>
    </tr>
    <tr>
        <td><strong>Impact Name:</strong>
        <input type=text name='impname' size=25></td>
        <td><strong>Impact Date:</strong>
        <input type=text name='impname' size=25></td>
    </tr>
    <tr>
        <td colspan="2" bgcolor="#ffffcc"><span class=title4>Action Needed in Production:</span>         
        <input type='checkbox' name='ckActionProd' value='0'><span class='chatter'>(If checked, notify Quality Assurance Manager)</span></td>
    </tr>
    <tr>
        <td><strong>Name:</strong> 
        <input type='text' onkeyup='checkap(document.dform.prod_name)' name='prod_name' size='25' value='N/A'>		</td>
        <td><strong>Date:</strong> 
        <input type='text' name='prod_date' size='25'></td>
    </tr>
</table>
<input type=hidden name="point" value="1">
<br/>
<div align='center'><input type="submit" name="s" value="Submit">&nbsp;&nbsp;&nbsp;&nbsp;<input type="Reset"></div>
</form>

<DIV ID="testdiv1" STYLE="position:absolute;visibility:hidden;background-color:white;layer-background-color:white;"></DIV>
<hr width="85%">
<p class="other">Copyright &copy; VOLVO Powertrain 
2003-2005<br/>Procedure Modified: 1/31/2005</div>
</body>
</html>

**ober0330** · Jan 31st, 2005, 12:02 PM

How it should look (shown in Opera):
www.whproductions.com/fd/ober/Opera.jpg

How it looks in IE:
www.whproductions.com/fd/ober/IE.jpg

EDIT: obviously the red line is just so I can see where things are.

**visualAd** · Jan 31st, 2005, 12:13 PM

And the style sheet?

**ober0330** · Jan 31st, 2005, 12:36 PM

I'd rather not. I use the same style sheet for the display of about 6 different applications.

OH well. I tried to trim out some of the stuff you don't need:

Code:

A  {
	text-decoration : none;
    font-family: Tahoma,Verdana,Arial,serif;
}

body {
	margin: 0px;
	padding: 0px;
}

div {
	font-family: Tahoma,Verdana,Arial;
	font-size: 8pt;
}

img  {
	border: none;
}

input, select, textarea  {
	font-family : Tahoma,Verdana,Arial;
	font-size : 8pt;
	border: 1px solid #0099FF;
	background-color: #DCDCDC;
}

p  {
	font-family : Tahoma,Verdana,Arial;
	font-size : 10pt;
	margin-top : 0cm;
	margin-bottom : 0cm;
	font-weight : normal;
}

option  {
	font-family : Tahoma,Verdana,Arial;
	font-size : 8pt;
}

span {
	font-family: Tahoma,Verdana;
	font-size: 8pt;
}

table{
	font-family: Tahoma;
}

td {
	font-family: Tahoma,Verdana,Arial;
	font-size: 8pt;
}

:hover  {
	color: navy;
}

:link, :visited {
	color : blue;
}  

:active {
	background-color: #FFFFAC;
}

.bground  {
	position : absolute;
	left : 15px;
	top : 2px;
	font-size : 14pt;
	font-style : italic;
	color : Silver;
	font-weight : bold;
	font-family : Algerian,Tahoma,Verdana,Arial;
}

.boldred {
	font-weight: bold;
	color: red;
}

.border1px {
	border: 1px solid black;
}

.borderbottom {
	border-bottom: 2px solid black;
}

.bordertop {
	border-top: 1px solid black;
}

.bordertop2 {
	border-top: 2px solid black;
}

.borderltb2 {
	border-top: 2px solid black;
	border-bottom: 2px solid black;
	border-left: 1px solid black;
	text-align: center;
	color: blue;
}

.borderrtb2 {
	border-top: 2px solid black;
	border-bottom: 2px solid black;	
	border-right: 2px solid black;
	text-align: center;
	color: blue;
}

.bordertb2 {
	border-top: 2px solid black;
	border-bottom: 2px solid black;	
	text-align: center;
	color: blue;
}

.cdivcontain {
	text-align: center;
	width: 100%;
}

.chactivecell {
	border-right: 1px solid gray;
	border-bottom: 1px solid gray;	
}
.chatter  {
	font-size : 8pt;
	color : gray;
}

.data  {
	font-size : 8pt;
	text-align : left;
	color : blue;
}

.datac  {
	font-size : 8pt;
	text-align : center;
	color : blue;
}

.databl  {
	font-size : 8pt;
	text-align : center;
	color : black;
}

.datagray  {
	font-size : 8pt;
	text-align : center;
	color : gray;
}

.dataw  {
	font-size : 8pt;
	text-align : center;
	color : white;
}

.datacblbold {
	color: blue;
	font-weight: bold;
	text-align: center;
	border-bottom: 1px solid black;
}

.datar  {
	font-size : 8pt;
	text-align : center;
	color : red;
}

.header {
	font-weight: bold;
	color: white;
	font-size: 8pt;
}

.header2  {
	font-size : 8pt;
	color : black;
	font-weight : bold;
}

.header3  {
	font-size : 8pt;
	color : gray;
	font-weight : bold;
}

.menu  {
	padding-left: 50px;
	margin-top : 8px;
	font-size: 10pt;
	padding-bottom: 10px;
}

.nav  {
	width: 180px;
	background-color: #0099ff;
}

.navfb  {
	width: 180px;
	background-color: black;
}

.navmenu {
	background-color: White;
	width:160px;
	position: relative;
	left: 20px;
	float: none;
}

.navcontain {
	background-color: White;
}

.navbottom  {
	background-color: black;
	width: 180px;
	padding: 0px 0px 0px 0px;
}

.nmodebtitle {
	font-size: 10pt;
	font-variant: small-caps;
	font-weight: bold;
	border-bottom: 1px solid black;
}

.na  {
	font-size : 8pt;
	color : white;
	font-weight : bold;
	text-align : center;
}

.norm  {
	text-align : center;
	color : gray;
}

.norm2  {
	font-weight : bold;
	text-align : center;
	color : navy;
}

.pheader  {
	font-size : 12pt;
	font-weight : bold;
	text-align : center;
}

.pheader2  {
	font-size : 10pt;
	font-weight : bold;
	color: Navy;
}

.phead1  {
	font-size : 18pt;
	text-align : left;
	color : black;
	font-weight : bold;
}

.prev  {
	font-size: 8pt;
	text-align: center;
	font-weight: bold;
	color: White;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 12px;
	padding-left: 0px;
}

.querysubmenu {
	padding: 3px 20px 3px 20px;
	font-size: 8pt;
	background-color: #F5F5F5;
	border: 1px solid #0099ff;
	width: 180px;
	margin: 2px 0px 2px 50px;
	display: none;
}

.querymenuhead {
	font-size: 10pt;
	color: blue;
	padding-left: 50px;
	margin: 10px 0px 10px 0px;
}

.reporthead {
	border: 1px solid black;
}

.reporthead1 {
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
}

.reporthead2 {
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
}

.region  {
	font-weight : bold;
	padding-left: 5px;
	padding-top: 2px;
	padding-bottom: 3px;
	font-size: 10pt;
	width:94%;
   color : white;
	text-align: center;
}

.rhead  {
	background-color : White;
	text-align : right;
}

.row0  {
	background-color : #DEDEDE;
	text-align : center;
}

.rowl0  {
	background-color : #DEDEDE;
}

.row1  {
	background-color : White;
	text-align : center;
}

.rowl1  {
	background-color : White;
}

.rowc0  {
	background-color: #DCDCDC;
	text-align: center;
}

.rowc1  {
	background-color : White;
	text-align : center;
}


.title2  {
	font-size : 14pt;
	font-weight : bold;
	text-align : center;
	color : navy;
}

.title3  {
	font-size : 12pt;
	font-weight : bold;
	color : navy;
	text-align : center;
}

.title4  {
	font-size : 10pt;
	font-weight : bold;
	font-style : italic;
}

.topnbottom {
	border-top: 2px solid black;
	border-bottom: 2px solid black;
}

.torque25a {
	width: 19%;
	text-align: center;
	font-weight: bold;
	border-bottom: 1px solid black;
}

.torque25b {
	width: 19%;
	text-align: center;
}

.torqueunder {
	border-bottom: 1px solid black;
	text-align: center;
}

.torquedivide {
	border-right: 1px solid black;
}

.warn  {
	text-align : center;
	color : red;
	font-weight : bold;
}

#center {
	text-align: center;
}

#detail {
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
	border-left: 1px solid grey;
	border-right: 1px solid grey;
	padding: 2px 2px 2px 2px;
}


#floatLheader {
	float: left;
	font-size : 8pt;
	font-weight : bold;
	padding-left: 5px;
	width: 250px;
	text-align: left;
	color: White;
}

#floatRheader  {
	float: right;
	font-size : 8pt;
	font-weight : bold;
	padding-right: 5px;
	width: 250px;
	text-align: right;
	color: White;
}

#idR {
	text-align: right;
}

#querymenu {
	padding-left: 40px;
}
/* ============div testing ================*/


#navigate {
	background-color: #0099ff;
	float: left;
	width: 180px;
}

#content {
	margin-left: 182px;
	border: 1px solid red;
}

/* ============end div testing ================*/

**visualAd** · Jan 31st, 2005, 01:06 PM

What I wanted to do was replicate this myself but I'll need the complete stylesheet.

I have had a little look and noticed that your content area is not absolutly positioned. Although it should, IE does not take floated elements out of the main content flow. Therefore, what is happening is the other content is being pushed down underneath the navigation menu. So modifying the style to the following should solve it:

Code:

 #navigate {
 	background-color: #0099ff;
 	float: left;
 	width: 180px;
 }
 
 #content {
 	border: 1px solid red;
 	position: absolute;
 	left: 182px;
 }

**ober0330** · Jan 31st, 2005, 01:10 PM

Interestingly enough, it doesn't. In IE, it brings everything up to where it needs to be, but it is now pushed to the right even further. If I remove the margin, it brings it back to where it needs to be, but still spills over the right side of the page.

Making it absolute also makes the #content div only take up the space that it absolutely has to (it squishes all the content down to what the block elements force it to be).

**ober0330** · Jan 31st, 2005, 01:14 PM

I think what I may do is just put both divs in a div container. I use that method on another site that I'm making and it works (or so I assume... I don't have this same type of input screen on that site).

**visualAd** · Jan 31st, 2005, 01:20 PM

You can't mix percentages with pixels in my experience. Choose one and decide on it. But if you are floating elements you are stuck with pixels. Unless you post the entire style sheet there isn't much else I can do.

What I usually do when I have a problem like this is disable all the styles and introduce one style at a time. This helps you control and see exactly what is going on.

**ober0330** · Jan 31st, 2005, 01:23 PM

Here is the entire style sheet (although there shouldn't have been anything in the previous bunch that I omitted that would have stopped you from rendering it):

Code:

A  {
	text-decoration : none;
    font-family: Tahoma,Verdana,Arial,serif;
}

body {
	margin: 0px;
	padding: 0px;
}

div {
	font-family: Tahoma,Verdana,Arial;
	font-size: 8pt;
}

img  {
	border: none;
}

input, select, textarea  {
	font-family : Tahoma,Verdana,Arial;
	font-size : 8pt;
	border: 1px solid #0099FF;
	background-color: #DCDCDC;
}

p  {
	font-family : Tahoma,Verdana,Arial;
	font-size : 10pt;
	margin-top : 0cm;
	margin-bottom : 0cm;
	font-weight : normal;
}

option  {
	font-family : Tahoma,Verdana,Arial;
	font-size : 8pt;
}

span {
	font-family: Tahoma,Verdana;
	font-size: 8pt;
}

table{
	font-family: Tahoma;
}

td {
	font-family: Tahoma,Verdana,Arial;
	font-size: 8pt;
}

:hover  {
	color: navy;
}

:link, :visited {
	color : blue;
}  

:active {
	background-color: #FFFFAC;
}

.bground  {
	position : absolute;
	left : 15px;
	top : 2px;
	font-size : 14pt;
	font-style : italic;
	color : Silver;
	font-weight : bold;
	font-family : Algerian,Tahoma,Verdana,Arial;
}

.bgclosed {
	background: url("../images/closed.jpg") no-repeat fixed center center;
}

.bgopen {
	background: url("../images/open.jpg") no-repeat fixed center center;
}

.boldred {
	font-weight: bold;
	color: red;
}

.border1px {
	border: 1px solid black;
}

.borderbottom {
	border-bottom: 2px solid black;
}

.bordertop {
	border-top: 1px solid black;
}

.bordertop2 {
	border-top: 2px solid black;
}

.borderltb2 {
	border-top: 2px solid black;
	border-bottom: 2px solid black;
	border-left: 1px solid black;
	text-align: center;
	color: blue;
}

.borderrtb2 {
	border-top: 2px solid black;
	border-bottom: 2px solid black;	
	border-right: 2px solid black;
	text-align: center;
	color: blue;
}

.bordertb2 {
	border-top: 2px solid black;
	border-bottom: 2px solid black;	
	text-align: center;
	color: blue;
}

.breakhere  {
	page-break-before : always;
}

.cdiv {
  width: 100%; 
  text-align: center;
}

.cdiv2 {
  text-align: center;
}

.cdivcontain {
	text-align: center;
	width: 100%;
}

.chactivecell {
	border-right: 1px solid gray;
	border-bottom: 1px solid gray;	
}

.chdue {
	background-color: Maroon;
	color: White;
	font-weight: bold;
}

.chclose {
	background-color: #ADD8E6;
	font-weight: bold;
}

.chrep1 {
	text-align: center;
}

.chatter  {
	font-size : 8pt;
	color : gray;
}

.center {
	text-align: center;
	width: 280px;
	font-weight: bold;
	color: navy;
}

.data  {
	font-size : 8pt;
	text-align : left;
	color : blue;
}

.datac  {
	font-size : 8pt;
	text-align : center;
	color : blue;
}

.databl  {
	font-size : 8pt;
	text-align : center;
	color : black;
}

.datagray  {
	font-size : 8pt;
	text-align : center;
	color : gray;
}

.dataw  {
	font-size : 8pt;
	text-align : center;
	color : white;
}

.datacblbold {
	color: blue;
	font-weight: bold;
	text-align: center;
	border-bottom: 1px solid black;
}

.datar  {
	font-size : 8pt;
	text-align : center;
	color : red;
}

.dbtitle {
	font-weight: bold;
	color: gray;
	text-align: center;
}

.fstitle{
	font-size: 12pt;
	font-weight: bold;
	font-variant: small-caps;
	text-align: left;
}

.fselem{
	font-size: 10pt;
	font-weight: normal;
	text-align: left;
}

.fsbold {
	font-weight: bold;
	font-size: 10pt;
	text-align: center;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}

.fsunder {
	margin-top: 1px solid black;
	margin-bottom: 1px solid black;
}

.fuelborder {
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	text-align: center;
	width: 85%;
	border: 1px solid black;
}

.header {
	font-weight: bold;
	color: white;
	font-size: 8pt;
}

.header2  {
	font-size : 8pt;
	color : black;
	font-weight : bold;
}

.header3  {
	font-size : 8pt;
	color : gray;
	font-weight : bold;
}

.history {
	font-size : 10pt;
	font-weight : bold;
	text-align : center;
	color: navy;
}

.indtitle  {
	font-size: 9pt;
	color: Navy;
	font-weight: bold;
	background-color: #E7E7E7;
	padding: 2px 50% 2px 20px;
	margin-left: 60px;
	border-bottom: 2px solid Navy;
	border-right: 2px solid Navy;
	border-left: 0px;
	width: 75%;
}

.indsubtitle  {
	font-size: 8pt;
	color: blue;
	font-weight: normal;
	background-color: White;
	margin-left: 60px;
	padding: 7px 0px 7px 40px;
}

.lhead  {
	background-color : White;
	text-align : left;
}

.limit  {
	text-align : center;
}

.menu  {
	padding-left: 50px;
	margin-top : 8px;
	font-size: 10pt;
	padding-bottom: 10px;
}

.nav  {
	width: 180px;
	background-color: #0099ff;
}

.navfb  {
	width: 180px;
	background-color: black;
}

.navmenu {
	background-color: White;
	width:160px;
	position: relative;
	left: 20px;
	float: none;
}

.navcontain {
	background-color: White;
}

.navbottom  {
	background-color: black;
	width: 180px;
	padding: 0px 0px 0px 0px;
}

.nmodebtitle {
	font-size: 10pt;
	font-variant: small-caps;
	font-weight: bold;
	border-bottom: 1px solid black;
}

.na  {
	font-size : 8pt;
	color : white;
	font-weight : bold;
	text-align : center;
}

.norm  {
	text-align : center;
	color : gray;
}

.norm2  {
	font-weight : bold;
	text-align : center;
	color : navy;
}

.norm3  {
	font-weight : normal;
	text-align : left;
}

.other  {
	font-size : 8pt;
	text-align : center;
	color : gray;
}

.otherbold {
	font-size : 8pt;
	text-align : center;
	color : gray;
	font-weight:bold;	
}

.other2  {
	font-size : 8pt;
}

.other3  {
	font-size : 8pt;
	text-align : left;
	color : gray;
}

.other4  {
	font-size : 8pt;
	text-align : center;
}

.other5  {
	font-size : 8pt;
	text-align : center;
	color : black;
}

.other6  {
	font-size : 8pt;
	text-align : right;
	color : black;
}

.other7  {
	font-size : 8pt;
	color : Red;
}

.other8  {
	font-size : 8pt;
	font-weight: bold;
}

.pheader  {
	font-size : 12pt;
	font-weight : bold;
	text-align : center;
}

.pheader2  {
	font-size : 10pt;
	font-weight : bold;
	color: Navy;
}

.phead1  {
	font-size : 18pt;
	text-align : left;
	color : black;
	font-weight : bold;
}

.prev  {
	font-size: 8pt;
	text-align: center;
	font-weight: bold;
	color: White;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 12px;
	padding-left: 0px;
}

.querysubmenu {
	padding: 3px 20px 3px 20px;
	font-size: 8pt;
	background-color: #F5F5F5;
	border: 1px solid #0099ff;
	width: 180px;
	margin: 2px 0px 2px 50px;
	display: none;
}

.querymenuhead {
	font-size: 10pt;
	color: blue;
	padding-left: 50px;
	margin: 10px 0px 10px 0px;
}

.reporthead {
	border: 1px solid black;
}

.reporthead1 {
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
}

.reporthead2 {
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
}

.region  {
	font-weight : bold;
	padding-left: 5px;
	padding-top: 2px;
	padding-bottom: 3px;
	font-size: 10pt;
	width:94%;
   color : white;
	text-align: center;
}

.rhead  {
	background-color : White;
	text-align : right;
}

**ober0330** · Jan 31st, 2005, 01:24 PM

goddamn this character length limit:

Code:

.row0  {
	background-color : #DEDEDE;
	text-align : center;
}

.rowl0  {
	background-color : #DEDEDE;
}

.row1  {
	background-color : White;
	text-align : center;
}

.rowl1  {
	background-color : White;
}

.rowc0  {
	background-color: #DCDCDC;
	text-align: center;
}

.rowc1  {
	background-color : White;
	text-align : center;
}

.rowhead  {
	background-color : White;
	text-align : center;
   color : blue;
	font-size: 8pt;
}

.rowhead2  {
	background-color : #0099ff;
	text-align : center;
   color : White;
   font-weight: bold;
}

.speccontain {
	border: 1px solid lime;
	text-align: center;
}

.specmenu {
	color: Navy;
	background-color: #E7E7E7;
	margin: 8px;
	font-weight: bold;
	text-align: center;
	height: 44px;
	line-height:44px;
}

.specmenu p{
	vertical-align: middle;
	font-size: 8pt; 
	font-weight: bold;
}

.surveyA {
	border: 1px solid gray;
	padding: 5px;
	text-align: center;
}

.surveyNotes {
	border: 1px solid gray;
	background-color: #FAFAD2;
	margin: 0px 80px 0px 80px;
	padding: 15px;
	text-align: center;
	font-weight: bold;
}

.surveySummary1{
	color: red;
	font-weight: bold;
}

.surveycontainer {
	margin: 0px 40px 0px 40px;
}

.surveyQ {
	border: 1px solid black;
	background-color: #B0C4DE;
	padding: 5px;
	font-weight: bold;
}

.tablehead2 {
	width: 100%;
	background-color: Black;
	border-bottom: 2px solid #0099ff;
	padding-top: 2px;
	padding-bottom: 3px;
	height: 12px;
}

.tbl {
	border-top: 1px double Black;
	border-bottom: 1px double Black;
}

.tbl2 {
	border-top: 1px double Black;
}

.title{
	font-size : 10pt;
	font-weight : bold;
	color : navy;
}

.title2  {
	font-size : 14pt;
	font-weight : bold;
	text-align : center;
	color : navy;
}

.title3  {
	font-size : 12pt;
	font-weight : bold;
	color : navy;
	text-align : center;
}

.title4  {
	font-size : 10pt;
	font-weight : bold;
	font-style : italic;
}

.topnbottom {
	border-top: 2px solid black;
	border-bottom: 2px solid black;
}

.torque25a {
	width: 19%;
	text-align: center;
	font-weight: bold;
	border-bottom: 1px solid black;
}

.torque25b {
	width: 19%;
	text-align: center;
}

.torqueunder {
	border-bottom: 1px solid black;
	text-align: center;
}

.torquedivide {
	border-right: 1px solid black;
}

.warn  {
	text-align : center;
	color : red;
	font-weight : bold;
}

.warning {
	color: red;
	font-size: 8pt;
	font-weight: bold;
	width: 450px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.weathera {
	text-align: center;
	font-weight: bold;
}

.weatherb {
	text-align: center;
	padding-bottom: 1px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 1px;
}

#borderall {
	border-top: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
}

#borderlime {
	border: 1px solid lime;
}

#green {
	color: Green;
	font-weight: bold;
}

#color1 {
		background-color: #EBEBEB;
}

#color2 {
	background-color: White;
}

#center {
	text-align: center;
}

#detail {
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
	border-left: 1px solid grey;
	border-right: 1px solid grey;
	padding: 2px 2px 2px 2px;
}

#durbrepsel1 {
	text-align: center;
	display: block;
	width: 100%;
}

#durbrepsel2 {
	text-align: center;
	display: none;
	width: 100%;
}

#durbrepsel3 {
	text-align: center;
	display: none;
}

#floatLheader {
	float: left;
	font-size : 8pt;
	font-weight : bold;
	padding-left: 5px;
	width: 250px;
	text-align: left;
	color: White;
}

#floatRheader  {
	float: right;
	font-size : 8pt;
	font-weight : bold;
	padding-right: 5px;
	width: 250px;
	text-align: right;
	color: White;
}

#red {
	color: red;
	font-weight: bold;
}

#idL {
	text-align: left;
}

#idR {
	text-align: right;
}

#id901 {
	text-align: right;
	width: 33%;
}

#id902 {
	text-align: center;
	width: 33%;
}

#querymenu {
	padding-left: 40px;
}

#pad {
	padding: 2px 2px 2px 2px; 
}

#pad2 {
	padding: 2px 2px 2px 2px; 
	text-align: left;
}

#right {
	text-align: right;
}

/* ============div testing ================*/


#navigate {
	background-color: #0099ff;
	float: left;
	width: 180px;
}

#content {
	margin-left: 182px;
	border: 1px solid red;
	position: absolute;
}

/* ============end div testing ================*/

**visualAd** · Jan 31st, 2005, 01:40 PM

Thanks.

If I change:

Code:

 #content {
 	margin-left: 182px;
 	border: 1px solid red;
 	position: absolute;
 }

To this:

Code:

 #content {
 	left: 182px;
 	border: 1px solid red;
 	position: absolute;
 }

Its displays fine. Remember what I said about IE not taken the left floted element from the normal flow.

**ober0330** · Jan 31st, 2005, 01:44 PM

That works in IE, but all the table stuff is not layed out as nice in Opera and Firefox. I guess I'll just have to completely convert that page over.

Thanks. I guess I can tweak it from here.

**visualAd** · Jan 31st, 2005, 01:58 PM

Originally Posted by ober0330

That works in IE, but all the table stuff is not layed out as nice in Opera and Firefox. I guess I'll just have to completely convert that page over.

Thanks. I guess I can tweak it from here.

In Firefox both renditions look identical

Good luck with sorting it.

**ober0330** · Jan 31st, 2005, 03:05 PM

Ok, I took the long, standard way of fixing things. I removed tables from the page completely. It now renders perfectly in all the browsers with my origional #content, #navigate definitions.

Thread: CSS IE Woes [Resolved]

Thread Tools

Display

CSS IE Woes [Resolved]

Re: CSS IE Woes

Re: CSS IE Woes

Re: CSS IE Woes

Re: CSS IE Woes

Re: CSS IE Woes

Re: CSS IE Woes

Re: CSS IE Woes

Re: CSS IE Woes

Re: CSS IE Woes

Re: CSS IE Woes

Re: CSS IE Woes

Re: CSS IE Woes

Re: CSS IE Woes

Re: CSS IE Woes

Re: CSS IE Woes

Re: CSS IE Woes

Re: CSS IE Woes

Posting Permissions