Geek Answers Handbook

How can I get right alignment to work in a div inside a table cell for IE 7?

Float:right specified for a div inside a table cell does not seem to have any effect in IE. I also tried aligning the text, among other things, to align the contents of the layer to the right, but without success in IE 7.

CSS snippet:

 .workloadcell { background-color: #E6D7E9; padding: 0px; width: 14px; height: 16px; text-align: right; } div.workload { background-color: #E6D7E9; text-align: right; width: 14px; float: right; }

HTML snippet:

 <td class="workloadcell"> <div class="workload"> 1 </div> </td>

Both HTML and CSS are validated, and in Firefox, the text aligns to the right, as it should. If you want to test the full code by copying it / paste it here:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"> <title>Table Test</title> <style type="text/css"> td { border: 1px solid black; } .workloadcell { background-color: #E6D7E9; padding: 0px; width: 14px; height: 16px; text-align: right; } div.workload { background-color: #E6D7E9; text-align: right; width: 14px; float: right; } </style> </head> <body> <table> <tr> <td> &nbsp; </td> <td colspan="4"> <div> 2008 </div> </td> </tr> <tr> <td> &nbsp; </td> <td> <div> Q1 </div> </td> <td> <div> Q2 </div> </td> <td> <div> Q3 </div> </td> <td> <div> Q4 </div> </td> </tr> <tr> <td> workload forecast </td> <td class="workloadcell"> <div class="workload"> 1 </div> </td> <td class="workloadcell"> <div class="workload"> 2 </div> </td> <td class="workloadcell"> <div class="workload"> 2 </div> </td> <td class="workloadcell"> <div class="workload"> 2 </div> </td> </tr> <tr> <td> actual workload </td> <td class="workloadcell"> <div class="workload"> 3 </div> </td> <td class="workloadcell"> <div class="workload"> 3 </div> </td> <td class="workloadcell"> <div class="workload"> 2 </div> </td> <td class="workloadcell"> <div class="workload"> 3 </div> </td> </tr> </table> </body> </html>

(I know that CSS is not optimal in the sense that class declarations are repeated for multiple elements, but please do not comment on this if this is not the case.)

+4
source share
3 answers

It should work as it is (or the method that Alexei offers).

But, (this is IE), headers Q1, Q2, etc. push the table columns wider than the requested 14 px.

The column aligns correctly within the 14px you defined, but the divs don't move right in IE. (Div is within 14px defined for it, even if the column is actually wider than 14px)

To illustrate this, you can either make the width to say 28px or change the color of one of the backgrounds to show the difference between td and div inside inside.

 .workloadcell { background-color: #E6D7E9; padding: 0px; width: 14px; height: 16px; text-align: right; } div.workload { background-color: #E6EEE9; text-align: right; width: 14px; float: right; }

The solution for IE is to either not define the width or make it wide enough to accommodate the title.

+5
source

You do not need to declare rules for div.workload. Use only these rules and everything will work fine:

  td { border: 1px solid black; } .workloadcell { background-color: #E6D7E9; padding: 0px; width: 20px; height: 16px; text-align: right; }
+3
source

It is worth noting that IE, especially v6 on pre SP1 XP, and older windows have serious processing problems when you mix tables into divs and divs in these tables. When you exceed a certain complexity and nesting, you can get a blank / white page.

If you need to align textual content in specific cells, I would suggest adding an additional class declaration to the td tag, rather than a div attachment. I also suggest trying in IE8 and see if the problem goes away. You did not specify which versions you need for support.

+1
source

More articles:


All Articles