Showing posts with label code. Show all posts
Showing posts with label code. Show all posts
Monday, September 14, 2009

How to Fix the IE6 Select Box z-index Bug

This is my first time experienced the IE6 z-index bug where a simple select box will always take priority over any predefined z-indices and always show up on top. see the screenshot:


I did search around and luckily discovered that there is a fix -JQuery plugin which by using an iframe and expanding it over the select box area, the iframe will take precendence over the select box. This JQuery plugin will automatically create the iframe for you. The plugin is simply called bgiframe and using it is quick and easy. Just include the script and attach the bgiframe() method to all of your floating layers. Here is a short and quick example:

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.bgiframe.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#floating_div').bgiframe();
}
</script>
</head>
<body>
<select>
<option>Test</option>
</select>
<div id="floating_div">I'm over this select box</div>
</body>
Now those nasty z-index bugs won’t ever trouble you ever again.
Monday, March 16, 2009

How to create popup windows

The HTML and Javacript below will show you how to create popup windows in a simplest way.

First, copy this script into the section of your page:

<SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
return false;
}
//-->
</SCRIPT>

Secondly, insert HTML code:

<a href="popupbasic.html" onClick="return popup(this, 'notes')">my popup</a>

You done!
Wednesday, March 11, 2009

IE family does not support display: none on span in ul li

I just discover that IE 6 & 7 are not following the display: none; rule in the span inside the li. I wonder where else has the same problem.

Here is the code example:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> new document </title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

ul {
list-style: none;
width: 100px;
background: blue;
}

ul li {
width: 100px;
height: 20px;
background: green;
border: 1px solid red;
Vertical-align: top
}

ul li span {
display: none;
}
</style>
</head>

<body>
<div id="pagewrap">
<ul><li><span>one</span></li>
<li><span>two</span></li>
<li><span>three</span></li>
<li><span>four</span></li>
<li><span>five</span></li>
</ul>
</div>
</body>
</html>

So as you can see in IE it adds a gap between the li tags even thought its told to ignore the span and its content. I have found ways to make it work all listed below

1. Set ul li to float: left; <-- but maybe you dont want the ul li to be floated so that doesnt work -->

2. Set the ul li span to display: inline;margin:-500px; <--- but then you have to add overflow: hidden for ie6 to be truelly happy, and just doesnt seem right

3. Similar to 2 with the same issues but using text-indent: -5000px; on the ul li a tag again just doesnt seem right.

4. This seems to be the best solution that I have found and going to look into why a little more is to set the ul li to Vertical-align: top; or Vertical-align: bottom;
Monday, December 22, 2008

Transparent PNG in IE6 with CSS Hacks

IE6 is evil for web developers, we all know about PNG transparency and its problems with IE6.

Say your CSS code looks like this:
#logo { background: url(images/logo.png) no-repeat left top;}
Next, we would follow that with an IE-specific hack.
As it turns out, IE5.5 and IE6 think that it’s possible have an element above the HTML element. Fortunately, all other browsers on the planet know better, so they skip the next rule because it says: For all elements (*) with this selector path starting above the HTML element, do this.
And this is where we’d add our IE-specific alpha transparency filter.
* HTML #logo {/* PNG Alpha IE Win ONLY */ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/logo.png', sizingMethod='scale');}
What we’ve done here is display a transparent PNG natively in all browsers except for IE6, and displayed the same graphic via a proprietary alpha filter only in IE6.
Another way to fix the problem.