Is there nothing this library can’t do, or can’t be added on to do?? Here we’ve stumbled on how this jquery plugin allows you to fade background colors, images, slide colors from the side/top & even at angles.
Get the jQuery Background Position Plugin
View some Background Transition Examples
Awesome.
If you’re dealing with absolutely or relatively positioned elements and you’re noticing that the z-index property doesn’t seem to work, you may be encountering yet another IE bug. In certain cases, IE 6 especially will ignore the z-index property of elements whose parents don’t have a z-index.
The credit goes to Nathan Ostgard for his Position Relative, z-index IE Bug fix. Just give your container, or parent element a z-index of any number. We added:
z-index:1
UPDATE: Try the Position-Relative Z-index Bug Fix to see if that clears up your issue first. It’s worked for us.
Are you or anyone you know (who’s up to our high standards of geekery), ever encountered any of these issues?
* Also have you noticed how this is yet another seemingly exclusive IE issue?? Are you surprised? Do you want to buy us a beer?
Good question.
It is important to note that the SIFR, and flash movies can be made to display behind elements by setting the wmode parameter. However, sometimes this doesn’t seem to work in IE, especially IE6 (We were amazed there). There is another workaround, which involves iFrames: which always display above everything in IE. Therefore, there are some great scripts showing how to create these iframe shims on the fly and insert them behind your menu, or absolutely positioned element.
Us being industrius decided to use jQuery to create these shims onload and dynamically insert them.
Then, us being lazy, decided to search for something already in existence.
Low and behold, the jQuery bgiframe plugin. How I love thee jQuery.
Gone are the days of attempting to hodge podge a transparent gif, in an attempt to match the “matte” of the gif in photoshop to the color of the background in your page. The only way to achieve transparency is with a PNG. You will see a dramatically higher level of clarity with png, allowing for near freedom; dropshadows, fonts, gradients are all handled fairly well with png.
The problem however is that IE 6 definitively does NOT support transparent images. I think Firefox has been supporting it since the ice ages, and probably earlier. So, I can’t use transprent png’s??
Thanks to Twin Helix (Angus Turnbull)’s IE PNG Fix, we can now use transparent images wherever we want, AND it supports transparent background images! TO NOTE: There are other IE PNG Fixes, but we found them to be either: too obtrusive, or not supporting background images, (this also includes our old favorite sleight).
Implementation is just a few steps and doesn’t require long lines of css or javascript code. Get the full directions here. Simply include the attached .htc file, blank 1×1px gif, and one quick line of CSS:
img, div { _behavior: url(scripts/iepngfix.php) }
** PLEASE NOTE: We found that the original script (which does not include an underscore), caused CSS Warnings in Firefox, so the addition of the underscore hides the declaration from Firefox and applies to IE Only.
In this case, we are applying the transparent png support to all images, and divs, you can use it for any elements you wish.
Being a bug fix, there are some known issues. For example:
I know it’s pretty early for an update, as we just published this, but moving on…
Anyway, as this uses the CSS code above to implement the png fix, we would advise a specific class just for the fix which is applied on a case by case basis. That way you can apply the fix only when needed, speeding up load time and preventing any javascript or css confusion. For example:
.pngfix { _behavior: url(scripts/iepngfix.php) }
Alright have fun, and feel free to buy me a beer.
Anyone who’s created an online form knows that automated form spam bots are a problem. Here is a simple method that uses CSS to combat this. Once implemented, it has pretty much dropped our spam rate to zero. Special thanks to the Man in Blue for his article: Fighting Spam with CSS.
In short we’ll simply hide a field using display:none, then after the form is submitted (in PHP, or ASP, etc), we check to see if any value has been inserted into the field. If there is a value in our hidden field – you know it was a bot!
So your html code for the form might be:
<form>
<label>Name:</label>
<input name="name" type="text" />
<label>Email:</label>
<input name="email" type="text" />
<input class="special" name="info" type="text" />
<input type="submit" value="Submit Form" />
</form>
Most likely you would include this in your external style sheet:
.special {display:none}
The last step is to check your submitted form in php or asp, or whatever language you are using to receive the form. If your “info” field has any data at all, it’s a spam bot, and we don’t send it.
