XHTML - Simple splash appears different in firefox then ie.

2008-03-04

Hey guys,

I am mostly a designer and don't have alot of knowledge when it comes to code. Anyways. I whipped this up in dreamweaver and if you view this site in firefox you will see there is spacing between the sliced images which should not be there, however when viewed in ie it looks fine. Any ideas?

www.interactivesanctuary.com

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Interactive Sanctuary - Design Studios</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#141414" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Untitled-1) -->
<table width="328" height="443" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor="#000000" id="Table_01">
<tr>
		<td>
			<img src="images/index_01.gif" width="328" height="133" alt=""></td>
	</tr>
	<tr>
		<td><img src="images/index_02.gif" width="328" height="143" alt="" /></td>
</tr>
	<tr>
		<td>
			<img src="images/index_03.gif" width="328" height="89" alt="interactive sanctuary"></td>
	</tr>
	<tr>
		<td>
			<img src="images/index_04.gif" width="328" height="40" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/index_05.gif" width="328" height="38" alt="liam kerr"></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

Thank you.

What is life if not the pursuit of a Dream?

poppa · 2008-03-05 #2

Actually Firefox displays it correctly (Opera and Safari will also display it this way) it's MSIE that displays it wrong

The reason is that you are using the document type definition XHTML Strict (which you should) and that says that images should have this margin. The easiest way to get rid of the spacing is to set the "line height" to zero in elements where you don't want this spacing.

Of course you need to be careful since setting the line height to zero will have a major impact on text, but since you don't have any text in this page this code will be safe:

Code:

<html>
  <head>
    <style type="text/css">
    TD { line-height: 0 }
    </style>

    ...

  </head>
  <body>...</body>
</html>

And this will give you the desired result (I hope

)

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:


	Ultrashock Forums > Development > Client Side • XHTML - Simple splash appears different in firefox then ie.


		You are currently viewing our website as a guest which gives you limited access to forums, files and other resources. Click here to join now for free, and start interacting with our members, download files and much more! Click here if you are looking for our Flash files and other professional assets.

	poppa	2008-03-05 #2
	Actually Firefox displays it correctly (Opera and Safari will also display it this way) it's MSIE that displays it wrong The reason is that you are using the document type definition XHTML Strict (which you should) and that says that images should have this margin. The easiest way to get rid of the spacing is to set the "line height" to zero in elements where you don't want this spacing. Of course you need to be careful since setting the line height to zero will have a major impact on text, but since you don't have any text in this page this code will be safe: Code: <html> <head> <style type="text/css"> TD { line-height: 0 } </style> ... </head> <body>...</body> </html> And this will give you the desired result (I hope )