Jump to content

HTML Doctype disorients CSS for my tables!


bdotma
 Share

Recommended Posts

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>

Edited by bdotma
Link to comment
Share on other sites

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

Thanks for looking, I cleaned up the novice mistakes =). Still having issues though.bad.jpgGood: 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.

Edited by bdotma
Link to comment
Share on other sites

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

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...