совместимость с iframe и css

Question

Мне нужна помощь по совместимости. Мой сайт выглядит по-разному в браузерах. Chrome/firefox и т. Д. Выглядит правильно, но IE испорчен. Посмотрите на: http://southwestarkansasradio.com/joomla

Я использую Joomla 2.5. Поле поиска перемещается влево, а мой сценарий с воздушным ящиком не работает в IE. Код ниже, можете ли вы помочь? Благодарю.

<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

Этот html действительно трудно читать для такого небольшого фрагмента кода. Использование отступов облегчит вам выявление ошибок. Были несколько вещей неправильно:

• открытие ДИВ пропускал из сниппета
• Один из дивы «сейчас играет» имеет место в ид. В HTML-идентификаторах не может быть пробелов.
• у вас должна быть задняя косая черта в теге br
• вы не закрыли стиль css в текущем div, т. Е. Вы забыли закрытие апостофа. Это вызовет проблемы.
• IFrame не имеет свойства VALIGN
• высоты и ширину в фреймах плохо образованных
• Iframes не имеет границу участка

что-то вроде следующей должны служить лучше, но, не имея возможности для отладки на вашем сервере это догадки. Во всяком случае, как я сказал, я сохранил это в значительной степени для вашей структуры и исправил исправленные очевидные вещи, но, вероятно, все еще будут некоторые проблемы, когда вы попробуете его на сайте, но он приблизит вас. Однако я, конечно, не сделал бы этого так.

Валидатор w3c - удобный инструмент.

<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> 

Это просто хак, но переместить окно поиска в IE8 и IE9 (не пробовал IE7) добавить следующие строки в головной части index.php вашего шаблона. Это просто «толкает» окно поиска.

<!--[if IE]> 
<style type="text/css"> 
div.topmenu 
{ 
    width: 250px !important; 
} 

div.search 
{ 
    margin-left: 30px !important; 
} 
</style> 
<![endif]-->