Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

table layout has gap between row element in Firefox

Posted on 2008-11-15
7
Medium Priority
?
1,033 Views
Last Modified: 2013-12-07
Hi, experts:
I use table to layout my web design. The result in IE is what I want, but the result in Firefox is unexpected. There is a gap between the first row and second row in Firefox, what should I do?
<!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=big5">
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<title>Studio</title>
	</head>
<body>
 
<div align="center">
	<table border="0" width="916" id="table1" cellpadding="0" bgcolor="#FFFFFF" style="border-collapse: collapse">
		<tr>
			<td width="33">
			<img border="0" src="images/left_bg.png" width="33" height="348"></td>
			<td width="850"></td>
			<td width="33">
			<img border="0" src="images/right_bg.png" width="33" height="348"></td>
		</tr>
		<tr>
			<td width="33" valign="top" background="images/lbg.png" align="right"></td>
			<td width="850" valign="top">
			<p><p><p><p><p></td>
			<td width="33" valign="top" background="images/rbg.png" align="left"></td>
		</tr>
	</table>
</div>
 
</body>
 
</html>
 
 
style.css
 
body {
	margin: 0px;
	background-image: url(../images/bg.gif);
	background-repeat: repeat-x;
}

Open in new window

gap.JPG
0
Comment
Question by:TKD
  • 3
  • 2
  • 2
7 Comments
 
LVL 7

Accepted Solution

by:
aherps earned 120 total points
ID: 22969663
Hi,

In your style sheet, add the following:

table {
  border-collapse: separate;
  border-spacing: 0;
  *border-collapse: collapse; /* hack is needed for IE7 also */
}

Than you can remove the style parameter from your <table> tag.

border-collapse: collapse; is only recognised by IE. All others will use border-collapse: seperate; border-spacing: 0;
0
 
LVL 43

Expert Comment

by:David S.
ID: 22969950
@aherps

Why not just give all browsers border-collapse:collapse?
0
 
LVL 7

Expert Comment

by:aherps
ID: 22970053
because border-collapse isn't respected by all browsers
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:TKD
ID: 22970376
The result is the same in FireFox.

<!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=big5">
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<title>Studio</title>
	</head>
<body>
 
<div align="center">
	<table border="0" width="916" cellpadding="0" bgcolor="#FFFFFF">
		<tr>
			<td width="33">
			<img border="0" src="images/left_bg.png" width="33" height="348"></td>
			<td width="850"></td>
			<td width="33">
			<img border="0" src="images/right_bg.png" width="33" height="348"></td>
		</tr>
		<tr>
			<td width="33" valign="top" background="images/lbg.png" align="right"></td>
			<td width="850" valign="top"><br></td>
			<td width="33" valign="top" background="images/rbg.png" align="left"></td>
		</tr>
	</table>
</div>
 
</body>
 
</html>
 
 
body {
	margin: 0px;
	background-image: url(../images/bg.gif);
	background-repeat: repeat-x;
}
 
table {
	border-collapse: separate;
	border-spacing: 0;
  	*border-collapse: collapse; /* hack is needed for IE7 also */
}

Open in new window

0
 

Author Comment

by:TKD
ID: 22970403
I find where the problem is.

I change
<!doctype html public "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Open in new window

to

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The problem is solved.


0
 

Author Closing Comment

by:TKD
ID: 31517203
Excellent
0
 
LVL 43

Expert Comment

by:David S.
ID: 22971626
@TKD

These explain why that change fixed it and the two better solutions:
http://gtwebdev.com/workshop/gaps/image-gap.php
http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps

@aherps

So among the browsers that don't support it, which ones are new enough for you to care about?
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question