breakthrough design

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?

• No matter how high you set the z-index of your absolutely or relatively positioned element, it still displays under:
  • A <select> box
  • A flash movie
  • A Java applet
  • A SIFR headline

* Also have you noticed how this is yet another seemingly exclusive IE issue??  Are you surprised?  Do you want to buy us a beer?

Internet Explorer: A browser or a sweaty toothed madman?

Good question.

The Solution

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.

What’s the Problem?

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??

The Solution

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).

How to Use It

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.

Known Issues

Being a bug fix, there are some known issues.  For example:

• Child links of absolutely positioned elements cannot be clicked.  There is a workaround for this, but not a full solution.
• z-index issues: when positioning dynamic elements (e.g. a dropdown navigation), images affected by the script will always appear in front of the absolutely positioned elements.  Working on a solution..

UPDATE

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.

How it works

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!

HTML Code

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>


CSS Code

Most likely you would include this in your external style sheet:


.special {display:none}


The Last Step

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.

Concise, and easy to implement – we had to give credit where credit was due.  Not only is this a great CSS Image Replacement article, but a solid CSS mouseover tutorial as well.  Thanks to the guys/girls over at GC

CSS Image Replacement in Navigations with Mouseovers

Ahh the power of CSS Positioning (Google stretching CSS Positioning to it’s limits).

“If a link with display: block and no explicit dimensions is inside a list item, any spaces or linebreaks that follow the list item in the code will cause extra whitespace to appear in the browser.”

Just another in the huge slew of IE browser bugs:

http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=1&postId=824