[Demonhood]

http://www.demonhood.com/testcss/

1) my boxes aren't expanding vertically to cover all of the content (only the paragraph expands it. this does, however, look ok in PC IE, strangely)

2) the boxes aren't properly spaced vertically from the top section in PC IE (shocking).

this is my first attempt at CSS for layout, btw.

[madmacgames]

A nice first attempt

what if for the text boxes with pics, you floated the text to the left, and cleared both left & right before you closed the border DIV? This would force the border around everything.

Something like this:
CSS:

Code:
/* float the statement DIV */
.statement {
font-size: 12px;
font-family: arial, verdana, helvetica, sans-serif;
color: #000;
text-align: left;
font-weight: normal;
padding-top: 8px;
float: left;
}

/* clear all floats */
.clearboth { clear: both; height: 1px; width: 100%; }
.clearboth hr { display: none; }

XHTML:

Code:
<div class="boxes"><img src="image.gif" alt="picture" class="pic" />
  <div class="name">CSS Universe Man - Republican</div>
  <div class="statement"><p>No statement was submitted.</p></div>
  <div class="clearboth"><hr /></div>
</div>

[Demonhood]

thanks.
i have made the changes you suggested to the fourth box on that page.
however, when i try to move the text over to the right of the image, it works in every browser except for PC IE. seems like i've traded one problem for another.

any more thoughts?
i wish i could forget PC IE altogether, but this layout will be viewed mostly be pc folk.

[madmacgames]

Originally posted by Demonhood:
thanks.
i have made the changes you suggested to the fourth box on that page.
however, when i try to move the text over to the right of the image, it works in every browser except for PC IE. seems like i've traded one problem for another.

any more thoughts?
i wish i could forget PC IE altogether, but this layout will be viewed mostly be pc folk.

OK sorry about that... the image & text below the image would need floated as well and both given widths (float the 2 beside each other). And you need to get rid of the margin in the floated statement DIV.

Also your top margin for the top box in IE is messing up because there are floats in the navBar and they aren't cleared. This is a problem with IE windows that if a child floats, the parent sometimes takes on the float property as well (even though it should not)... for this reason, it is always good to clear floats).

Like this: (I have tested this code in Safari and IE 6.. )..

CSS:

Code:
/* float the Image & subtitle */
.nameImage {
 float: left; 
 width: 170px;
}

/* float the statement */
.statementNew {
font-size: 12px;
font-family: arial, verdana, helvetica, sans-serif;
color: #000;
text-align: left;
font-weight: normal;
padding-top: 8px;
float: left;
width: 516px;
}

/* clear all floats */
.clearboth { clear: both; height: 1px; width: 100%; }
.clearboth hr { display: none; }

XHTML example:

Code:
<div align="center" id="navbox">
    <ul>
      <li><a href="1.shtml">1</a></li>
      <li><a href="2.shtml">2</a></li>
      <li><a href="3.shtml">3</a></li>
      <li><a href="4.shtml">4</a></li>
      <li><a href="5.shtml">5</a></li>
      <li><a href="6.shtml">6</a></li>
      <li><a href="7.shtml">7</a></li>
      <li><a href="8.shtml">8</a></li>
      <li><a href="9.shtml">9</a></li>
      <li><a href="10.shtml">10</a></li>
      <li><a href="11.shtml">11</a></li>
      <li><a href="all.shtml"><div id="yellow">{Everything}</div></a></li>
    </ul>
</div>

<!-- clear the menu for IE //-->
<div class="clearboth"><hr /></div>

<div class="boxesfirst"><h2>First Round!</h2>
  <div class="nameImage">
    <img src="image.gif" alt="picture" class="pic" />
    <div class="name">CSS Particle Man - Democrat</div>
  </div>
  <div class="statementNew"><p>I will lead this land into... etc etc etc</p>
  </div>
  <div class="clearboth"><hr /></div>
</div>

<div class="boxes">
  <div class="nameImage">
    <img src="image.gif" alt="picture" class="pic" />
    <div class="name">CSS Universe Man - Republican</div>
  </div>
  <div class="statementNew"><p>No statement was submitted.</p></div>
  <div class="clearboth"><hr /></div>
</div>

I hope that helps... I tested it and it fixed both problems in IE and looked good in Safari too...

[Demonhood]

that appears to work.
thanks a ton.

i hadn't quite comprehended the whole float property (nor 'clear') in my initial try at css layouts. this is a big help. it makes sense in the same way that table cells do (since i'm a hell of a lot more used to using tables for layout than css).

one day i'll get the hang of all this. and then i'll stop referring to css as 'indesign without the gui'

[Synotic]

Originally posted by Demonhood:
thanks.
i have made the changes you suggested to the fourth box on that page.
however, when i try to move the text over to the right of the image, it works in every browser except for PC IE. seems like i've traded one problem for another.

any more thoughts?
i wish i could forget PC IE altogether, but this layout will be viewed mostly be pc folk.

As you get more text, do you want the text to go underneath the image? i.e. do you want the text to wrap around the image? Or do you always want the text to be a fixed distance away from the left? I've dealt with this type of layout way too many times so if I know what you're trying to do I can probably help you out

[Demonhood]

i want the text to be a fixed distance from the image.
for curiosities sake, what changes would i make to make it wrap underneath once it got past the bottom of the image caption?

[Synotic]

Originally posted by Demonhood:
i want the text to be a fixed distance from the image.
for curiosities sake, what changes would i make to make it wrap underneath once it got past the bottom of the image caption?

Simply don't float the statement, then it should wrap.

Also, depending on who my target audience is, I try to avoid using explicit widths/heights. The reason being, if you use padding or borders in conjunction with a fixed width or height, you'll run into the infamous box model problem of IE 5. But if you're only dealing with IE 6 and mac users then it doesn't affect you. Also in this particular layout it doesn't really matter because you aren't using any padding or borders on anything you give an explicit width to anyways

Another piece of advice I would give is to try and avoid what Zeldman calls "divitis", which is unnecessarily using divs around everything.

For instance.. the following:

Code:
<div class="boxes">
  <div class="nameImage">
    <img src="image.gif" alt="picture" class="pic" />
    <div class="name">CSS Universe Man - Republican</div>
  </div>
  <div class="statementNew"><p>No statement was submitted.</p></div>
  <div class="clearboth"><hr /></div>
</div>

can easily be transformed to simply...

Code:
<div class="boxes">
<div class="img"><img src="image.gif" alt="picture" />CSS Universe Man - Republican</div>
<p>No statement was submitted.</p>
  <div class="clearboth"></div>
</div>

Using mostly descendant selectors. But for now it shouldn't matter much... it's already looking pretty good

P.S. i realize my post is jumping around a lot and sounds like crap.. i need a break