dawnerd » HTML

Fixing Common CSS Issues In IE6 and IE7

Troy Whiteley — Tue, 21 Oct 2008 06:05:01 +0000

As it turns out, Microsoft really doesn’t care about web standards at all. It has taken them way too many years to adopt the basics of CSS2 correctly. Now they are trying to expand that with IE8. However, developers still have to deal with the outdated IE6 and IE7. Using min-width is completely pointless unless your user base only uses good browsers.

The other day, I literally stumbled upon a JS file that fixes most of the IE6 and IE7 bugs. It emulates a lot of missing CSS functionality, and also applies a generic PNG fix. You can find the file here. I have been using it on all of my projects recently. In combination with a css reset stylesheet and the IE7 JS file, I have had a lot less headaches. I say you give it a shot. it’s not like it will take a lot of work for you to at least try out.

An Alternate Way To Bypass Javascript’s Same-Origin Policy

Troy Whiteley — Thu, 12 Jun 2008 03:42:40 +0000

If you have worked with AJAX at all, you know that there is this thing called the Same-Origin policy which makes it nearly impossible to send AJAX requests to 3rd party domains. There are workarounds such as going through a proxy. I don’t like that and think it’s messy. However, sometimes it’s the only way to go about getting the job done. This post is not about going through a proxy, instead, it is about using a little trick I learned from Yahoo.

If you have control over both domains, then this may be the ideal solution for you. For example, lets say you have two sites and you need to share data between the sites. Connecting via MySQL could be out of the question. So what do you do now? Create a dynamic javascript include file.

See how that outputs a Javascript array? It will come in handy next.

By including the dynamic.php file as if it were a javascript file, you have imported the data from the other domain without having to use ajax. You can use this to pass any amount of javascript you need. I’m sure if you’re clever you will figure out how to make this into a “mock AJAX” system.

Making Flash Obey Z-Index

Troy Whiteley — Thu, 22 May 2008 20:08:45 +0000

A common problem with Flash is that it usually will not listen to the z-index of the page. This causes drop down navigation items to appear under the flash. However, there is a neat way to make flash behave correctly while respecting the XHTML standard.

We will use the script I put together in the Simple XHTML Flash Embedding article.

The parameter Flash needs is called “wmode.” We need to set “wmode” to ‘transparent.’

note: wmode can be set as an inline attribute but will break the pages validation.

“Wmode” is known to cause some problems, so check in all browsers before you go live with anything.

Rollover Images Without Javascript

Troy Whiteley — Fri, 16 May 2008 05:29:44 +0000

One of the messiest things I have seen is the auto-generated code from Dreamweaver for rollover images. It got me thinking of ways to make the images swap without the need of Javascript. Instantly I thought CSS. It was actually fairly simple to get working.

Take for example this button:

Right now the button doesn’t do a thing. However, if we apply some CSS to it, we get a nice button with a rollover.


.button{
    background:url('url/to/image.png') no-repeat;
    width:20px;
    height:20px;
    display:block;
}
.button:hover{
    background:url(url/to/rollover.png) no-repeat;
}

Now the button will show the image and swap to the rollover when you hover over it. All without Javascript. But, you ask “How do you preload the images without Javascript?”

I laugh, such a simple answer. Put the rollover images at the top of the page, inside of a hidden div.

And there you have it, JS free rollover images.