paragraphs inside table shift up with each subsequent row when using absolute positioning.
-
jeudi 2 août 2012 09:10
I have absolutely positioned tables and paragraph inside it. IE (all versions) shifts the cells contents up with each subsequent row. If you notice carefully, the text is slowly going up with each row. The last row is touching the border. This is easily visible with each subsequent row but I am posting only three rows to keep it clean. Below is a small code:
<!DOCTYPE html> <html> <head> <style type="text/css"> div.Page61989 {} .f1 {font-family:Arial;font-size:10.00pt;font-style:normal;font-weight:normal;line-height:114%;} p.normal, table.normal, div.normal {text-align:left; text-indent:0; margin- margin-right:0in; margin-bottom:0.0in; margin- clear:left;} </style> </head> <body> <div class="Page61989" style="height:1056px;width:816px;"> <table class="normal" style="border-spacing:0.00px;width:578.00px;border-collapse:collapse;border:1.00px solid #FF9900;"> <tr> <td style="height:31.000px;width:192.000px;;" > <p class="normal"><span class="f1" style=";" >This table has regular old</span><span class="f1" style=";" >square corners.</span></p> </td> <td style="height:31.000px;width:192.000px;border-" > <p class="normal"><span class="f1" style=";" >Cell 2 Row 1</span></p> </td> <td style="height:31.000px;width:192.000px;border-" > <p class="normal"><span class="f1" style=";" >Cell 3 Row 1</span></p> </td> </tr> <tr> <td style="height:31.000px;width:192.000px;border-" > <p class="normal"><span class="f1" style=";" >Cell 1 Row 2</span></p> </td> <td style="height:31.000px;width:192.000px;border-border-" > <p class="normal"><span class="f1" style=";" >Cell 2 Row 2</span></p> </td> <td style="height:31.000px;width:192.000px;border-border-" > <p class="normal"><span class="f1" style=";" >Cell 2 Row 3 This table has a</span><span class="f1" style=";" >square corner defined.</span></p> </td> </tr> <tr> <td style="height:31.000px;width:192.000px;border-" > <p class="normal"><span class="f1" style=";" >Added another row</span></p> </td> <td style="height:31.000px;width:192.000px;border-border-" > <p class="normal"><span class="f1" style=";" >added another row</span></p> </td> <td style="height:31.000px;width:192.000px;border-border-" > <p class="normal"><span class="f1" style=";" >added another row</span></p> </td> </tr> </table><br style="clear:left;"/> </div> </body> </html>I posted it in a wrong forum here: http://social.technet.microsoft.com/Forums/en-US/ieitprocurrentver/thread/9056ecbb-fd02-4759-91eb-41cd73ccac2c
I got a reply that IE applies some styles by default and I need to reset the CSS. I did that and it improved it a bit but still the problem is present. Any ideas why this is happening in IE only.
Thanks.
ns
- Modifié writetonsharma jeudi 2 août 2012 09:16
- Modifié writetonsharma jeudi 2 août 2012 09:21
Toutes les réponses
-
mercredi 8 août 2012 06:42Modérateur
Hi, I found there are some spelling errors in your markup, for example:
<td style="height:31.000px;width:192.000px;;" >
there are double ";",
<td style="height:31.000px;width:192.000px;border-" >
what's the attribute "border-"? Please modify your markup and then validate them on
http://validator.w3.org/ -
mercredi 8 août 2012 18:28
Thanks for the reply Allen.
I think that's a typo, sorry for that. It should be "border-top:1.00px solid #000000;". Also, double ";" also don't have any problems. I have checked it with correct markup and the result is the same. All other browsers show it correctly and the problem is with IE only.
ns
-
mercredi 8 août 2012 19:42
please post your corrected/validated markup... what html editing program are you using..... validate your markup at validator.w3.org
Rob^_^
get rid of this too
line-height:114%
general comment: there is too many style attributes in your page.... carefully examine your html editors settings and turn off any options for inserting style attributes to elements.
restart your design with a 'wire-frame' layout... just with the element tags and a class attribute.
<div class="normal">
<table class="normal"...............
and add your content to the table cells
then
add a <style type="text/css"> tag block in the head section
then
add your class style rules eg. div.normal{} table.normal{}
so that you can modify the class style rules in the one place.....
your markup should not have any inline stylerules (well there are times when you want inline rules) as style rules casscade and inline rules take precedence over external stylesheet and preceeding style block rules.
- Modifié doctoroftypeMVP mercredi 8 août 2012 19:55
-
jeudi 9 août 2012 05:38
Thanks Rob for the tips.
I changed the HTML and validated it with the validator. It gave no error's and passed the HTML for HTML5 with 2 warnings (HTML5 is experimental and UTF-8 can cause problems in old browsers). Still I see the same problems. Below is the changed HTML:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IE Test for table </title> <style type="text/css"> p.normal, table.normal, div.normal {text-align:left; text-indent:0; margin-top:0in; margin-right:0in; margin-bottom:0.0in; margin-left:0in; clear:left;} table, tr, th, td { margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align: baseline;} table.tbl1 {border-spacing:0.00px;width:578.00px;border-collapse:collapse;border:1.00px solid #FF9900;position:absolute;top:328.00px;left:120.00px;} td.normal {height:31.000px;width:192.000px;} td.topborder {border-top:1.00px solid #FF9900;} td.leftborder {border-left:1.00px solid #FF9900;} span.abspos {position:absolute;} </style> </head> <body> <table class="normal tbl1"> <tr> <td class="normal"> <p class="normal"><span class="f1 abspos" style=";top:0.00px;left:0.00px;" >This table has regular old</span><span class="f1 abspos" style="top:16.00px;left:0.00px;" >square corners.</span></p> </td> <td class="normal leftborder"> <p class="normal"><span class="f1 abspos" style="top:0.00px;left:192.00px;" >Cell 2 Row 1</span></p> </td> <td class="normal leftborder"> <p class="normal"><span class="f1 abspos" style="top:0.00px;left:384.00px;" >Cell 3 Row 1</span></p> </td> </tr> <tr> <td class="normal topborder"> <p class="normal"><span class="f1 abspos" style="top:31.00px;left:0.00px;" >Cell 1 Row 2</span></p> </td> <td class="normal topborder leftborder"> <p class="normal"><span class="f1 abspos" style="top:31.00px;left:192.00px;" >Cell 2 Row 2</span></p> </td> <td class="normal topborder leftborder"> <p class="normal"><span class="f1 abspos" style="top:31.00px;left:384.00px;" >Cell 2 Row 3 This table has a</span><span class="f1 abspos" style="top:375.00px;left:384.00px;" >square corner defined.</span></p> </td> </tr> <tr> <td class="normal topborder"> <p class="normal"><span class="f1 abspos" style="top:62.00px;left:0.00px;" >Added another row</span></p> </td> <td class="normal topborder leftborder"> <p class="normal"><span class="f1 abspos" style="top:62.00px;left:192.00px;" >added another row</span></p> </td> <td class="normal topborder leftborder"> <p class="normal"><span class="f1 abspos" style="top:62.00px;left:384.00px;" >added another row</span></p> </td> </tr> </table> </body> </html>
See how the text is getting close to the top borders with each row. Also, its surprising that it happens only in IE.
Thanks.
ns
-
jeudi 9 août 2012 20:54
no....
you still have double values for top etc.... top:320.00px in inline style rules....the validator does not validate css... html and css are not programming languages.... attributes and stylerules are all strings...
you are mixing measurements... in and px.... browsers have rounding errors in measurement conversions..... screens measure in px and resolution in DPI.
I don't see the link to your reset.css file? Configure your IE and other browsers to use the same default font-family and font-size.
how did those values get there? what html editor are you using?
I would suggest your have a look at http://www.w3schools.com and start with some basics about html editing.
Rob^_^
-
vendredi 10 août 2012 04:07
Thanks Rob for looking at it.
I removed the double values. I would use everything in pixels (at the moment I did it manually).
For the reset.css, I just added the tables part from the whole css (second line of styles) and I see this has improved it a lot. After doing these changes, I see the same output in IE.
For the HTML generation, its part of a software written by me ;-). This is part of a "custom statement" creation software which generates statements in many formats including HTML. The document structure can be highly complex which changes with each statement. Sorry, cannot tell you more details in the open forum. Hope you understand.
When a user create nested tables or text boxes, I cannot stop it because its not a website creation software. We allow everything what a user can think of and he can design the document at will and rest is taken care of. In this kind of scenario, absolute positions, block elements inside block elements other weird things becomes necessary. Hope this give you an idea of the generated HTML.
Below is the HTML changed according to your suggestions. please see if you can help me.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IE Test for table </title> <style type="text/css"> .f1 {font-family:Arial;font-size:10pt;font-style:normal;font-weight:normal;line-height:100%;} table, tr, th, td { margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align: baseline;} table.tbl1 {border-spacing:0;width:578px;border-collapse:collapse;border:1 solid #FF9900;position:absolute;top:328px;left:120px;} td.normal {height:31px;width:192px;} td.topborder {border-top:1px solid #FF9900;} td.leftborder {border-left:1px solid #FF9900;} span.abspos {position:absolute;} </style> </head> <body> <table class="normal tbl1"> <tr> <td class="normal"> <p class="normal"><span class="f1 abspos" style=";top:0px;left:0px;" >This table has regular old</span><span class="f1 abspos" style="top:16px;left:0px;" >square corners.</span></p> </td> <td class="normal leftborder"> <p class="normal"><span class="f1 abspos" style="top:0px;left:192px;" >Cell 2 Row 1</span></p> </td> <td class="normal leftborder"> <p class="normal"><span class="f1 abspos" style="top:0px;left:384px;" >Cell 3 Row 1</span></p> </td> </tr> <tr> <td class="normal topborder"> <p class="normal"><span class="f1 abspos" style="top:31px;left:0px;" >Cell 1 Row 2</span></p> </td> <td class="normal topborder leftborder"> <p class="normal"><span class="f1 abspos" style="top:31px;left:192px;" >Cell 2 Row 2</span></p> </td> <td class="normal topborder leftborder"> <p class="normal"><span class="f1 abspos" style="top:31px;left:384px;" >Cell 2 Row 3 This table has a</span><span class="f1 abspos" style="top:47px;left:384px;" >square corner defined.</span></p> </td> </tr> <tr> <td class="normal topborder"> <p class="normal"><span class="f1 abspos" style="top:62px;left:0px;" >Added another row</span></p> </td> <td class="normal topborder leftborder"> <p class="normal"><span class="f1 abspos" style="top:62px;left:192px;" >added another row</span></p> </td> <td class="normal topborder leftborder"> <p class="normal"><span class="f1 abspos" style="top:62px;left:384px;" >added another row</span></p> </td> </tr> </table> </body> </html>
Thanks.
ns
-
samedi 11 août 2012 19:07
well.... thats the problem.... your custom html editor....you are probably using a html edit control on a web page?
telerik html edit control? Jumla? http://www.telerik.com/products/aspnet-ajax/editor.aspx
and your target media is email?
for newsletters or any coustom content that is created inside a web html edit control you are using quirks syntax for your html content as there is no <head> block in the edit control innerHTML or in an eml file.
you use a template table and style blocks (or templates)....... not template documents or external stylesheets.
<style type="text/css">
td{text-align:left; vertical-align:top}
table{table-layout:fixed}
</style>
<table style=" width:960px;" align="center">
<tr><td......... important your first row of the table must contain empty td elements for each column in your table....</td></tr>
<tr><td></td>............</tr>
</table>
the important thing to note is that you are using non-standards markup (align attribute is depreciated), but web browsers and email clients will still honor depreciated attributes... where as a document with a strict dtd, viewed in a web browser will ignore depreciated attributes...the td style rules.... ensure that the default td style rules (text align:center and vertical-align:middle) are over-ridden.
the above design pattern with a html5 dtd will render the same in all browser versions and all email clients because of the align attribute.... the table-layout:fixed rule ensures that all table cells are rendered with the same width.
the design pattern is taken from the grid-960 fixed layout system and is sized (to 960px) to fit in the most common screen resolution (1024px)
all measurements are in px because printers use dpi (dots per inch) and the web browsers use 'shrink to fit' to zoom the layout and convert the page metrics to ins and feet.... what you see on a screen has nothing to do with what will be printed...the printer drivers take care of the conversion of screen metrics to the printers metrics.
equally you could remove the width rule for the table and use a liquid layout instead.... the table-layout fixed rule ensures that the table cells will be equally sized. You use the cols attribute to merge table cells to make table cells that span a number of cells. It is important that the first row of your table contain empty td elements so that the tables' columns count is established..
eg.
<tr><td></td><td></td><td></td></tr> (no content at all in the cells.... by default editors will place inside new table cells).
I highly recommend that you use the telerik control.... I don't think we can help you any further as you are not using a desktop editor that is conforming to w3c standards. (the w3c standards apply equally to html editors..... html is a markup language, not a programming language.... it is not pre-complied before it is sent to the browsers..... mistakes made in the html editor are mistakes that have to be corrected or rejected by the web browser)
there are plenty of examples of web sites that offer 'invoicing' services online.
if you are using a html edit control for your users to format their own custom invoices then the important thing to remember is that the editor control's output does not include a <head> block or a document type definition..... it is pure content.....
use templates to ensure that users use defined style rules.... replace the editors font controls as they use the depreciated <font> tag. Basicly the only content they should be able to change is their logo image and their NAD details and the NAD of the recipient.
Rob^_^
-
dimanche 12 août 2012 22:45
<style type="text/css">
td{text-align:left; vertical-align:top}
</style>
<table align="center" style="width:960px; table-layout:fixed"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table>
the <td></td> empty table cells is needed as the first row in the table to establish the cols value for the table... It will not appear in web browsers as they ignore empty elements.
use your html editor to merge table cells to form longer cells.... the table is using 12 columns for a width of 960 px... since 960/12=60 (there are no rounding errors) viz.... 12 is a factor of 960.
Rob^_^
- Modifié doctoroftypeMVP dimanche 12 août 2012 22:46
-
lundi 13 août 2012 11:54-----
- Modifié writetonsharma lundi 13 août 2012 12:04
- Modifié writetonsharma lundi 20 août 2012 16:23
-
lundi 13 août 2012 11:59
Found the solution.
IE doesn't count the border thickness into the row height. So if I say,
<td style="height:31.000px;width:192.000px;border: 1px solid;" >
IE will take 31 pixels as the height (space) and add 1 pixel (border) which will equal 32. Rest of the browsers include the width in the height which is 31. So as the rows increase the difference becomes more and more visible.
- Modifié writetonsharma lundi 20 août 2012 16:22
- Modifié writetonsharma lundi 20 août 2012 16:27
