star html hack is gone? No problem! New IE7 hack is here!

I was designing a WordPress theme today. I’ve joint ventured with a great designer and we’re starting up ThemesCrunch.com which will be launching anytime soon. That’s a story I’m keeping for another day. Lets talk about the topic that got you here first.

If you found this post via google search, its likely you already know about the holly hack which uses star html code to fix a jog in IE7 browsers. Here is an example. You have a floating div which is drifted 3 pixels to the top. The normal code would be:

.boxclass {
margin: 0px;
padding: 0px;
border: 1px solid #fff;
width: 300px;
height: 300px; /* We want to change this to 303px to make the box look fine in IE */
}

So we used to apply the holly hack which would be:
.boxclass {
margin: 0px;
padding: 0px;
border: 1px solid #fff;
width: 300px;
height: 300px; /* We want to change this to 303px to make the box look fine in IE */
}
* html .boxclass {
height: 303px;
}

The extended code AFTER the main element will override the actual code and fix the problem. BUT! This was just until Microsoft fixed the hack as stated by PositionIsEverything. No wonder it was not working for me as I was coding my design. I was thinking of bypassing it using the conditional comments and make a hack using a separate CSS file using the following code:

but I felt like playing around with the CSS a little bit more. And guess what? I found another fix for this. Believe me, its very simple! Lets say we have the first code in this post as the actual code and we want to add extra 3 pixels to the height property. What do we do? Trust me, you will laugh at this one.

.boxclass {
height: 303px; /* Add this element that you want to change */
}; /* and add this semicolon at the end AFTER the element closure. The shahz hack! muahaha */

.boxclass {
margin: 0px;
padding: 0px;
border: 1px solid #fff;
width: 300px;
height: 300px; /* This will only be used by non-IE browsers */
}

That’s it..The problem is fixed..The thing that you need to keep in mind is, the IE tag must always be ABOVE the actual code..What I have seen is that IE bypasses the code after the semicolon but this is not the case for the other browsers..I’ve tested on Opera 9.6 and FireFox 3 which is not affected at all. Try it out. If you want to discuss it, please do so in the comments box. I love exchanging opinions and ideas :)

Regards,
shahz

2 Responses to “star html hack is gone? No problem! New IE7 hack is here!”

1. Big John says:

   January 8, 2009 at 2:29 am

   Shahz, I guess this does make it possible to css-hack for IE, but I’ve been burned before like this. It seems a bit risky to go back to css hacks after the safety of CC’s, but if someone wants to take that chance, well…

   I also wonder if other browsers will remain stable in this case or might suddenly stop parsing the css like IE.
2. ShahZ says:

   January 8, 2009 at 2:45 am

   Big John!
   Its a pleasure to have you here! I didnt expect to get a reply from you though. I’ve learn’t most of IE hacks from your site! Well, I tested out the code just recently. It appears that after IE bypasses the element after the semicolon, it continues reading the rest of the CSS file! Give it a shot Big John! I’d love to see this becoming another theory of fixing CSS. You’re well known in identifying these hacks.

   Respects! Thank you for posting a comment..