iframe and css compatibility - html

Question

I need some compatibility help. My website looks different in browsers. Chrome/firefox, etc. looks right but IE is messed up. Take a look at: http://southwestarkansasradio.com/joomla
I'm using Joomla 2.5. The search box is moved to the left and my on air box script does not work in IE. Code is below, can you help? thanks.
<table border="0">
<tr>
<th>
<center><img style="float: left;"
src="http://www.southwestarkansasradio.com/images/onair995.jpg" alt="" height="35"
width="316" /><br><img
src="http://www.southwestarkansasradio.com/images/playerbackground.jpg" width="316"
height="216" alt="" border="1"><div id="now playing" style="position: absolute; top:
60px; left: 20px;>
<!--[if IE]>
<iframe src="http://www.southwestarkansasradio.com/NowPlaying.html" name="nowplaying"
style="height:216px" "width:316px" frameborder="0" scrolling="no" border="none"
allowtransparency="true" valign="top" ></iframe>
<![endif]-->
<!--[if !IE]>-->
<iframe src="http://www.southwestarkansasradio.com/NowPlaying.html" name="nowplaying"
style="height:216px" "width:316px" frameborder="0" scrolling="no" border="none"
valign="top" ></iframe>
<!--<![endif]-->
</div></center>
</th></tr></table></div>

Answer 1

That html is really hard to read for such a small piece of code. Using indentation would make it easier for you to spot mistakes. There were a number of things wrong:
the opening div was missing from the snippet
One of the divs "now playing" has a space in the id. One cannot have spaces in HTML IDs.
you should have a trailing slash in the br tag
you haven't closed the css style in the nowplaying div, i.e. you forgot the closing apostophe. This would cause problems.
iframe does not have a valign property
the height and width in the iframes are badly formed
iframes do not have a border property
Something like the following should serve better but without being able to debug on your server it's guesswork. Anyway, as said I've kept it pretty much to your structure and fixed fixed the obvious stuff but there will probably still be some issues when you try it on the site but it will get you closer. I certainly wouldn't do it this way however.
The w3c validator is a handy tool.
<div>
<table border="0">
<tr>
<th>
<center>
<img style="float: left;" src="http://www.southwestarkansasradio.com/images/onair995.jpg" alt="" height="35" width="316" />
<br/>
<img src="http://www.southwestarkansasradio.com/images/playerbackground.jpg" width="316" height="216" alt="" border="1">
<div id="nowplaying" style="position: absolute; top: 60px; left: 20px;">
<!--[if IE]>
<iframe src="http://www.southwestarkansasradio.com/NowPlaying.html" name="nowplaying" height="216px" width="316px" frameborder="0" scrolling="no" allowtransparency="true" ></iframe>
<![endif]-->
<!--[if !IE]>-->
<iframe src="http://www.southwestarkansasradio.com/NowPlaying.html" name="nowplaying" height="216px" width="316px" frameborder="0" scrolling="no" ></iframe>
<!--<![endif]-->
</div>
</center>
</th>
</tr>
</table>
</div>
This is just a hack but to move the search box in IE8 and IE9 (haven't tried IE7) add the following to the head section of your template's index.php. It's just "pushing" the search box over.
<!--[if IE]>
<style type="text/css">
div.topmenu
{
width: 250px !important;
}
div.search
{
margin-left: 30px !important;
}
</style>
<![endif]-->