this is my first post to the list so please forgive any etiquette gaffes. i have noticed a curious problem with FF 1.5.0.6 on my (inherited) intranet i have page templates that use fixed-width (595 px)tables for layout and CSS for styling.
it seems that while page elements (banner, containing wrapper, etc.) remain static on the screen in IE, they shift around in FF, that is, everything shifts slightly to the left on some pages. i fully expect it is a problem in my CSS coding, but the cuious thing is, the shift only happens when, for example, a list reached more than 9 items, or a table had more than 9 rows. i solved the unordered list problem by tweaking the margin: values (mostly reducing them to 0) ... the table problem remains unresolved. i can't provide a link since it's a closed intranet, so i'll include the offending code -- or where i suspect the problem might be. forgive the length. i hope it makes enough sense that someone can help me determine the problem. i realize, to that you may need two code samples to compare, in order to see the problem, so I shall include a 2nd, below the first then the CSS. Thanks Robert Paterson the page code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";> <html> <head> <title>Volume 1, Chapter 1 - Table of Contents</title> <!-- metadata begin --> <!-- metadata end --> <!-- css --> <link href="/bcasinfo/production_files/css/master.css" rel="stylesheet" type="text/css" media="screen"> <style type="text/css" media="screen"> .border { border-bottom: 1px solid #000 !important; border-left: 1px solid #000 !important;} .border td { border-right: 1px solid #000 !important; border-top: 1px solid #000 !important; } .border th { border-right: 1px solid #000 !important; border-top: 1px solid #000 !important; color: #000; background: #ccc; text-align: left; letter-spacing: 1px; } </style> <link href="/bcasinfo/production_files/css/print.css" rel="stylesheet" type="text/css" media="print"> </head> <body id="ppm"> <div id="wrapper"> <!-- banner --> <a name="top"></a> <!--#include virtual="/bcasinfo/production_files/ssi/01_policy_banner.html" --> <!-- end banner --> <!-- horizontal site navigation --> <!--#include virtual="/bcasinfo/production_files/ssi/02_policy_tabs.html" --> <!-- end horizontal site navigation, i.e. the tabs --> <table id="content" width="595" border="0" cellspacing="0" cellpadding="0" summary="Main content."> <tr> <td> <h2 class="centre bcas">British Columbia Ambulance Service<br>Field Operations Policy and Procedure Manual</h2> <h3 class="centre"><a href="/bcasinfo/policy/volume1/">VOLUME 1 – ADMINISTRATION</a></h3> <h3 class="centre">Chapter 1 – Introduction</h3> <table border="0" cellpadding="0" cellspacing="0" width="99%" class="border"> <tr> <th width="10%">Chapter</th> <th width="65%">Policy Directive</th> <th width="15%">Effective Date</th> <th width="10%">Revision Number</th> </tr><tr> <td>1.1</td> <td><a href="/bcasinfo/policy/volume1/chapter1/1.1.html">Mission Statement</a></td> <td>Jul-15-96</td> <td> </td> </tr><tr> <td>1.1.1</td> <td><a href="/bcasinfo/policy/volume1/chapter1/1.1.1.html">Strategic Objectives</a></td> <td>Jul-15-96</td> <td> </td> </tr><tr> <td>1.2</td> <td><a href="/bcasinfo/policy/volume1/chapter1/1.2.html">Purpose of The Manual</a></td> <td>Jul-15-96</td> <td> </td> </tr><tr> <td>1.3</td> <td><a href="/bcasinfo/policy/volume1/chapter1/1.3.html">Authority of The Manual</a></td> <td>Jul-15-96</td> <td> </td> </tr><tr> <td>1.3.1</td> <td><a href="/bcasinfo/policy/volume1/chapter1/1.3.1.html">Health Emergency Act</a></td> <td>Jul-15-96</td> <td> </td> </tr><tr> <td>1.3.2</td> <td><a href="/bcasinfo/policy/volume1/chapter1/1.3.2.html">Health Emergency Regulation</a></td> <td>Jul-15-96</td> <td> </td> </tr><tr> <td>1.3.3</td> <td><a href="/bcasinfo/policy/volume1/chapter1/1.3.3.html">Emergency Medical Assistant Regulation</a></td> <td>Jul-15-96</td> <td> </td> </tr><tr> <td>1.4</td> <td><a href="/bcasinfo/policy/volume1/chapter1/1.4.html">Organizational Structure</a></td> <td>Aug-03-01</td> <td>01-05</td> </tr><tr> <td>1.5</td> <td><a href="/bcasinfo/policy/volume1/chapter1/1.5.html">Definition of Policy And Procedure</a></td> <td>Jul-15-96</td> <td> </td> </tr><tr> <td>1.6</td> <td><a href="/bcasinfo/policy/volume1/chapter1/1.6.html">Format of Manual</a></td> <td>Jul-15-96</td> <td> </td> </tr><tr> <td>1.6.1</td> <td><a href="/bcasinfo/policy/volume1/chapter1/1.6.1.html">Identifying Manual Contents</a></td> <td>Jul-15-96</td> <td> </td> </tr><tr> <td>1.6.2</td> <td><a href="/bcasinfo/policy/volume1/chapter1/1.6.2.html">Layout of Policy And Procedure Statements</a></td> <td>Jul-15-96</td> <td> </td> </tr><tr> <td>1.7</td> <td><a href="/bcasinfo/policy/volume1/chapter1/1.7.html"> Policy Revisions / Amendments</a></td> <td>Jul-15-96</td> <td> </td> </tr><tr> <td>1.8</td> <td><a href="/bcasinfo/policy/volume1/chapter1/1.8.html">Use of Official BCAS Logo</a></td> <td>Jul-15-96</td> <td> </td> </tr> </table> <hr></td> </tr> </table> <table id="date_revised" width="595" cellspacing="0" cellpadding="0" summary="Date of most recent page revision."> <tr> <td><p id="revisedDate"></p> </td> </tr> </table> <!-- footer --> <!--#include virtual="/bcasinfo/production_files/ssi/04_footer.html" --> <!-- end footer --> </div> </body> </html> SECOND CODE SAMPLE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";> <html> <head> <title>BCAS Field Operations Policy and Procedure Manual - Volume 1</title> <!-- metadata begin --> <!-- metadata end --> <!-- css --> <link href="/bcasinfo/production_files/css/master.css" rel="stylesheet" type="text/css" media="screen"> <link href="/bcasinfo/production_files/css/print.css" rel="stylesheet" type="text/css" media="print"> </head> <body id="ppm"> <div id="wrapper"> <!-- banner --> <a name="top"></a> <!--#include virtual="/bcasinfo/production_files/ssi/01_policy_banner.html" --> <!-- end banner --> <!-- horizontal site navigation --> <!--#include virtual="/bcasinfo/production_files/ssi/02_policy_tabs.html" --> <!-- end horizontal site navigation, i.e. the tabs --> <table id="content" width="595" border="0" cellspacing="0" cellpadding="0" summary="Main content."> <tr> <td><h2 class="centre bcas">British Columbia Ambulance Service<br> Field Operations Policy and Procedure Manual</h2> <h3 class="centre">VOLUME 1 – ADMINISTRATION</h3> <hr> <ul> <li><a href="/bcasinfo/policy/volume1/chapter1/">Chapter 1 – Introduction</a></li> <li><a href="/bcasinfo/policy/volume1/chapter2/">Chapter 2 – Finance - Budgetary and Expenditure Control</a></li> <li><a href="/bcasinfo/policy/volume1/chapter3/">Chapter 3 – Finance - Payroll</a></li> <li><a href="/bcasinfo/policy/volume1/chapter5/">Chapter 5 – Access to Data and Information</a></li> <li><a href="/bcasinfo/policy/volume1/chapter6/">Chapter 6 – Equipment, Supplies and Uniforms</a></li> <li><a href="/bcasinfo/policy/volume1/chapter7/">Chapter 7 – Telecommunications</a></li> <li><a href="/bcasinfo/policy/volume1/chapter8/">Chapter 8 – Vehicles</a></li> <li><a href="/bcasinfo/policy/volume1/chapter9/">Chapter 9 – Ambulance Stations</a></li> </ul> <hr> </td> </tr> </table> <table id="date_revised" width="595" cellspacing="0" cellpadding="0" summary="Date of most recent page revision."> <tr> <td><p id="revisedDate"> <!-- Last Revised Date --> <!--#config timefmt="%B %d, %Y" --> This web page was revised: <!--#echo var="LAST_MODIFIED" --> <!-- End of Last Revised Date --> </p></td> </tr> </table> <!-- footer --> <!--#include virtual="/bcasinfo/production_files/ssi/04_footer.html" --> <!-- end footer --> </div> </body> </html> CSS body { margin: 0; padding: 0 0 10px 0; border: 0; background: #fff; color: #000; font-family: arial, verdana, helvetica, sans-serif; text-align: center; font-size: small; } /* link styles */ /* image styles */ /* text highlights */ /* headings */ /* text blocks */ /* inline elements */ /* lists */ ul, ol { padding: 0; margin: 0 1em; } ul li { margin: 0 15px; padding: 0; } /* ---------- tables ---------- */ /* generic BORDERED table */ /* change the border colours and dimensions in individual document as required */ table.border { margin: 10px 0; padding: 0; border-bottom: 1px solid #fff; border-left: 1px solid #fff; } .border th { padding: 4px 8px; text-align: left; font-size: 92%; border-right: 1px solid #fff; border-top: 1px solid #fff; } .border td { padding: 4px 6px; font-size: 92%; border-right: 1px solid #fff; border-top: 1px solid #fff; } /* default rule : see: classes for dotted hr-like .rule */ hr { color:#ccc; margin: 10px 5px; } /* foundation components */ #wrapper { padding: 4px 0; margin: 0 auto; text-align: left; width: 595px; } #banner { margin: 0; padding: 0; width: 595px; height: 65px; } #banner #topLeft { background: transparent url(../../images/templates/banner/topLeft.gif) no-repeat bottom right; height: 13px; width: 298px; margin: 0; padding: 0; border: 0; } #banner #topLeft #bannerLogo, #banner #topLeft h1, #banner #topLeft address { display: none; } #banner #topRight { background: transparent url(../../images/templates/banner/topRight.gif) no-repeat bottom left; height: 13px; width: 297px; margin: 0; padding: 0; border: 0; } #banner #bcas { background: transparent url(../../images/templates/banner/bcas.jpg) no-repeat top left; height: 52px; width: 595px; margin: 0; padding: 0; border: 0; } /* tabs */ #tabs { margin: 0; padding: 0; width: 595px; } #tabs ul { float: left; width: 575px; margin: 0; padding: 10px; list-style: none; background: #fff; } #tabs ul li { float: left; width: auto; margin: 0; padding: 0; font-family: arial, "Courier New", monospace; font-size: 90%; } #tabs ul li a { margin: 0; padding: 0 0 0 10px; color: #fff; text-decoration: none; background: #26a url(../../images/templates/tabs/left.jpg) no-repeat left top; } #tabs ul li a, #tabs ul li a span { float: left; display: block; } #tabs a span { background: url(../../images/templates/tabs/right.jpg) no-repeat right top; padding-right: 10px; } #tabs a:hover, body#ppm #tabs a.ppm_tab { color: #000; background: #18b8f6 url(../../images/templates/tabs/left_hover.jpg) no-repeat left top; padding-left: 10px; } #tabs a:hover span, body#ppm #tabs a.ppm_tab span { background: url(../../images/templates/tabs/right_hover.jpg) no-repeat right top; padding-right: 10px } /* ---------- policy_tabs ---------- */ #policy_tabs { margin: 0; padding: 0; width: 595px; } #policy_tabs ul { float: left; width: 575px; margin: 0; padding: 0 10px 10px 10px; list-style: none; background: #fff; } #policy_tabs ul li { float: left; margin: 0; padding: 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 85%; } #policy_tabs a { float: left; display: block; margin: 0 1px 0 0; padding: 0 8px 4px 8px; } /* main content container table */ #content { padding: 2px 0; margin: 0; width: 595px; } #revisedDate { margin: 0 0 1em 0; padding: 2px 4px; font-size: x-small; font-family: verdana, arial, helvetica, sans-serif; } #footer { margin: 0; padding: 0; width: 595px; } #footer img { border: 0; float: left; margin: 0; padding: 0; } ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
