bdotma Posted January 25, 2011 Share Posted January 25, 2011 Hi,This is my first post. I'm a self-taught beginner in HTML/CSS.I decided to declare a Doctype for my html page. But doing so disorients the table row heights & the CSS alignments that I declare for my tables in Internet Explorer. Without the Doctype, the table row heights & CSS alignments are fine. What are my solutions without having to remove a Doctype declaration? Thanks for reading!This is my code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><title> Daily Alerts</title><style type="text/css">div.center {text-align:center; padding-top:.125in; }div.inbetween { padding-top:.25in; padding-bottom:.25in; }table { border: 1px solid black; width:760px; text-align:center; padding-top:2in; }table.inside { width:670px; text-align:right; }tr.height{ height:5px; }td.top { width:670px; background-color:green; font-family:"Calibri"; }td.logo { width:335px; background-color:orange; font-family:"Calibri"; }td.date { width:335px; background-color:orange; font-family:"Calibri"; }td.bottom { width:670px; background-color:red; font-family:"Calibri"; text-align:center; }td.quotes { padding-left:.25in; text-align:left; }p { color:purple; font-family:"Calibri"; text-align:center; } p.top { color:purple; font-family:"Calibri"; text-align:center; }p.date { color:purple; font-family:"Calibri"; text-align:left; }p.quotes { color:purple; font-family:"Calibri"; text-align:right; }span.fontred { color:red; }</style></head> <body><div class="center"><table ><tr><td><div class="inbetween"><table class="inside"><tr class="height"><td class="top" colspan="2"> <p class="top">Top Box</p></td></tr><tr><td class="logo" ><p >Logo</p></td><td class="date"><p class ="date">Date</p></td></tr><tr class="height"><td class="bottom" colspan="2"><p>Bottom Box</p></td></tr><tr><td></td></tr><tr><td class="quotes"><p class="quotes">What's here?</p><p class="quotes">Quote1</p><p class="quotes">Quote2 <span class="fontred">Quote2</span> Quote2</p><p class="quotes">Quote3</p></td></tr></table></div></td></tr></table></div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted January 25, 2011 Share Posted January 25, 2011 2 html opening tags <html xmlns="http://www.w3.org/1999/xhtml"> and <html>no opening or closing body tag <body></body>closing of table at end wrong</td></tr></td></tr></table></table>should be</td></tr></table></td></tr></table>div tags are allowed in td cells, or outside of table only, and no where else within tablethese are the main reasons, your layout is going a bit awry.if you validate your html using http://validator.w3.org/ it should point out these errors Link to comment Share on other sites More sharing options...
bdotma Posted January 25, 2011 Author Share Posted January 25, 2011 Thanks for looking, I cleaned up the novice mistakes =). Still having issues though.Good: The left image is what shows in IE7+ without Doctype. I need this structure and style.Bad: The right image is what shows in IE7+ with Doctype. Notice the big gap above the green bar; that the green, orange, and red bar heights are much "taller" than the text; and that the tables are not center-aligned =(.Thanks for reading. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 26, 2011 Share Posted January 26, 2011 The problem maybe due to the fact that you are using a inch as a unit, it looks as though IE7 and below ignore this unit completely, whereas IE8+ and other browsers apply this unit. So the left is incorrect, whereas the right is exactly how it will look using a inch unit. I also think, depending on what your OS has set for DPI will affect the size of the elements padding/margin when using this unit. I would suggest using, either px (relative to screen resolution pixels), em (relative to font size used) or % (relative to screen size).To centre the table i would use margin: 0 auto; (for will block elements with fixed width only), instead of text-align; as text-align should be used for text (obviously), and inline elements (img, label, input etc) WITHIN a block element (table, div). Link to comment Share on other sites More sharing options...
bdotma Posted January 26, 2011 Author Share Posted January 26, 2011 Problem solved! Here's the fixed HTML. Thanks for your assistance. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><title> Daily Alerts</title><style type="text/css">body { text-align:center; padding-top:30px; }table.outside { margin: 0 auto; width:760px; padding-top:30px; padding-bottom:30px; border: 1px solid black; }table.inside { width:670px; text-align:center; margin: 0 auto; border: 1px solid black; padding-top:30px; padding-bottom:30px }tr.height{ height:10px; }td.top { width:670px; background-color:green; font-family:"Calibri"; height:10px; }td.logo { width:335px; background-color:orange; font-family:"Calibri"; }td.date { width:335px; background-color:orange; font-family:"Calibri"; }td.bottom { width:670px; background-color:red; font-family:"Calibri"; text-align:center; }td.quotes { padding-left:.25in; text-align:left; }p { margin:0in; margin-bottom:.0001pt; color:purple; font-family:"Calibri"; text-align:center; } p.top { color:purple; font-family:"Calibri"; text-align:center; }p.date { color:purple; font-family:"Calibri"; text-align:left; }p.quotes { color:purple; font-family:"Calibri"; text-align:right; }span.fontred { color:red; }</style></head> <body><table class="outside"><tr><td><table class="inside"><tr class="height"><td class="top" colspan="2"> <p class="top">Top Box</p></td></tr><tr><td class="logo" ><p >Logo</p></td><td class="date"><p class ="date">Date</p></td></tr><tr class="height"><td class="bottom" colspan="2"><p>Bottom Box</p></td></tr><tr><td></td></tr><tr><td class="quotes"><p class="quotes">What's here?</p><p class="quotes">Quote1</p><p class="quotes">Quote2 <span class="fontred">Quote2</span> Quote2</p><p class="quotes">Quote3</p></td></tr></table></td></tr></table></body></html> The huge bars were fixed with margin properties in CSS. Hope this will help others who have the same problem. p { margin:0in; margin-bottom:.0001pt; color:purple; font-family:"Calibri"; text-align:center; } Link to comment Share on other sites More sharing options...
ShadowMage Posted January 26, 2011 Share Posted January 26, 2011 FWIW, you have a lot of duplicated CSS. Take the following example:td.logo { width:335px; background-color:orange; font-family:"Calibri"; }td.date { width:335px; background-color:orange; font-family:"Calibri"; }Those two selectors apply the exact same rules. They can be combined into one, like so:td.logo, td.date { width:335px; background-color:orange; font-family:"Calibri"; } Link to comment Share on other sites More sharing options...
bdotma Posted January 26, 2011 Author Share Posted January 26, 2011 FWIW, you have a lot of duplicated CSS. Take the following example:td.logo { width:335px; background-color:orange; font-family:"Calibri"; }td.date { width:335px; background-color:orange; font-family:"Calibri"; }Those two selectors apply the exact same rules. They can be combined into one, like so:td.logo, td.date { width:335px; background-color:orange; font-family:"Calibri"; }Later on, I will be changing many of the properties of td.date and td.logo. Thanks for reading. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.