Bonjour,
J'ai le pb suivant, sur IE, mais pas Mozilla
J'ai un tableau contenu dans une div pour laquelle overflow=auto. Ce tableau contient une liste de liens. Lorsqu'on clique sur un des liens, je rappelle la page pour rafraichir une deuxieme zone de la page (typiquement le tableau est une liste de films, et quand je clique sur un film je veux que s'affiche des infos sur le film selectionne dans la deuxieme zone de la page).
Jusque la ok... mais quand je clique sur un lien, de temps en temps IE decale mon tableau vers le bas... jen'ai pas ce pb sous Mozilla... help please ?:)
voici le code CSS (pas propre je sais
, je debute)
Et le code de ma page
Merci d'avance pour tout aide que vous pourrez m'apporter
J'ai le pb suivant, sur IE, mais pas Mozilla
J'ai un tableau contenu dans une div pour laquelle overflow=auto. Ce tableau contient une liste de liens. Lorsqu'on clique sur un des liens, je rappelle la page pour rafraichir une deuxieme zone de la page (typiquement le tableau est une liste de films, et quand je clique sur un film je veux que s'affiche des infos sur le film selectionne dans la deuxieme zone de la page).
Jusque la ok... mais quand je clique sur un lien, de temps en temps IE decale mon tableau vers le bas... jen'ai pas ce pb sous Mozilla... help please ?:)
voici le code CSS (pas propre je sais
, je debute)
/***********************************************/
/* 2col_leftNav.css */
/* Use with template 2col_leftNav.html */
/***********************************************/
/***********************************************/
/* HTML tag styles */
/***********************************************/
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}
img {
border:none;
}
a:link, a:visited, a:hover {
color: #006699;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* overrides decoration from previous rule for hovered links */
h1, h2, h3, h4, h5, h6 {
font-family: Arial,sans-serif;
margin: 0px;
padding: 0px;
}
h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #334d55;
}
h2{
font-size: 114%;
color: #006699;
}
h3{
font-size: 100%;
color: #334d55;
}
h4{
font-size: 100%;
font-weight: normal;
color: #333333;
}
h5{
font-size: 100%;
color: #334d55;
}
ul{
list-style-type: square;
}
ul ul{
list-style-type: disc;
}
ul ul ul{
list-style-type: none;
}
label{
font: bold 100% Arial,sans-serif;
color: #334d55;
}
/***********************************************/
/* Layout Divs */
/***********************************************/
#masthead{
margin: 0;
padding: 10px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}
#navBar{
margin: 0 79% 0 0;
padding: 0px;
background-color: #eeeeee;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#content{
float:right;
width: 75%;
margin: 0;
padding: 0 3% 0 0;
}
/***********************************************/
/*Component Divs */
/***********************************************/
#siteName{
margin: 0px;
padding: 0px 0px 10px 10px;
}
/*************** #pageName styles **************/
#pageName{
padding: 0px 0px 10px 10px;
}
/************* #globalNav styles **************/
#globalNav{
color: #cccccc;
padding: 0px 0px 0px 10px;
white-space: nowrap;
}
/* 'nowrap' prevents links from line-wrapping if there are too many to fit in one line
this will force a horizontal scrollbar if there isn't enough room for all links
remove rule or change value to 'normal' if you want the links to line-wrap */
#globalNav img{
display: block;
}
#globalNav a {
font-size: 90%;
padding: 0px 4px 0px 0px;
}
/************* #breadCrumb styles *************/
#breadCrumb{
font-size: 80%;
padding: 5px 0px 5px 10px;
}
/************** .feature styles ***************/
.feature{
padding: 0px 10px 10px 10px;
font-size: 80%;
}
.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
}
.feature img{
float: left;
padding: 0px 10px 0px 0px;
margin: 0 5px 5px 0;
}
.movie{
padding: 0px 0px 10px 10px;
font-size: 80%;
height: 80%;
}
.movie h3{
padding: 30px 0px 5px 0px;
text-align: center;
}
.movie img{
float: left;
padding: 0px 10px 0px 0px;
margin: 0 5px 5px 0;
}
.movie_add
{
font-size: 80%;
}
.movie_summary
{
margin-right: 10px;
}
table {
border-style:solid;
border-width:1px;
border-color:#ccc;
border-collapse:collapse;
}
.td_gauche
{
padding-left:10px;
padding-top:5px;
}
.table_none {
border-style:none;
}
.cellule_titre {
border-style:solid;
border-width:1px;
border-color:#ccc;
border-right-color:#eeeeee;
background-color:#eeeeee;
}
.cellule_droit {
border-right-style:solid;
border-width:1px;
border-right-color:#ccc;
padding-left:10px;
}
.identification_divers
{
border-style:solid;
border-width:1px;
border-color:#ccc;
background-color:#eeeeee;
padding-top:10px;
padding-bottom:10px;
width:40%;
}
.identification_image
{
background-image:url(pictures/titreDVD.jpg);
padding-top:10px;
padding-bottom:10px;
width:40%;
background-position:center center;
background-repeat:no-repeat;
background-color:black;
}
.identification_adresse
{
border-style:solid;
border-width:1px;
border-color:#ccc;
background-color:#eeeeee;
padding-top:10px;
padding-bottom:10px;
text-align:right;
width:40%;
}
.table_identification
{
border-style:solid;
border-width:1px;
border-color:#ccc;
background-color:#eeeeee;
width:40%;
}
.collection_list
{
border-style:solid;
border-width:1px;
border-color:#ccc;
width:300px;
height:80%;
float:left;
margin-right:10px;
}
.collection_list ul {list-style: none;}
.collection_list li {border: none;}
.collection_overview
{
border-style:solid;
border-width:1px;
border-color:#ccc;
height:80%;
}
.collection_admin_list
{
border-style:solid;
border-width:1px;
border-color:#ccc;
width:400px;
height:80%;
float:left;
margin-right:10px;
}
.collection_admin_list ul {list-style: none;}
.collection_admin_list li {border: none;}
.collection_admin_overview
{
border-style:solid;
border-width:1px;
border-color:#ccc;
height:80%;
}
.admin_movie_form
{
border-style:solid;
border-width:1px;
border-color:#ccc;
width:50%;
height:50%;
float:left;
margin-right:10px;
}
.admin_movie_picture
{
border-style:solid;
border-width:1px;
border-color:#ccc;
height:50%;
}
.admin_customer_form
{
border-style:solid;
border-width:1px;
border-color:#ccc;
width:40%;
height:50%;
float:left;
margin-right:10px;
}
.admin_box_list
{
border-style:solid;
border-width:1px;
border-color:#ccc;
width:40%;
height:50%;
float:top;
margin-right:10px;
}
.admin_box_list ul {list-style: none;}
.admin_box_list li {border: none;}
.scroll_table
{
height:300px;
width:300px;
overflow:auto;
}
.scroll_table_collection_admin
{
height:300px;
width:400px;
overflow:auto;
}
.scroll_table_retours
{
height:300px;
width:600px;
overflow:auto;
}
.scroll_table_news
{
height:500px;
overflow:auto;
width:100%;
}
/* adjust margins to change separation between the feature image and text flowing around it */
/************** .story styles *****************/
.story{
clear: both;
padding: 10px 0px 0px 10px;
font-size: 80%;
}
.story p{
padding: 0px 0px 10px 0px;
}
/************* #siteInfo styles ***************/
#siteInfo{
clear: both;
border: 1px solid #cccccc;
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: -1px;
}
/* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with)
the bottom border of the navBar in cases where they "touch" */
#siteInfo img{
padding: 4px 4px 4px 0px;
vertical-align: middle;
}
/************* #search styles ***************/
#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}
#search form{
margin: 0px;
padding: 0px;
}
#search label{
display: block;
margin: 0px;
padding: 0px;
}
/*********** #navBar link styles ***********/
#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}
/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}
/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}
/*********** #sectionLinks styles ***********/
#sectionLinks{
margin: 0px;
padding: 0px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}
#sectionLinks h3{
padding: 10px 0px 2px 10px;
}
#sectionLinks a:link{
padding: 2px 0px 2px 20px;
border-top: 1px solid #cccccc;
width: 100%;
voice-family: "\"}\"";
voice-family:inherit;
width: auto;
}
#sectionLinks a:visited{
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 20px;
}
#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #dddddd;
padding: 2px 0px 2px 20px;
}
/*********** .relatedLinks styles ***********/
.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}
.relatedLinks h3{
padding: 10px 0px 2px 0px;
}
/************** #advert styles **************/
#advert{
padding: 10px 0px 0px 10px;
font-size: 80%;
border-top: 1px solid #cccccc;
}
#advert img{
display: block;
}
/************** #headlines styles **************/
#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
font-size: 80%;
}
#headlines p{
padding: 5px 0px 5px 0px;
}
Et le code de ma page
<?
session_start();
include ("db_mysql.inc.php");
include ("defs.inc.php");
// Connection
$connection = new DB_Sql("localhost", "movie", "root");
$connection->connect();
if(isset($_POST["add_movie"]))
{
$found = false;
if(isset($_SESSION['my_movies']))
{
for ($j=0; $j < count($_SESSION['my_movies']); $j++)
{
if( $_SESSION['my_movies'][$j]['id'] == $_POST["movie_id"])
{
$found = true;
$_SESSION['my_movies'][$j]['nb_movies'] = $_SESSION['my_movies'][$j]['nb_movies'] + $_POST["nb_movies"];
}
}
}
if(!$found)
{
$_SESSION['my_movies'][] = array ("id" => $_POST["movie_id"],"nb_movies" => $_POST["nb_movies"]);
}
?>
<SCRIPT language="Javascript">
alert ('Mise a jour du caddie effectuee');
</SCRIPT>
<?
}
if(isset($_GET["id"]))
{
$id=$_GET["id"];
}
elseif(isset($_POST["add_movie"]))
{
$id=$_POST["movie_id"];
}
// On va recuperer la liste exhaustive des films de la BD, et l'afficher sous forme de liste
// La page doit etre decoupee en deux parties : la liste textuelle, et un apercu du film selectionne
// Requete : recuperer les nouveautes
$get_movies = "SELECT * FROM movie ORDER BY MOVIE_TITLE";
$result = $connection->query($get_movies);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="2col_leftNav.css" type="text/css" />
<style type="text/css">
<!--
.Style2 {color: #cccccc}
.Style3 {color: #CCCCCC}
-->
</style>
</head>
<!-- The structure of this file is exactly the same as 2col_rightNav.html;
the only difference between the two is the stylesheet they use -->
<body>
<?
include ('onglets.html');
?>
<div id="content">
<div id="breadCrumb">
</div>
<h2 id="pageName">Collection</h2>
<div class="collection_list">
<div class="scroll_table">
<table class="table_none" width="99%" align="center">
<tr>
<td class="cellule_titre" width="100%" align="center">Titre</td>
</tr>
<?
for($i=0; $i<$connection->num_rows();$i++)
{
$connection->fetch_array();
if(!isset($id))
{
$id = $connection->a("MOVIE_ID");
}
?>
<tr>
<td class="td_gauche"><? echo "<a href=\"collection.php?id=".$connection->a("MOVIE_ID")."\">".$connection->a("MOVIE_TITLE")."</a>"; ?></td>
</tr>
<?
}
?>
</table>
</div>
</div>
<div class="collection_overview">
<div id="breadCrumb">
</div>
<div class="movie">
<?
$result = $connection->query("SELECT * FROM movie WHERE MOVIE_ID=".$id);
$connection->fetch_array();
?>
<h2 id="pageName"><?echo $connection->a("MOVIE_TITLE")." - ".$connection->a("MOVIE_SELLING_PRICE")."€"; ?></h2>
<?
echo "<a href=\"movie.php?movie_id=".$connection->a("MOVIE_ID")."\"><img width=\"114\" height=\"160\" src=\"pictures/".$connection->a("MOVIE_PICTURE")."\"></a>";
?>
<p><b>Resume</b></p>
<div class="movie_summary">
<p align="justify"><? echo $connection->a("MOVIE_SUMMARY"); ?></p>
<form method="post" action="collection.php">
<p>Ajouter <input type="text" name="nb_movies" size="2" /> exemplaire de <b><? echo $connection->a("MOVIE_TITLE"); ?></b> au panier <input type="submit" name="submit" value="Ajouter"></p>
<input type="hidden" name="movie_id" value="<? echo $id; ?>" />
<input type="hidden" name="add_movie" value="true" />
</form>
</div>
</div>
</div>
</div>
<!-- Menu -->
<? include ('menu.php'); ?>
<!-- Fin Menu -->
<!--end content -->
<div class="Style2" id="siteInfo"> <a href="#">La société </a> | <a href="#" class="Style2">Nous Contacter </a> | ©2005
Company Name </div>
<br/>
</body>
</html>
Merci d'avance pour tout aide que vous pourrez m'apporter
