Problème de float non alignés sous IE

Question

Karl02

21 Nov 2010 à 15:12

Bonjour à tous,

Etant débutant sous dreamweaver, je rencontre des difficultés sous Internet Explorer, malgré de nombreuses recherche sur les bugs susceptibles de m'intéresser je sèche complètement, aucun problème à signaler sous Firefox, Flock, Opera et Safari.
Il s'agit d'un problème de non-alignement d'une liste dans le code HTML, mise en forme par CSS, malgré l'utilisation de float:left les liens tombent systématiquement l'un en dessous de l'autre, mais toujours avec le bon positionnement horizontal.
Voici une capture d'écran vous permettant de visualiser le problème:

Ce serait vraimant sympa si quelqu'un pouvait m'aider avec ce problème, voici le code HTML:

<?php require_once('../Connections/mycon.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

$maxRows_Market_News = 3;
$pageNum_Market_News = 0;
if (isset($_GET['pageNum_Market_News'])) {
  $pageNum_Market_News = $_GET['pageNum_Market_News'];
}
$startRow_Market_News = $pageNum_Market_News * $maxRows_Market_News;

mysql_select_db($database_mycon, $mycon);
$query_Market_News = "SELECT * FROM tab_news WHERE ch_new_state = 1 ORDER BY ch_new_date DESC";
$query_limit_Market_News = sprintf("%s LIMIT %d, %d", $query_Market_News, $startRow_Market_News, $maxRows_Market_News);
$Market_News = mysql_query($query_limit_Market_News, $mycon) or die(mysql_error());
$row_Market_News = mysql_fetch_assoc($Market_News);

if (isset($_GET['totalRows_Market_News'])) {
  $totalRows_Market_News = $_GET['totalRows_Market_News'];
} else {
  $all_Market_News = mysql_query($query_Market_News);
  $totalRows_Market_News = mysql_num_rows($all_Market_News);
}
$totalPages_Market_News = ceil($totalRows_Market_News/$maxRows_Market_News)-1;

mysql_select_db($database_mycon, $mycon);
$query_Content_news = "SELECT * FROM tab_news WHERE ch_new_state = 1 ORDER BY ch_new_date DESC";
$Content_news = mysql_query($query_Content_news, $mycon) or die(mysql_error());
$row_Content_news = mysql_fetch_assoc($Content_news);
$totalRows_Content_news = mysql_num_rows($Content_news);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Document sans titre</title>
<!-- TemplateEndEditable -->
<link href="../Styles/reset.css" rel="stylesheet" type="text/css">
<link href="../Styles/twoColFixLtHdr.css" rel="stylesheet" type="text/css">
<link href="../Styles/visuel_01.css" rel="stylesheet" type="text/css">
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>

<body>
<div class="container">
  <div class="header"><!-- end .header -->
    <h2>Phuc Khang Minh </h2>
    <ul class="language eng">
      <li><a href="#">English</a></li>
    </ul>
    <ul class="language fr">
      <li><a href="#">Français</a></li>
    </ul>
    <ul class="Main_menu">
      <li><a href="../HTML/eng/home.php">Home</a></li>
      <li><a href="../HTML/eng/about-us.php">About us</a></li>
      <li><a href="../HTML/eng/products.php">Products</a></li>
      <li><a href="../HTML/eng/contact-us.php">Contact</a></li>
    </ul>
    <ul class="Main-menu2">
      <li><a href="../HTML/eng/prices.php">Prices</a></li>
      <li><a href="../HTML/eng/market-news.php">Market news</a></li>
      <li><a href="../HTML/eng/Enquiry.php">Enquiry</a></li>
    </ul>
  </div>
  <div class="sidebar1">
    <ul class="nav">
      <ul id="MenuBar1" class="MenuBarVertical">
        <li><a class="MenuBarItemSubmenu" href="#">Rice</a>
          <ul>
            <li><a href="#">Crop information</a></li>
            <li><a href="#">Our Factory</a></li>
            <li><a href="#">White Rice</a></li>
            <li><a href="#">Jasmine Rice</a></li>
            <li><a href="#">Short Rice</a></li>
            <li><a href="#">Hom Mali Rice</a></li>
            <li><a href="#">Medium Rice</a></li>
            <li><a href="#">Round Rice</a></li>
            <li><a href="#">Brand / Packing</a></li>
            <li><a href="#">Price List</a></li>
          </ul>
        </li>
        <li><a class="MenuBarItemSubmenu" href="#">Coconut</a>
          <ul>
            <li><a href="#">Crop Information</a></li>
            <li><a href="#">Our Factory</a></li>
            <li><a href="#">Desiccated Coconut</a></li>
            <li><a href="#">Semi-Husked Coconut</a></li>
            <li><a href="#">Edible Copra</a></li>
            <li><a href="#">Coco Fiber</a></li>
            <li><a href="#">Coco Pith</a></li>
            <li><a href="#">Price List</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Pepper</a>
          <ul>
            <li><a href="#">Crop Information</a></li>
            <li><a href="#">Our Factory</a></li>
            <li><a href="#">White Pepper</a></li>
            <li><a href="#">Black Pepper</a></li>
            <li><a href="#">Price List</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Cashew Nuts</a>
          <ul>
            <li><a href="#">Crop Information</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Price List</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Coffee</a>
          <ul>
            <li><a href="#">Crop Information</a></li>
            <li><a href="#">Robusta </a></li>
            <li><a href="#">Arabica</a></li>
            <li><a href="#">Price List</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Star Anise</a>
          <ul>
            <li><a href="#">Crop Information</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Price List</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Tea</a>
          <ul>
            <li><a href="#">Crop Information</a></li>
            <li><a href="#">Black Tea</a></li>
            <li><a href="#">Green Tea</a></li>
            <li><a href="#">Price List</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Cassia</a>
          <ul>
            <li><a href="#">Crop Information</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Price List</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Furniture</a>
          <ul>
            <li><a href="#">General Information</a></li>
            <li><a href="#">Products</a></li>
          </ul>
        </li>
        <li><a href="#">Other Products</a></li>
      </ul>
    </ul>
    </li>
    <h2>Rice Price Table</h2>
    <table width="182" summary="">
      <caption>
      Rice Price Table
      </caption>
      <thead>
        <tr>
          <th height="25" colspan="3" scope="col">Date: ../../..</th>
        </tr>
        <tr>
          <th width="85" scope="col">Variety</th>
          <th width="45" scope="col">Broken</th>
          <th width="36" scope="col">Price (usd)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td height="20">White long grain</td>
          <td>5%</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td height="20">White long grain</td>
          <td>15%</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td height="20">White long grain</td>
          <td>25%</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td height="20">White long grain</td>
          <td>100%</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td height="20">Jasmine</td>
          <td>5%</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td height="20">Jasmine</td>
          <td>100%</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td height="20">Hom Mali</td>
          <td>5%</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td height="20">Short Grain</td>
          <td>5%</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td height="20">Medium Grain</td>
          <td>5%</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td height="20">Round Grain</td>
          <td>5%</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td height="20">Glutinous</td>
          <td>5%</td>
          <td>&nbsp;</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3"><p>- All prices are quoted per Metric Ton and FOB Ho Chi Minh City</p>
            <p>- Packing 50kg net in new PP bag</p>
            <p>- Minimum order: 2x 20ft FCL(25MT)</p>
            <p>More Information, <a href="../HTML/eng/prices.php">click here</a></p></td>
        </tr>
      </tfoot>
    </table>
    <h3>Latest Market News</h3>
    <ul class="News">
      <?php do { ?>
        <li>
          <h4><?php echo $row_Market_News['ch_new_title']; ?></h4>
          <p><?php echo $row_Market_News['ch_new_text']; ?><a href="<?php echo $row_Market_News['ch_new_link']; ?>" target="_blank">Read more...</a> .</p>
          <?php } while ($row_Market_News = mysql_fetch_assoc($Market_News)); ?>
      <h5>To check all news, <a href="../HTML/eng/market-news.php">click here...</a></h5>
      </li>
    </ul>
  </div>
  <div class="content">
    <h1><!-- TemplateBeginEditable name="page_title" -->Page Title<!-- TemplateEndEditable --></h1>
    <!-- TemplateBeginEditable name="page_content" -->
    <p>contenu de la page</p>
    <!-- TemplateEndEditable --> </div>
  <div class="footer">
    <div class="vcard">
      <div>
        <p class="org"><strong>PHUC KHANG MINH INTERNATIONAL COMPANY LTD</strong></p>
        <p class="street-address">No 72/24 Tran Dinh Xu Street</p>
        <p class="postal-code">Co Giang Ward - District 1</p>
        <p class="locality">Ho Chi Minh City -Viêtnam</p>
      </div>
    </div>
    <!-- end .footer --></div>
  <!-- end .container --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
<?php
mysql_free_result($Market_News);

mysql_free_result($Content_news);
?>

Et voici, les CSS concernées:

.header .Main_menu {
	background: url(../Pics/Barre%20menu%20principal.png) no-repeat 10px;
	margin: 68px 0px 0px;
	padding: 0px 0px 0px 261px;
	height: 42px;
	width: 925px;
	clear: both;
}
.header .Main_menu li a  {
	font: bold 1.2em Verdana, Geneva, sans-serif;
	text-decoration: none;
	float: left;
	height: 29px;
	width: 158px;
	text-align: center;
	margin: 0px 6px;
	padding: 12px 0px 0px;
	color: #FFF;

En espérant respecter correctement les règles de ce forum,
Merci d'avance de votre aide.
Modifié par Karl02 (22 Nov 2010 - 01:45)

Sujet clos

CSS et mise en forme, CSS3

Problème de float non alignés sous IE