How do I get the same space between html tables in Firefox and IE?

**drhowarddrfine** · Mar 23 '10, 03:28 AM

Not sure what you mean. They both look pushed off to the side. But you will never get IE to attempt to perform like other far more modern browsers without a doctype. Add this to your first line:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Normally I would never recommend the transitional doctype but you are using old, deprecated markup from the 1990s and it will never validate with the proper 'strict' one.

After that, validate your html and css for those lists of errors.

**lesterhawkins** · Mar 24 '10, 01:31 AM

Thank you for the reply. I should have clarified that by "the space between the tables" I meant the approximately quarter inch of space that each table was supposed to be below the table above it I also should have clarified that I aligned the 3rd table on the right side on purpose, but in IE it goes right off the page, without putting the 3rd table a quarter of an inch below the 2nd table.

I created a new web page - http://www.doug-long.com/btest.htm - and put in the code you suggested in the first line. I tried the code like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

and also like this, without the ! comment code:

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

but it still came out the same as before, with IE giving no space between the 2nd and 3rd tables and pushing the 3rd table off the page to the right.

You're right about my code being from the 1990s. Is there some more recent HTML code or CSS code I should be using to get the proper spacing between my tables?

Thanks again.

**drhowarddrfine** · Mar 24 '10, 02:55 AM

You're not allowed to be creative with doctypes and it must be entered exactly as I show it. Without one, browsers go into "quirks mode" and that's a bad thing.

You're right about my code being from the 1990s. Is there some more recent HTML code or CSS code I should be using to get the proper spacing between my tables?

You shouldn't be using tables to layout web pages at all unless there's much more to this than you show. Here's something I wrote that does exactly the same thing as yours but with much less markup:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>A Test Table Site</title> 
<meta http-equiv="content-type" content="text/html;charset=utf-8"> 
<style type="text/css"> 
body { background-image: url(http://www.doug-long.com/backblue.jpg) }
h1 { text-align:center }
h2 { text-align:center }
 
p { 
	width:80%;
	padding:1em;
	border:8px #ccc outset;
	background-color: #FEFFDC;
}
 
#one { margin:0 auto; color:blue }
#two { color:green }
#three { margin-left:auto; color:red}
</style> 
 
</head> 
<body> 
 
<h1>Chapter 1</h1> 
<h2>Introduction to the Chapter</h2> 
 
<p id="one">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
 
<p id="two">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p> 
 
<p id="three">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p> 
</body> 
</html>

**lesterhawkins** · Mar 24 '10, 09:32 PM

Your code solution worked - thanks much. I can see where I need to learn CSS, which is new to me. I'll see if I can find a good book on it, to read before I continue coding web pages.

How do I get the same space between html tables in Firefox and IE?

How do I get the same space between html tables in Firefox and IE?

Comment

Comment

Comment

Comment