Таблицы хорошо выглядят в Firefox, но не в IE - PullRequest
Новая
       8

Таблицы хорошо выглядят в Firefox, но не в IE

0 голосов
/ 20 марта 2009

Первый вопрос здесь.

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

Ссылка http://www.mothershipinc.com Предупреждение: содержит музыку

Вот код для страницы индекса: 

<?php
include "db.php";

function imageResize($width, $height, $target) {

    //takes the larger size of the width and height and applies the formula accordingly...this is so this script will work dynamically with any size image
    if ($width > $height) {
    $percentage = ($target / $width);
    } else {
    $percentage = ($target / $height);
    }

    //gets the new value and applies the percentage, then rounds the value
    $width = round($width * $percentage);
    $height = round($height * $percentage);

    //returns the new sizes in html image tag format...this is so you can plug this function inside an image tag and just get the
    return "width=\"$width\" height=\"50\"";
}

function imageResize150($width, $height, $target) {

    //takes the larger size of the width and height and applies the formula accordingly...this is so this script will work dynamically with any size image
    if ($width > $height) {
    $percentage = ($target / $width);
    } else {
    $percentage = ($target / $height);
    }

    //gets the new value and applies the percentage, then rounds the value
    $width = round($width * $percentage);
    $height = round($height * $percentage);

    //returns the new sizes in html image tag format...this is so you can plug this function inside an image tag and just get the
    return "width=\"150\" height=\"$height\"";
}

$playerSQL = "SELECT * FROM main";
$playerResult = mysql_query($playerSQL) or die(mysql_error());
$playerRS = mysql_fetch_array($playerResult);

?>

<html>
<head>
<link rel="stylesheet" href="css/template.css" type="text/css" />
<?php include "fadeinscript2.php"; ?>
<?php include "fadeinscript.php"; ?>
</head>
<body id="page_bg">
<div align="center">
   <table width="800" height="100%" border="0">
     <tr>
    <td colspan="7" valign="bottom" align="right" height="80" background="images/header.gif" style="background-repeat:no-repeat;padding-bottom:5px;padding-right:20px;">
         <font style="font-size:12px;" color="#ffffff"><a href="index.php" style="text-decoration:none;font-size:12px;color:#ffffff;">Home</a> | <a href="artist.php?artistid=0" style="text-decoration:none;font-size:12px;color:#ffffff;">Artists</a></font>
       </td>
     </tr>
     <tr>
       <td colspan="7">
       </td>
     </tr>
     <tr>
       <td colspan="7">
       </td>
     </tr>
     <tr>
<!--BEGIN CURRENT RELEASES BLOCK-->
       <td valign="top" width="189" height="280" background="images/small_home_box.gif" style="background-repeat:no-repeat;padding-top:8px;">
      <table width="100%">
        <tr>
        <td align="left" colspan="2">
          <font style="font-size: 18px" color="#ffffff">Current Releases</h1><br />
        </td>
        </tr>
       <?php
        $crQuery = "SELECT * FROM albums WHERE currentrelease='y' ORDER BY orderfield LIMIT 4";
        $crResult = mysql_query($crQuery) or die(mysql_error());
        while ($crRS = mysql_fetch_array($crResult))
        {
          // Get Artist Name
          $artistQuery = "SELECT * FROM artists WHERE id=" . $crRS['artistid'];
          $artistResult = mysql_query($artistQuery) or die(mysql_error());
          $artistRS = mysql_fetch_array($artistResult);
          $image_location = $crRS['image_location'];
          echo "<tr>";
          echo "<td width='55' valign='top' style='padding-top:3px;'>";
              //Display profile image
              //$myimage = getimagesize("albums/" . $image_location);
              //$newsize = imageResize($myimage[0], $myimage[1], 50);
              echo "<a href='artist.php?artistid=" . $artistRS['id'] . "' target='_self'><img src='albums/" . $image_location . "' height='50' width='50' border='0'></a>";     
          echo "</td>";
          echo "<td align='left' valign='top'>";
          echo "<font style='color:#ffffff;font-size:.7em;'>";
          echo "<b><a href='artist.php?artistid=" . $artistRS['id'] . "' target='_self' style='text-decoration:none;color:#ffffff;'>" . stripslashes($artistRS['artist_name']) . "</a></b><br />";
          echo "<a href='artist.php?artistid=" . $artistRS['id'] . "' target='_self' style='text-decoration:none;color:#ffffff;'>" . stripslashes($crRS['album_name']) . "</a>";
          echo "</td>";
          echo "</tr>";
        }
       ?>
        <tr>
          <td colspan="2" align="right" style="font-size:.7em; color:#ffffff;padding-right:12px;">
            more current releases
          </td>
        </tr>
         </table>   
       </td>
<!--END CURRENT RELEASES BLOCK-->
       <td width="25" valign="top">
         &nbsp;
       </td>
<!--BEGIN FLASH BLOCK-->
       <td colspan="3" width="374" height="280" align="center" valign="middle" background="images/big_home_box.gif" style="background-repeat:no-repeat;padding-right:8px;">
             <script type="text/javascript">
            //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
            new fadeshow(fadeimages, 350, 250, 0, 3000, 1, "R")
          </script>
       </td>
<!--END FLASH BLOCK-->
    <td width="10" valign="top">
         &nbsp;
       </td>
<!--BEGIN APPEARANCES BOX-->
    <td valign="top" width="189" height="280" background="images/small_home_box.gif" style="background-repeat:no-repeat;padding-top:8px;">
      <table width="100%">
        <tr>
        <td align="left" colspan="2">
          <font style="font-size: 18px" color="#ffffff">Shows</h1><br />
        </td>
        </tr>
        <?php
        $crQuery = "SELECT * FROM appearances";
        $crResult = mysql_query($crQuery) or die(mysql_error());
        $crRS = mysql_fetch_array($crResult);
          echo "<tr>";
          echo "<td width='55' valign='top' style='padding-top:3px;'>";
          echo "<font style='color:#ffffff;font-size:.7em;'>";
          echo ereg_replace("(\r\n\r\n|\n\n|\r\r)", "<br /><br />", substr($crRS['shows'],0,300));
          echo "</font>\n";
          echo "</td>";
          echo "</tr>"; 
       ?>
        <tr>
          <td colspan="2" align="right" style="font-size:.7em; color:#ffffff;padding-right:12px;">
            &nbsp;
          </td>
        </tr>
         </table>   
       </td>
<!--END APPEARANCES BOX-->
    </tr>
         <tr>
<!--BEGIN UPCOMING RELEASES BLOCK-->
       <td valign="top" width="189" height="367" background="images/tall_home_box.gif" style="background-repeat:no-repeat;padding-top:8px;">
      <table width="100%">
        <tr>
        <td align="left" colspan="2">
          <font style="font-size: 18px" color="#ffffff">Upcoming Releases</h1><br />
        </td>
        </tr>
        <?php
        $crQuery = "SELECT * FROM albums WHERE newrelease='y' ORDER BY orderfield LIMIT 4";
        $crResult = mysql_query($crQuery) or die(mysql_error());
        while ($crRS = mysql_fetch_array($crResult))
        {
          // Get Artist Name
          $artistQuery = "SELECT * FROM artists WHERE id=" . $crRS['artistid'];
          $artistResult = mysql_query($artistQuery) or die(mysql_error());
          $artistRS = mysql_fetch_array($artistResult);
          echo "<tr>";
          echo "<td width='55' valign='top' style='padding-top:3px;'>";
              //Display profile image
              //$myimage = getimagesize("albums/" . $crRS['image_location']);
              //$newsize = imageResize($myimage[0], $myimage[1], 50);
              echo "<a href='artist.php?artistid=" . $artistRS['id'] . "' target='_blank'><img src='albums/" . $crRS['image_location'] . "' height='50' width='50' border='0'></a>";     
          echo "</td>";
          echo "<td align='left' valign='top'>";
          echo "<font style='color:#ffffff;font-size:.7em;'>";
          echo "<b><a href='artist.php?artistid=" . $artistRS['id'] . "' target='_blank' style='text-decoration:none;color:#ffffff;'>" . $artistRS['artist_name'] . "</a></b><br />";
          echo "<a href='artist.php?artistid=" . $artistRS['id'] . "' target='_blank' style='text-decoration:none;color:#ffffff;'>" . $crRS['album_name'] . "</a><br />";
          echo "<a href='artist.php?artistid=" . $artistRS['id'] . "' target='_blank' style='text-decoration:none;color:#ffffff;'>" . $crRS['release_date'] . "</a>";
          echo "</td>";
          echo "</tr>";
        }
       ?>
        <tr>
          <td colspan="2" align="right" style="font-size:.7em; color:#ffffff;padding-right:12px;">
            &nbsp;
          </td>
        </tr>
         </table>   
       </td>
<!--END UPCOMING RELEASES BLOCK-->
<!--BEGIN PLAYER BLOCK-->
     <td colspan="5" valign="top" width="418" height="367">
      <table width="100%">
        <tr>
          <td align="center">
            <?php
            echo stripslashes($playerRS['playercode']);
        ?>  
          </td> 
        </tr>
         </table>       
    </td>
<!--END PLAYER BLOCK-->
<!--BEGIN NEWS BOX-->
    <td valign="top" width="189" height="367" background="images/tall_home_box.gif" style="background-repeat:no-repeat;padding-top:8px;">
      <table width="100%">
        <tr>
        <td align="left" colspan="2">
          <font style="font-size: 18px" color="#ffffff">News</h1><br />
        </td>
        </tr>
        <?php
        $crQuery = "SELECT * FROM news";
        $crResult = mysql_query($crQuery) or die(mysql_error());
        $crRS = mysql_fetch_array($crResult);
          echo "<tr>";
          echo "<td width='55' valign='top' style='padding-top:3px;'>";
          echo "<font style='color:#ffffff;font-size:.7em;'>";
          echo ereg_replace("(\r\n\r\n|\n\n|\r\r)", "<br /><br />", substr($crRS['news'],0,500));
          echo "</font>\n";
          echo "</td>";
          echo "</tr>"; 
       ?>
        <tr>
          <td colspan="2" align="right" style="font-size:.7em; color:#ffffff;padding-right:12px;">
            more news
          </td>
        </tr>
         </table>   
       </td>
<!--END APPEARANCES BOX-->
    </tr>
    <tr>
<!--BEGIN ARTISTS BOX-->
    <td colspan="7" width="800" height="300" align="center" valign="top" background="images/artists.gif" style="background-repeat:no-repeat;padding-top:8px; padding-right:4px; padding-left:4px;">
      <table width="100%">
        <tr>
        <td align="left" colspan="2">
          <font style="font-size: 18px" color="#ffffff">Artists</font><br />
        </td>
        </tr>
        <tr>
        <?php
        $crQuery = "SELECT * FROM artists ORDER BY orderfield LIMIT 36";
        $crResult = mysql_query($crQuery) or die(mysql_error());
        $artists = 0;
        $totalartists = mysql_num_rows($crResult);
        while ($crRS = mysql_fetch_array($crResult))
        {
          $artists = $artists + 1;
          echo "<td width='100' align='center' valign='top' style='padding-top:3px;'>\n";
              //Display profile image
              echo "<a href='artist.php?artistid=" . $crRS['id'] . "' target='_self'><img src='artists/" . $crRS['image_location'] . "' height='75' width='75' border='0'></a><br />\n"; 
              echo "<a href='artist.php?artistid=" . $crRS['id'] . "' target='_self' style='text-decoration:none;color:#ffffff;font-size:.7em;'>" . $crRS['artist_name'] . "</a>\n";
          echo "</td>\n";
          if($artists == 8 || $artists == 16 || $artists == 24)
          {
            echo "</tr>\n";
            echo "<tr>\n";
          }
        }
       ?>
        </tr>
        <tr>
          <td colspan="6" align="right" style="font-size:.7em; color:#ffffff;padding-right:12px;">
            <a href="artist.php?artistid=0" style='text-decoration:none;color:#ffffff;font-size:.7em;'>more artists</a>
          </td>
        </tr>
         </table>       
     </td>
<!--END ARTISTS BOX-->
    </tr>       
    <tr>
        <td colspan="4" align="left" style="padding-left:15px;color:#ffffff;font-size:.75em;">
            Copyright &copy;2009 Mothership Inc.
        </td>
        <td colspan="3" align="right" style="padding-right:15px;">
            <a href="mailto:kevin@mothershipinc.com" style="color:#ffffff;text-decoration:none;font-size:.75em;">Contact Us</a>
        </td>
    </tr>   
   </table>
</div>
</body>
</html>

Ответы [ 4 ]

2 голосов
/ 20 марта 2009

Рассмотрим следующий блок вашего кода: 

<td valign="top" width="189" height="280" background="images/small_home_box.gif" style="background-repeat:no-repeat;padding-top:8px;">
      <table width="100%">
        <tr>
        <td align="left" colspan="2">
          <font style="font-size: 18px" color="#ffffff">Shows</h1><br />
        </td>
        </tr>
        <tr><td width='55' valign='top' style='padding-top:3px;'><font style='color:#ffffff;font-size:.7em;'>PASADENA<br /><br />Mar 17 2009 8:00P 
 Nabbs Creek Cafe Pasadena, Maryland <br /><br />Mar 19 2009 8:00P 
 thew barn with 86 the effort Carney, Maryland <br /><br />Mar 20 2009 8:00P 
 whiskey bar w/ b&b Hoboken, New Jersey <br /><br />Mar 21 2009 9:00P 
 Red House Tavern w/ Bond & bentley,Tsunami Rising! Baltimore, Maryland </font>
</td></tr>

У вас есть родительский тд с шириной 189, но дочерний тд с содержимым велик только 55. Вот почему ваш текст отключается.

1 голос
/ 20 марта 2009

На самом деле было бы невероятно больно создавать этот макет с использованием делений вместо таблиц.

Вы все равно должны иметь в виду следующее.

min-width не поддерживается в старых версиях IE Ширина в Firefox не включает границы и отступы, в IE6 граница и отступ находятся внутри ширины. Пример - блок 100px с отступом 10px имеет ширину 120px в FF и ширину 100 в IE6. 

<div style="width: 800px; height: 80px; margin: 5px auto; background-color: Aqua;">
    <h2>Mothership Records Banner</h2>
</div>
<div style="width: 800px; margin: 10px auto; clear: both;">
    <div style="width: 178px; margin-right: 35px; float: left; background-color: Aqua;">Current Releases</div>
    <div style="width: 374px; margin-right: 35px; float: left; background-color: Aqua;">Image Banner Thing</div>
    <div style="width: 178px; float: left; background-color: Aqua;">Shows</div>
</div>
<div style="width: 800px; margin: 10px auto; clear: both;">
    <div style="width: 178px; margin-right: 35px; float: left; background-color: Aqua;">Upcoming Releases</div>
    <div style="width: 374px; margin-right: 35px; float: left; background-color: Aqua;">Player</div>
    <div style="width: 178px; float: left; background-color: Aqua;">News</div>
</div>
<div style="width: 800px; margin: 10px auto; clear: both; background-color: Aqua;">
    Artists
</div>
<div style="width: 800px; margin: 10px auto; clear: both;">
    Copyright
</div>
0 голосов
/ 20 марта 2009

Вы можете заставить большинство браузеров отображать (в значительной степени) одно и то же, объявляя doctype строгим до вывода любого HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Doctype сообщает браузеру, какой набор правил следует соблюдать при рендеринге стиля страницы, и в моем опыте doctype строгого режима имеет наибольшее сходство между броузерами.

Quirksmode имеет очень хороший обзор doctypes , и их диаграммы сравнения являются первоклассными.

Я сомневаюсь, что это как-то связано с этим, но вы тоже нарушили HTML. Все ваши заголовки (текущие выпуски, шоу, новости) в полях обернуты в <font>Header</h1>.

0 голосов
/ 20 марта 2009

это связано с тем, что IE6 (с чем я на это смотрел) не поддерживает тег min-width, который, как я заметил, вы использовали, IE6 также, так сказать, считает поля и отступы как ширину.

...