Brennan’s Blog

Based on reading up on modern Javascript/DOM and CSS capabilities in the currently popular browsers I have created a simple page with a slick UI with DIV tags but I have one minor problem with the widths in MSIE on Windows. I checked my math in the CSS to make sure everything should be lined up but only Mozilla and Safari handle it correctly. My test page is here...

http://www.offwhite.net/projects/glarc/

What I notice is that the middle DIV tag is not as wide as the header and footer borders by a couple of pixels in MSIE. As workaround I can use Javascript to reset the width based on the browser, but I find that to be undesireable. Here is that Javascript.

<script type="text/javascript">
function fixwidth() {
  if (document.all) {
  var element = document.getElementById('greeting');
    if (element) {
      element.setAttribute('style', 'width: 288px;');
    }
  }
}

window.onload=fixwidth;
</script>

Can anyone tell me what is wrong with my CSS for this example?