CSS IE Woes [Resolved]

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.

Re: CSS IE Woes

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

Re: CSS IE Woes

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

Re: CSS IE Woes

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?

Re: CSS IE Woes

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&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&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&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;">« Previous Page «</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">    <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 © VOLVO Powertrain 2003-2005<br/>Procedure Modified: 1/31/2005</div> </body> </html>

Re: CSS IE Woes

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.

Re: CSS IE Woes

And the style sheet?

Re: CSS IE Woes

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 ================*/

Re: CSS IE Woes

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; }

Re: CSS IE Woes

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).

Re: CSS IE Woes

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).

Re: CSS IE Woes

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.

Re: CSS IE Woes

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; }

Re: CSS IE Woes

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 ================*/

Re: CSS IE Woes

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.

Re: CSS IE Woes

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.

Re: CSS IE Woes

Quote:

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 :confused:

Good luck with sorting it.

Re: CSS IE Woes

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.