All geek questions in one place

Internet Explorer numbers appear at the bottom, not the top, as expected

I am working on a page with ol with n, p, div and li nested. Internet Explorer 6 and 7 both display the numbers for the ol tag after the p element at the end (at the very end of the li tag), and not at the top of the outer li, as expected. I am working on a PowerPC Mac and cannot run any tests. Is there a simple CSS hack to make this render the same as in Firefox?

You can view the live page here . I know I'm working on positioning the sidebar. Ignore it now.

The markup is as follows:

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/global.css" /> <link rel="stylesheet" type="text/css" href="css/whats_included.css" /> <script type="text/javascript" src="script/compliant_target_blank.js"></script> <!--[if lte IE 5]> <script type="text/javascript" src="script/ie_5_unsupported_warning.js"></script> <![endif]--> <!--[if gt IE 5]> <link rel="stylesheet" type="text/css" href="css/ie_hacks/global.css" /> <![endif]--> <title> The Daily Plan-It, LLC - Home of the Tax MiniMiser </title> </head> <body> <?php include("includes/nav_bar.php") ?> <div id="content"> <img src="images/title.png" alt="Tax MiniMiser Financial Tracking System" /> <div id="bordered_wrapper"> <h1>Here What You Get With The Tax MiniMiser!</h1> <h2>24 Envelopes, 7-hole punched to fit one-at-a-time in your binder</h2> <ol> <li class="main_item"> Business Income &amp; Expense Record <div class="preview_image"> <a href="previews/large/bier/front.html" rel="external"> <img src="images/small_previews/large/bier_preview.jpg" alt="" /><br/> Click to Preview! </a> </div> <div class="details"> <ul> <li>12 receipt envelopes with all the income &amp; expense columns you need to transform your planner or binder into a daily tax journal!</li> <li>Store daily receipts in the convenient pocket envelopes.</li> </ul> </div> <p>To get a free copy of the &quot;20 Column Heading Guidelines&quot;, <a href="files/downloads/20_column_heading_guidelines.pdf">click here</a> or call our Fax-on-Demand line at 888-829-8237.</p> </li> <li class="main_item"> Vehicle Mileage &amp; Expense Record <div class="preview_image"> <a href="previews/large/vme/front.html" rel="external"> <img src="images/small_previews/large/mileage_preview.jpg" alt=""/><br/> Click to Preview! </a> </div> <div class="details"> <ul> <li>12 receipt envelopes to track your daily mileage and vehicle expenses. Keep one envelope in each vehicle used for your business(es).</li> <li>Store daily receipts in the convenient pocket envelopes.</li> </ul> </div> <p>To get a free copy of the &quot;Instructions for Vehicle Mileage &amp; Expense Record&quot;, <a href="files/downloads/vehicle_record_instructions.pdf">click here</a> or call our Fax-on-Demand line at 888-829-8237.</p> </li> <li class="main_item"> Annual Business Summary of Income and Expense <div class="preview_image"> <a href="previews/large/cover/inside.html" rel="external"> <img src="images/small_previews/large/cover_inside_preview.jpg" alt="" /><br/> Click to Preview! </a> </div> <div class="details"> <ul> <li>Enter the subtotals from all the envelopes throughout the year. Then you and your tax pro can figure out profitability and taxes to maximize your deductions and legally minimize your taxes.</li> </ul> </div> </li> </ol> <p class="end">To see previews of the small (6&quot; x 8&frac12;&quot;) Tax MiniMisers, visit their respective pages <a href="products.php">here.</a></p> </div> </div> <?php include("includes/footer.php") ?> </body> </html>

And CSS:

 #content { background-color: white; } #bordered_wrapper { margin-left: 26px; background: top left no-repeat url(../images/borders/yellow-box-top.gif); } #bordered_wrapper h1, #bordered_wrapper h2 { margin-left: 20px; } #bordered_wrapper h1 { padding-top: 15px; margin-bottom: 0; } #bordered_wrapper h2 { margin-top: 0; font-size: 1.3em; } ol { font-size: 1.1em; } ul { list-style-type: disc; } li.main_item { width: 700px; clear: right; } li p { clear: both; margin-bottom: 20px; } .preview_image { width: 200px; float: right; text-align: center; margin-bottom: 10px; } .preview_image a { text-decoration: none; } .preview_image img { border-style: none; } .end { clear: right; padding-bottom: 25px; padding-left: 20px; background: bottom left no-repeat url(../images/borders/yellow-box-bottom.gif); }
+4
source share
4 answers

Congratulations, you are a victim of the hasLayout IE property.

Short version: this time is easy for you. Changes these rules:

 ... ol { font-size: 1.1em; } ... li.main_item { width: 700px; clear: right; } ...

For this:

 ... ol { font-size: 1.1em; width: 700px; } ... li.main_item { clear: right; } ...

And all this is good.

Longer version: when you apply some CSS rules to certain elements, IE 5.5+ provides these elements with a property called hasLayout, which changes the way that element is displayed. Since hasLayout is a read-only property with no apparent purpose, it took quite a while before web designers caught this problem. On older sites (even Quirksmode.org!) There are still pages that offer padding, margins, or even using Javascript to fix these issues. If you can help at all, do not do this. Instead, see if you can figure out which element hasLayout is incorrectly assigned and modify the violating CSS so that the element no longer has hasLayout. If this page completely blocks your page, use conditional comments to fix it only for IE. Here are some CSS rules that add "hasLayout" to an element that does not already have it:

  • position: absolute
  • float: left | right
  • display: built-in unit
  • height: any value other than 'auto'
  • zoom: any value other than "normal" (MS proprietary)
  • recording mode: tb-rl (proprietary MS server)

Like IE7, overflow has become a trigger for hasLayout.

  • overflow: hidden | scrolling | auto

The longest version: read the following articles.

+11
source

I just checked your html example in firefox 3 / webkit nightly / internet explorer 7 and they all displayed exactly the same with the number at the top where it should be.

The problem is probably in your CSS, can you show us the actual page that is broken?

0
source

The same thing, tested with IE6 on WinXP Pro SP3, it displays correctly. You must provide a snippet reproducing the problem or a live web page. Maybe environment counting, or existing CSS, etc.

0
source

Actually, I ran into this error. With my page, this only happened after numbering using javascript. Only a few real solutions are available:

 vertical-align: top;

I honestly have no idea why IE7 does, however there is an easy way to fix it.

0
source

Source: https://habr.com/ru/post/1276980/

More articles:


All Articles