Microsoft Feels Your IE Hacking Pain
Posted by Jonathan Ng | Filed under Technical
From David Storey of the Opera Community: Check out this styesheet (http://connect.microsoft.com/Styles/GeneralStyles.css) from one of Microsoft’s servers…
/* fix for the IE 1px-off margin error */
* html .StupidIEMarginHack
{
margin-right: 1px;
}
* html .StupidIEWidthHack
{
width: 100%;
}
No wonder IE7 was such a major improvement.
Making Things Work in IE6
Posted by Jonathan Ng | Filed under Technical
Jnls.Net didn’t work in IE6 at first. Since everything looked find in IE7, I never took the trouble to fix things for IE6. One thing I have to tell you, is that you have to make sure your site looks presentable in IE6 no matter what. It’s like a do or die situation. IE7 is still in beta, and millions of users are still on IE6. Think about your potential clients, do they use Firefox? I doubt it…
I knew it wasn’t that hard to fix Jnls.Net for IE6, so after several hours of coding (and cursing), I’m proud to certify Jnls.Net “IE6: semi-compliant”. This is mainly due to the reason that “show what posts” tabs on the left can’t be re-produced in IE6. Even if it could, the effort involved for such a thing would simply not be worthwhile. All I did is hide the original tabs on the left with display: none and use a IE conditional statement that re-adds the links at the beginning of the page. Read the rest of this entry »
Tags: css, jnls.net, web_design
Centered Tabs, Improved for IE 7
Posted by Jonathan Ng | Filed under Technical
Google for “centered tabs” and you’ll see 24ways’ centered tabs at the top. You go about reading how it works, and finnaly try it out in your own webpage. However, the surprise about it is that it breaks in Internet Explorer 7 (beta 2). It looks fine in all browsers, including IE6, but the changes in IE7 breaks it.
Through trial and error, and of course, hacking, I’ve managed to make centered tabs work in all browsers except Safari. There might be a way to make it work in Safari but I don’t have a Mac to do any testing unfortunately. Before we continue with the codes though, I’d strongly suggest that you have a understanding of the sliding doors technique first. Read the rest of this entry »
Tags: css
Flexi Sides: Degrading Gracefully
Posted by Jonathan Ng | Filed under Technical
It was really stupid of me to not think of what happens when the user has JavaScript disabled. The first comment I had was exactly on that.
The simplest method to ensure graceful degrading, is to add some default styles to your box so that when JavaScript is disabled, the user would still get a simple looking box. However, there’s a slight problem with Flexi Sides. You see, Flexi Sides adds containers to your box. Let’s look at how the DOM might look like after adding some containers to #rounded-box: Read the rest of this entry »
Tags: css, my_web_projects, web_design
Setting Element Styles with JavaScript
Posted by Jonathan Ng | Filed under Technical
Since I couldn’t figure out a pure CSS method to perform the rollover effect on the navigation menus, I used JavaScript instead. Besides, it’s much more simple and easier to maintain, rather than a complex mangle of CSS. So to change the curved image from green to pink, I used something like the following to change the CSS background properties:
function naviOver(e) {
gE('active').style.background = "url(Images/pink.png) top right no-repeat";
}
It worked of course, but I was late to realize that it worked only on the home page, with the rollover images in an Images folder located at /jnls (root folder for my blog). I tried using some alert()s to determine whether the background property was set. The result: it works.
So what could be the darn problem be? Next thing on my mind: the bloody images aren’t loading. After some probing, it turns out then when you set an element’s style with JavaScript, the relative path becomes that of the page. For example, for the page /folder/index.htm, url(Images/pic.png) would refer to /folder/Images/pic.png, and NOT where the original CSS file was located (the wordpress themes folder in my case).
Sigh, so that was what’s wrong. So my solution was to create seperate classes for the normal and hover states for the elements concerned, and use JavaScript to change their classes onmouseover.
gE('active').className = "hover";That pretty much did the trick. Ease of maintenance ensured at the same time!
Note:
function gE(e) { return document.getElementById(e); }Tags: css, javascript, xhtml
