HTML DIVs ne s'affiche pas correctement

J'ai ce que je pense être un format HTML assez simple pour afficher des informations financières. Pour une raison quelconque, jQuery (et, en effet, Firebug!) Ne semble pas mettre à jour l'affichage visuel des divs parents. C'est beaucoup plus facile à voir si vous regardez cela dans un navigateur. J'utilise le cadre Bluetrip CSS.HTML DIVs ne s'affiche pas correctement

Voici le HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>test</title> 
<meta http-equiv="content-type" content="text/html; charset=us-ascii" /> 
<link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection" /> 
<!--[if IE]> 
      <link rel="stylesheet" href="ie.css" type="text/css" media="screen, projection" /> 
<![endif]--> 
<link rel="stylesheet" href="test.css" type="text/css" media="screen, projection" /> 
<link href="jquery.css" media="screen" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

<script> 
    $(function() { 
    $('#txn-41').css("background-color", 'yellow') 
    }); 
</script> 
</head> 

<body> 
<div class="container"> 
<div class="main span-19"> 
    <div class="span-19 push-1"> 
    <h2>Recently added</h2> 

    <div id="transaction-list"> 
     <div id="transactions"> 
     <div class="header"> 
      <div class="cell span-3"> 
      date 
      </div> 

      <div class="cell span-3"> 
      w/d 
      </div> 

      <div class="cell span-3"> 
      deposit 
      </div> 

      <div class="cell span-3"> 
      category 
      </div> 

      <div class="cell span-3"> 
      user 
      </div> 

      <div class="cell span-3"> 
      account 
      </div> 
     </div> 

     <div id="txn-41"> 
      <div class="cell date" title="Monday September 21, 2009"> 
      2009-09-29 
      </div> 

      <div class="cell wd"> 
      $2,233.00 
      </div> 

      <div class="cell deposit"> 
      &nbsp; 
      </div> 

      <div class="cell category"> 
      Entertainment 
      </div> 

      <div class="cell user"> 
      Tim 
      </div> 

      <div class="cell account"> 
      Checking 
      </div> 

     </div> 

     <div id="edit-txn-41" style="display: none; clear: both;"></div> 

     <div id="txn-40"> 
      <div class="cell date" title="Monday September 21, 2009"> 
      2009-09-29 
      </div> 

      <div class="cell wd"> 
      $5,555.00 
      </div> 

      <div class="cell deposit"> 
      &nbsp; 
      </div> 

      <div class="cell category"> 
      Groceries 
      </div> 

      <div class="cell user"> 
      Tim 
      </div> 

      <div class="cell account"> 
      Checking 
      </div> 

     </div> 

     <div id="edit-txn-40" style="display: none; clear: both;"></div> 

     <div id="txn-39"> 
      <div class="cell date" title="Monday September 21, 2009"> 
      2009-09-29 
      </div> 

      <div class="cell wd"> 
      $5,555.00 
      </div> 

      <div class="cell deposit"> 
      &nbsp; 
      </div> 

      <div class="cell category"> 
      Groceries 
      </div> 

      <div class="cell user"> 
      Tim 
      </div> 

      <div class="cell account"> 
      Checking 
      </div> 

     </div> 

     <div id="edit-txn-39" style="display: none; clear: both;"></div> 

     <div id="txn-38"> 
      <div class="cell date" title="Monday September 21, 2009"> 
      2009-09-29 
      </div> 

      <div class="cell wd"> 
      $123.00 
      </div> 

      <div class="cell deposit"> 
      &nbsp; 
      </div> 

      <div class="cell category"> 
      Groceries 
      </div> 

      <div class="cell user"> 
      Tim 
      </div> 

      <div class="cell account"> 
      Checking 
      </div> 
     </div> 

     <div id="edit-txn-38" style="display: none; clear: both;"></div> 

     <div id="txn-37"> 
      <div class="cell date" title="Monday September 21, 2009"> 
      2009-09-29 
      </div> 

      <div class="cell wd"> 
      $223.00 
      </div> 

      <div class="cell deposit"> 
      &nbsp; 
      </div> 

      <div class="cell category"> 
      Entertainment 
      </div> 

      <div class="cell user"> 
      Tim 
      </div> 

      <div class="cell account"> 
      Savings 
      </div> 

     </div> 

     <div id="edit-txn-37" style="display: none; clear: both;"></div> 

     <div id="txn-36"> 
      <div class="cell date" title="Monday September 21, 2009"> 
      2009-09-29 
      </div> 

      <div class="cell wd"> 
      $998.00 
      </div> 

      <div class="cell deposit"> 
      &nbsp; 
      </div> 

      <div class="cell category"> 
      Entertainment 
      </div> 

      <div class="cell user"> 
      Tim 
      </div> 

      <div class="cell account"> 
      Savings 
      </div> 

     </div> 

     <div id="edit-txn-36" style="display: none; clear: both;"></div> 

     <div id="txn-34"> 
      <div class="cell date" title="Monday September 21, 2009"> 
      2009-09-29 
      </div> 

      <div class="cell wd"> 
      $20.00 
      </div> 

      <div class="cell deposit"> 
      &nbsp; 
      </div> 

      <div class="cell category"> 
      Groceries 
      </div> 

      <div class="cell user"> 
      Tim 
      </div> 

      <div class="cell account"> 
      Checking 
      </div> 

     </div> 

     <div id="edit-txn-34" style="display: none; clear: both;"></div> 
     </div> 
    </div> 
    </div> 
</div> 

<div class="sidebar span-5 last"></div> 
</div> 
</body> 
</html>

Voici le CSS:

/* @override http://localhost:3000/stylesheets/dough.css */ 

    body { 
     background-color: #E5E5E5; 
    } 

    .main, .sidebar { 
     background-color: white; 
     padding-top: 8px; 
    } 

    .clear { 
     clear: both; 
    } 

    .txn { 
     clear: both; 
    } 

    .cell { 
     float:left; 
     margin-right: 10px; 
     font-size: 14px; 
    } 

    .cell.date { 
     width: 110px; 
    } 

    .cell.wd { 
     width: 110px; 
     text-align: right; 
    } 

    .cell.deposit { 
     width: 110px; 
     text-align: right; 
    } 

    .cell.category { 
     width: 110px; 
    } 

    .cell.user { 
     width: 110px; 
    } 

    .cell.account { 
     width: 110px; 
    }

Si vous regardez cela dans Firebug (ou élément inspectent de Safari), vous verrez que l'appel jQuery est , en fait, changer le style de la div # txn-41, mais cela ne change pas dans le navigateur.

Pourquoi la div # txn-41 n'est-elle pas visible? Le contenu de celui-ci est visible, mais je n'arrive pas à appliquer des effets au parent!

Merci pour toute aide!

Source

2009-09-29 Tim Sullivan

C'est peut-être parce que tous ses divs enfants sont flottants. Les éléments flottants ne contribuent pas à la hauteur de leur conteneur (sauf dans IE, je crois), donc dans votre cas, votre div #txn-41 a probablement une hauteur de 0.

Si vous ajoutez un "clearing" div comme le dernier enfant qui devrait le résoudre (si cela est en fait le problème):

<div style="clear: both"></div>

il existe aussi des méthodes CSS qui peut le faire automatiquement pour vous en ajoutant du contenu qui efface les flotteurs.

Here's a good article explaining the problem qui montre également la méthode CSS pour la réparer (aucun balisage supplémentaire requis). En bref, ajoutez à votre #txn-41 div:

#txn-41:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}

(ou en faire une classe)

Je viens de lire dans this Sitepoint article à propos de plusieurs autres méthodes pour résoudre le problème, y compris la méthode bizarrement simple, de simplement déclarer le div contenant externe comme ayant overflow: auto. D'une certaine manière, cela fonctionne.

#txn-41 { overflow: auto; }

Source

2009-09-30 00:02:10 nickf

Puissant, merci! Le: après l'a fait, même si le débordement n'a pas. –

HTML DIVs ne s'affiche pas correctement

Répondre

Questions connexes