IE6 solution for position absolute with height 100% dynamically

I was working on a rounded corner solution that required to supports IE 6 and other major browsers with the number of sprites images given to me. Everything works perfectly until i test the css rule with IE 6. The look very nice layout was literally destroy by IE6. So i have to redesign it slightly so that it works nicely across all browser. Well, supporting IE6 is definitely not one of my favorite things to do for css design as there are many problems one will encounter due to the inconsistency ways of how each browser is being implemented. One of the problem that i encountered doing this was to get my left and right shadow border image to repeat itself on the y axis. The problem was it doesn't even repeat itself! πŸ™

Problem with IE 6 Absolute Position with Height 100%

Soon, i found out that it was due to how IE 6 sees the current div block height. I was trying to set the div block of the left and right side shadow to fix into the content of my rounder corner solution as shown below,

This is something that i took with Firefox, let's look at IE 6 display!

Well.. this is not the actual messed up code that i initially saw but the one that i have completed with a bit of code taken off. Β Notice that the side sprite images did not repeat itself. This is not due to IE 6 incompatible with css, background-repeat rule. This is purely how IE 6 behave when your div block has absolute position rule intact with it. Let's look at the code of both my CSS and HTML code.

2 thoughts on “IE6 solution for position absolute with height 100% dynamically

  1. Nice post, I had to do something very similar in the past and it was kind of the same solution, however I didn't do the height: !important trick, mainly because I didn't need to...
    What was important however to achieve the goal was the height in the parent box, for IE6 it is fundamental πŸ™‚

    However... I don't program anymore for IE6 xD For all freelance jobs I state that I'm just limited to make it compatible with all current browsers versions πŸ™‚
    It has made my life really really simple.

    Greetings !

  2. Hey unreal4u! Nice to still see you around :D, its been ages since i wrote something useful for the web! *shy* I've been quite busy with work recently which leaves me little to no time to write good post πŸ™

    I agree that IE 6 should just die ~ lol! Will share my nasty rounded corner code once it passes the QA. Hahaha.. Cheers mate πŸ™‚

Comments are closed.