2 Links + Button not positioning correctly in IE7/8/9 like they do in Chrome/Firefox

Question

I have a .jsp file that we use as a login page at https://com-bb-dev.com.edu and in that file it has a few lines laying out some links/buttons and a live chat button.

<h2><center>Accessibility Options</center></h2>
<ul>
<access class="access">
    <img src="/images/ci/ng/fonts.gif" alt="" /> 
    <a href="#" title="Change Text Size" 
          onClick="page.showChangeTextSizeHelp()">Change Text Size</a>
  </access>
  <access class="access">
    <img src="/images/ci/ng/contrast.gif" alt="" /> 
    <a href="#" title="High Contrast Setting" onclick="page.showAccessibilityOptions(); return false;">High Contrast Setting</a>
  </li>
  </access>
</ul>
<div id="parature">
<parature>
<a id="b2b8839e-6318-4c34-9863-9071b06192f3" href="javascript:void(0);"  onclick="return launchChatWindow('http://com.parature.com/ics/support/default.asp?deptID=15028&task=chat&deploymentId=b2b8839e-6318-4c34-9863-9071b06192f3');"></a>
<script src="http://com.parature.com/ics/csrchat/inc/chatDeployment.js" type="text/javascript"></script>
<script type="text/javascript"> 
window.onload = createDplOnLoadDelegate('b2b8839e-6318-4c34-9863-9071b06192f3', 'com.parature.com', 15026, 15028, window.onload, true);
</script>
</parature>
</div>

Up within that same file I have declared some separate styles so that I can modify them without affecting anything else that is in the same . Here is what I declared:

parature 
{
float: right;
margin-right: 18px;
position: relative;
bottom: 30px;
width: 138px;
}

access 
{
display: inline-block;
margin: 0px -4px 6px;
font-size: 125%;
padding-left: 24px;
}

Of course, this works fine and the buttons and links display properly in Firefox and Chrome. And to my horrid dismay it does not work in IE8. You'll see that the button is treated as a direct down-the-line item and that the two links under accessibility options to not take on any CSS formatting. Is it because they are using styles that I declared locally in the .jsp page? I've already had to go back and discover that the ancient fossil didn't support transparency so that was fun to discover and fix. This is what I've tried so far:

parature 
{
float:right;
width: 138px;
}

Because I read that floats don't work if the div doesn't have a width. Not sure what to look for. The IE8 developer pane is a total nightmare.

Thanks.

Answer 1

There's no opening tag for the li. That could be the problem. If not, you might try using an inline-block on the parature class just to see if the block will render on the page.

Answer 2

You are attempting to use custom elements, which you shouldn't be doing, but IE, specifically, will not style any elements it is not aware of. That would include every non-standard element you are attempting to use now.

This can be done using javascript. Google for "html5shim" for an example of how IE is updated to accept HTML5 elements.

EDIT: In addition, the elements you are using inside the ul are invalid since ul can only contain li elements.