tags:

views:

63

answers:

1
Q: 

HTML DIVs not properly displaying

I have what I think is a reasonably simple HTML format to display some financial information. For some reason, jQuery (and, indeed, Firebug!) don't seem to update the visual display of the parent divs. This is a lot easier to see if you look at this in a browser.

I'm using the Bluetrip CSS framework.

Here's the HTML:

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

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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"&gt;&lt;/script&gt;

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

Here is the 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;
 }

If you look at this in Firebug (or Safari's inspect element), you'll see that the jQuery call is, in fact, changing the style of the #txn-41 div, but it's not changing in the browser.

Why isn't the #txn-41 div visible? The contents of it are visible, but I can't seem to apply effects to the parent!

Thanks for any assistance!

+6  A: 

It might be because all of its children divs are floated. Floating elements don't contribute to the height of their container (except in IE, I believe), so in your case, your #txn-41 div probably has a height of 0.

If you add a "clearing" div as the last child that should solve it (if this is in fact the problem):

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

There are also CSS methods which can do this automatically for you by adding content which clears the floats.

Here's a good article explaining the problem which also shows the CSS method for fixing it (no extra markup required). In short, add this to your #txn-41 div:

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

(or make it a class)

I just read in this Sitepoint article about several other methods for solving the problem, including the bizarrely simple method of merely declaring the outer containing div as having overflow: auto. Somehow, that works.

#txn-41 { overflow: auto; }
nickf  2009-09-30 00:02:10
Mighty, thanks! The :after did it, though the overflow did not.
Tim Sullivan  2009-09-30 00:25:36

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?