Your comments

that worked, thanks
I wondered what would happen when IOS 6 came out.

So would that be the coordinates in this variable?
<assign property="object:MAP.region" value="39.093606 -94.583316 39.093606 -94.583316"/>
Opps, I found the problem in my HTML. But it is actually opening inside the wire app, anyway to send to to Safari?
updated my code to this, and it worked, thanks!


<wire>
<main>
<panel name="panel" width="100%" height="100%" background="#ffffff">
<text name="main" width="110" height="100" color="#000000" font="courier" size="14" align="center" valign="center" text="Hello World!" onclick="xlink"></text>
<web name="browser" url="http://www.rarewire.com" pagetofit="yes"></web>
</panel>
</main>
<actions>
<action name="xlink">
<load url="safari-http://www.rarewire.com" target="../browser"/>
</action>
</actions>
</wire>
I have made a little progress as to the solution of this problem. I was able to get each div to go below the preceding div by using "clear: both" in my styles. Makes sense. My "bottom-border" is giving me trouble in placement since the WIRE will only render a single margin or padding (e.g.: "padding-top" or "padding: 5 0 0 0;"). I need it to have both a padding-top and margin-top of 15 so that my border-top will have spacing on both sides forming a divider between divs. I may have a workaround but didn't think I should have to use it. Just thought I would give an update of the latest progress.

Thanks for all the help so far :)
Here is a portion of the html that I am using. I am just including a few sections of the content since it just repeats itself in structure.
<html>
<head>
<meta name="viewport" content="width=device-width" initial-scale="1.0" user-scalable="no" minimum-scale="1.0" maximum-scale="1.0">
<style type="text/css">
body {max-width="100%";}
start { padding: 0 0 15px 0; border-bottom: solid 1px #FFFFFF; margin: 0 0 15px 0;}
.judge {height: auto; min-height: 250px; padding: 0 0 15px 0; border-bottom: solid 1px #FFFFFF; margin: 0 0 15px 0;}
h1 {color: #CC2628; font-family: Helvetica; margin: 0;}
h2 {color: #CC2628; font-family: Helvetica; margin: 0;}
h3 {color: #FCDE93; font-family: Helvetica-Oblique; margin: 0;}
img {float: left; max-width: 20%; margin: 0 2% 0 0;}
.bio {float: right; max-width: 78%;}
p {color: #FFFFFF; font-family: Helvetica;}
</style>
</head>
<body>
<div class="start">
<h1><strong>MAIN HEADER</strong></h1>
<p>Long description.. Long description.. Long description.. Long description.. Long description.. Long description.. Long description.. Long description.. </p>
</div>

<div class="judge">
<img src="images/thisisanimage.png" />
<div class="bio">
<h2>PERSONS NAME</h2>
<h3>Where he's from</h3>
<p>All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. </p>
</div>
</div>

<div class="judge">
<img src="images/thisisanimage.png" />
<div class="bio">
<h2>PERSONS NAME</h2>
<h3>Where he's from</h3>
<p>All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. </p>
</div>
</div>

</body>
</html>
I have implemented the web tag so that i can use html text with a transparent background to fill this content.

So far this is working great! I am having a few styling issues though.

First, the content is longer than the height of the screen which causes it to be scrollable. This is fine. The issue is that it creates a shadow where the top (or bottom) of the HTML document is pulled further down than there is content. I assume that this is just an iOS default. I am wondering if there is any way to turn that off?

Second. I have a few divs in my html. I think they are causing some issues with content that rolls over into the next line. This seems fixable with a fixed height, but i need this to be fluid so as to work on both iPads and iPhones. Any thoughts?
This all makes great sense. Thank you for all the help. I have started to try to implement this but so far it is crashing fusebox every time. I'll keep working with it and see if I can't figure something out.
The "sync" action worked great! It did exactly what I needed. I'm still not seeing my imagestrip images. I moved the images to the root folder as well. Here is my new code:


<panel name="launchcontainer" alias="LAUNCHCONTAINER" height="100%" width="100%" xpos="0" ypos="0" background="#000000" alpha="1">
<panel name="sponsor" height="100%" width="100%" xpos="0" ypos="0">
<image name="sponsorlogo" source="images/sponsorlogo.png" align="center" valign="center"></image>
</panel>
<imagestrip name="launchgraphic" alias="LAUNCHGRAPHIC" prefix="launchiphone-" fps="25"></imagestrip>
</panel>

<action name="launchgraphic" oninit="yes">
<playstrip target="LAUNCHGRAPHIC" loops="yes" />
<sync delay="5">
<alpha value="0" time=".5" target="LAUNCHGRAPHIC" />
</sync>
<sync delay="7">
<alpha value="0" time=".5" target="LAUNCHCONTAINER" />
</sync>
</action>