« Under Construction..... | Main | Static Electricity »

Whatever Floats Your Boat..APEX Templates, IE and Floats

Recently working with some custom region templates and button placement I ran into an issue with IE (big surprise) and how it was interpreting the float:right CSS attribute. The behavior I was seeing was that in IE the apex button was being pushed down a row and not lining up with my region title. It seems IE hates floats when used in DIVs. But there is a catch...it worked in IE8. So what we could do is set up some IE 7 specific CSS calls to push the button back up using a margin-top:-18px for example. Doing a bit of digging on the interwebz I found the IE support team blog. An article found here pretty much outlined the issue I was having. the solution was the following code:

<span style='float:left;'>

apex region title here


<span style='float:right; background-color: Yellow;'>

apex buttons here

</span><br clear="both" />

If we add the <br clear="both" /> after the span sections, it not only works in IE 7 but IE 8 and firefox. An interesting solution but one that works. Maybe someone will ask the IE support team "Why?" in a future blog posting from them.

PrintView Printer Friendly Version

EmailEmail Article to Friend

Reader Comments

There are no comments for this journal entry. To create a new comment, use the form below.

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>