Jeremy Smith's blog

Entry Is Labelled

CSS-ing Case Round 3: Fixing IE

Round 3

I went ahead and fixed up the initial IE issues for round 3 instead of filling in the content and side bar areas. I think this fix-IE-incrementally thing will work better for me. This way, at the end, I won't have that monumental task of fixing IE to dread.

The CSS fixes were actually quite simple (they almost always are), they were just time consuming to track down. Here is the entirety of the IE hacks CSS file:

#masthead {
position: relative;
} h1 {
position: absolute;
right: 10px;
top: 0px;
} #content {
width: 378px;
} #sitenav li {
padding: 3px;

The only rules that I have any problems with are the rules on the h1 tag. I worked at it for quite a while, but eventually had to resort to using absolute positioning to get it to behave. If anyone can come up with a better solution, I'd be happy to use it.

I also took care of putting in the |'s in the lists with a little Javascript magic for IE. I used the prototype library, so it's relatively straight-forward too (eschew complexity):

Event.observe(window, 'load',
function () {
var lists = document.getElementsByClassName("pipe_separated"); for(i = 0; i < lists.length; i++) {
var list_items = lists[i].getElementsByTagName("li"); for(k = 0; k < (list_items.length - 1); k++) {
new Insertion.Bottom(list_items[k], " | ");

I had to add class="pipe_separated" to the markup to get the Javascript targeting the correct lists, but that's it. This is still basically the same, clean, straight-forward markup I created in Round 1.

So, that's it. IE6 and 7 now work.