Centering an Application or Window In AIR | Home | try { go_fish(); } catch(JDOMException){}

Filed under Quick Tips on May 29, 2008 by Alex Gutierrez

Troubleshooting Presentation for IE6/7

I've had my share of issues with IE6/7. From my end, they mostly come in layout issues - not forgetting transparency for IE6.

Below is my two step approach when dealing with this monster:

1. Make use of conditional statements for IE and create a separate css file. Lets name this file "ie_style.css"

2. Use the underscore hack to address IE6 like so:

#myJucyTable {
	width: 100%; /* Hi IE7 */
	_width: 99%; /* Hi IE6 */
}

Note: Make sure to address IE7 first.

---

EXAMPLE:

Below we have mark-up for a two column layout. The left container(#left) has an inner two column layout(.col_container).

<div id="right">
	Navigation
</div>
<div id="left">
	<div class="col_container">
		<div class="left">
			Left Container
		</div>
		<div class="right">
			Right Container
		</div>
	</div>
</div>

Styled like so:

#right { width: 9em; float: right; }
#left { margin-right: 9em; }

.col_container div { border: 1px solid #000; }
.col_container:after { /* Used to clear the float */
    display: block;
    clear: both;
    content: " ";
}
.right { margin-left: 50%; }
.left {
	float: left;
	width: 50%;
}

Adding content to the layout and previewing on IE6/7 show the right inner container(.right) to not have the given 50%.

Add the property below to ie_style.css and presto.

.col_container { height: 1%; /* for both IEs */ }

An alternative way of laying out elements is with the position property.

Add this mark-up to our left container(#left)

<div id="user_account">
	<h2>Account Name</h2>
	<ul>
		<li><a href="#">Edit Account</a></li>
		<li><a href="#">Delete Account</a></li>
	</ul>
</div>

And style:

	#user_account { position: relative; }
	#user_account ul { margin: 0; position: absolute; top: 0; right: 0; }
	#user_account li { display: inline; }

Refreshing IE6 show the unordered list leaks to the right container(navigation)

To fix this, add the property below to ie_style.css and refresh browser.

#user_account { _height: 1%; /* Hello IE6 */}
		

Using "height: 1%" is my #1 tool when dealing with IE. What's yours?

Post a Comment Digg Del.icio.us

Comments

Post a Comment:

Name:

Email Address:

URL:

Comment:

Centering an Application or Window In AIR | Main | try { go_fish(); } catch(JDOMException){}