ansaurus

Question

CSS Div Width Problem - Lining divs... widths seem to be off in IE7

Answer 1

A:

Did you put cellspacing="0" cellpadding="0" on the table? If not, that might be where the difference is coming from. Or maybe border.

Can you include the table header?

ANeves 2010-03-22 19:06:59

Added it to the overall post above. Cellpadding is 4, but making it zero doesn't make a difference. No border.

jlrolin 2010-03-22 19:12:29

Answer 2

A:

Width: 100% on the table overrides individual column widths. In your table, there are 13 <th>, and each will have a width of 1/13:th of the table's width. A width property on a <th> doesn't do anything. You could force it by adding display: inline-block to the <th>, but I wouldn't want to go that way.

Also, you should set the pink and green divs to float: right in order to remove the white inbetween green and blue (note however that you'll have to change the order of the divs in your code).

Also, I'd suggest using a table instead if you're aiming to present tabular data.

nemetroid 2010-03-22 19:18:13

Floating all the DIVs right with the exception of my NAME div at least lines them up... but why are the pixel widths of those boxes so unbelievably off from the header cells when they are the same widths?

jlrolin 2010-03-22 19:24:22

Expanded my answer to explain why the width's aren't the same.

nemetroid 2010-03-22 19:34:38

Learn something new everyday... hmmmm.

jlrolin 2010-03-22 19:36:06

@jlrolin: the `width: 100%` on the table is stretching the ths/tds proportionally to make them total the table's width. So, almost as nemetroid said: they keep their relative width, but stretch to fill the whole width of the table. You can get the same effect if you use percent for the child-div widths, instead of a pixel value - then they'll stretch.

ANeves 2010-03-23 13:47:28

@jlrolin: but it seems you want to present tabular data - if so, I second nemetroid's suggestion to keep with tables.

ANeves 2010-03-23 13:48:37

Answer 3

A:

You can use instead of divs the colspan="[number]", for example:

<table cellspacing="0" cellpadding="4" border="0" style="border-width:0px;width:100%;border-collapse:collapse;font-size:12px;">
<tr>
     <td colspan="6"></td>
     <td align="center" colspan="3" style="background-color:#F0D3D3;text-decoration:underline;">SET</td>
     <td colspan="2" style="background-color:#CFF5CE;"></td>
     <td align="center" colspan="3" style="background-color:#BEE0F7;text-decoration:underline;">REM</td>
</tr>
<tr>
     <th style="width:70px;">M</th>
     <th style="width:70px;">PG</th>
     <th style="width:70px;">PV</th>
     <th style="width:70px;">PDD</th>
     <th style="width:40px;">R</th>
     <th style="width:55px;">I #</th>
     <th style="background-color:#F0D3D3;width:70px;">P A</th>
     <th style="background-color:#F0D3D3;width:70px;">U D</th>
     <th style="background-color:#F0D3D3;width:70px;">B P</th>
     <th style="background-color:#CFF5CE;width:70px;">P U</th>
     <th style="background-color:#CFF5CE;width:70px;">D E</th>
     <th style="background-color:#BEE0F7;width:70px;">P</th>
     <th style="background-color:#BEE0F7;width:70px;">U D</th>
     <th style="background-color:#BEE0F7;width:70px;">B P</th>
</tr>
<tr>
     <td colspan="6">
          <img onclick="change(this.parent);" src="minus99.jpg" style="border-width:0px;" />
          <span style="font-weight:bold;font-size:16px;">Test Company</span>
     </td>
     <td colspan="3" style="background-color:#F0D3D3;"></td>
     <td colspan="2" style="background-color:#CFF5CE;"></td>
     <td colspan="3" style="background-color:#BEE0F7;"></td>
</tr> 
</table>

Hoped i helped you.. =)

SlavikMe 2010-03-22 19:24:53

Understood, but we want to try to use DIVs as a CSS layout only. I will likely need to adapt the actual table and headers to CSS later as well.

jlrolin 2010-03-22 19:27:13

ansaurus

tags:

views:

answers:

CSS Div Width Problem - Lining divs... widths seem to be off in IE7

related questions