IE 7 invalid table HTML not positioning properly

Question

I am going to ask this question, just because I want to understand the problem a little better.

I am working on a page that has a bunch of legacy JSP code that generates a huge amount of HTML form, using a table to hold the visible input fields. However, in many cases the JSP is rendering hidden inputs inside the <table> but not inside of any <td> which is invalid HTML structure. These types of HTML structure errors are all over the place in this page.

The JSP code for this page has been around for probably 10 years with no issues with this invalid HTML, and developers are well aware of this problem, but never had any reason to fix it. Now we are trying to make the page look more modern, and one of the things I am using is position:fixed.

Anyway - to demonstrate the issue here is a very simple HTML page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html>
<head><style>.fixedTable { position: fixed; background-color:red; } </style></head>
<body>
  <!-- this table gets an invalidly placed hidden input tag outside of the row -->
  <table class="fixedTable" style="top:100px;left:100px;">
   <input type="hidden" name="value" value="test">
   <tr><td>Test 1</td></tr>
  </table>
  <!-- this table is properly structured -->
  <table class="fixedTable" style="top:130px;left:100px;">
   <tr><td><input type="hidden" name="value" value="test">Test 2</td></tr>
  </table>
</body>
</html>

All browsers (except IE 7) shows 2 little red boxes on top of eachother 100px from the top and 100px from the left.

IE 7 gets the position of the first table (Test 1) completely wrong and puts it at the top left of the page. IE 8 is fine.

What is going on here?

Ok - sure, I could just fix the HTML structure - but I still want to know what is going on, then maybe I could figure out a work around without having to go through refactoring a huge amount of JSP code.

To add to the confusion...

Making one minor change to the style:

.fixedTable td { position: relative }

Now the text "Test 1" appears in the right place... but the red background is still in the top left corner...

Also it may seem crazy, but our company does officially support IE 7, and a significant percent still do use it. We deal with many large corporate customers with antiquated IT policies unfortunately.

score 1 · Answer 1 · answered Sep 28 '13 at 07:55

So... I took it into IE Developer Toolbar and this is what the DOM looks like.

Apparently, IE7 constructs an unnamed element parent for the hidden input. I was able to target that empty element in CSS via the :first-child selector; however, I was not able to figure anything out by doing so (except that if you set it to position:absolute it crashes IE7 on my VM). I am not sure why it incorrectly places the background up there.

What I did discover is that if you use JavaScript to delete the hidden input or its unnamed parent element inside the malformed table, it suddenly works correctly again.

Using this information, it would be a solution (although so hacky...) to create a JavaScript routine that moves all of the hidden inputs that are in wrong locations into valid locations. Of course, documenting how important the routine is would be very important. Also, if their JavaScript fails to load or gets disabled, then there's going to be some fires you need to put out.

Here is an example code showing you things I mentioned above:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html>
<head>
<style>
.fixedTable { position: fixed; background-color:red; }
.malformed > *:first-child { background-color:blue; }
.fixedTable td { position: relative; }
</style>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#test").parent().remove();
});
</script>
</head>
<body>
  <!-- this table gets an invalidly placed hidden input tag outside of the row -->
  <table class="fixedTable malformed" style="top:100px;left:100px;">
    <input type="hidden" name="value" id="test" value="test">
    <tr><td>Test 1</td></tr>
  </table>
  <!-- this table is properly structured -->
  <table class="fixedTable" style="top:130px;left:100px;">
    <tr><td><input type="hidden" name="value" value="test">Test 2</td></tr>
  </table>
</body>
</html>

I hope some of this is at least helpful to you in figuring out a solution! Good luck! I completely empathize with the struggles of continuing to support IE7...

This was a helpful answer. If no one else gives any further answers (I still hold out hope there is a less hacky solution) - I will mark it as accepted. But in general the idea of moving the DOM after the page loads might work. — codefactor, Oct 04 '13 at 15:35

IE 7 invalid table HTML not positioning properly

1 Answers1