xavodim

I was driving myself crazy with trying to come up with a fix for a problem I was having with my blog’s Wordpress theme not rendering correctly in IE. The problem had to do with borders and background style information on unordered lists in my sidebars. The issue also extended to some post titles not showing their backgrounds or borders in IE either.

Whenever I loaded the site in IE, the sidebar lists would only show the text in each <li></li> with none of the border, background, or bullet image styling. Some of the borders and backgrounds would render as you moused over certain links or areas, but nothing would fix the rendering problem altogether.

I tried many times to hunt down the cause of the bug in IE, but never found anything that made a difference at all. Thankfully I found this description and fix of the bug at Positioniseverything.net. Apparently the bug is an issue Internet Explorer has with rendering backgrounds and borders in nested <div> classes that are relatively positioned.

The solution is very simple and worked like a charm. All that needs to be done is to set all <li>, <ul>, & <dl>'s to relative. and the bug is fixed:

          ul, ol, dl {
              position: relative;  }

I also set my post title classes to relative and they were also fixed.

Technorati Tags: css, bug, ie, internet explorer, fix, design, html, link

Bookmarking: Del.icio.us | Digg | reddit | Furl | Spurl

Responses are currently closed, but you can trackback from your own site.