Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IE display problem 2

Status
Not open for further replies.
gwillr

gwillr

IS-IT--Management
Nov 4, 2003
267
CA
I am having trouble getting some table images to line up.


in Mozilla and Opera, the blue tile is perfectly formed.

In IE, however, on the right side, you will notice it is off by about a pixel or two.

What can be causing this, and how can I fix it, while keeping with xhtml validation?" Thanks for any feedback.

here is the code:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html>

<head>

	<!--Begin Meta Tag definitions-->

	<meta name="copyright" content="Copyright © 2003-2004 Gary Robar, All Rights Reserved"/>
	<meta name="classification" content="Personal"/>
	<meta name="revised" content="Gary Robar, 9/30/04"/>
	<meta name="revisit-after" content="15 Days"/>
	<meta name="author" content="Gary William Robar"/>
	<meta name="abstract" content="The personal website of Gary Robar, Halifax Nova Scotia Canada. Photosite, Music Pages, Computer Stuff, and other general areas of interest await."/>
	<meta name="description" content="The Personal Website Of Gary Robar"/>
	<meta name="keywords" content="gary robar, gary, robar, halifax, nova scotia, hammonds plains, park victoria, potato gun"/>
	<meta name="generator" content="Microsoft FrontPage 5.0"/>
	<meta name="ProgId" content="FrontPage.Editor.Document"/>
	<meta name="doc-type" content="White Paper"/>
	<meta name="GOOGLEBOT" content="index,follow"/>
	<meta name="MSSmartTagsPreventParsing" content="TRUE"/>
	<meta name="owner" content="Gary William Robaar"/>
	<meta name="ROBOTS" content="ALL"/>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
	<meta http-equiv="Content-Language" content="en-ca"/>
	<meta http-equiv="Content-Script-Type" content="text/javascript"/>
	<meta http-equiv="Content-Style-Type" content="text/css"/>
	<meta http-equiv="imagetoolbar" content="no"/>
	<meta http-equiv="PICS-Label" content='(PICS-1.1 "[URL unfurl="true"]http://vancouver-webpages.com/VWP1.0/"[/URL] l gen false comment "VWP1.0" by "Gary W Robar" on "2004.09.30T17:481700" for "[URL unfurl="true"]http://www.robarspages.ca/index.asp"[/URL] r (P 2 S 0 V 0 Com 1 Tol 1 Env 0 SF 0 Edu 0 Can -2 MC 0 Gam -1 ))'/>

	<!--End Meta Tag definitions-->


	<title>Robar's Pages - Start Page</title>

</head>
<body>

	<center>

	<!--Begin Table 1, 'Main'-->
	
	<table>

		<tr>
  		<td><img src="[URL unfurl="true"]http://www.robarspages.ca/images/splashhead3.gif"[/URL] alt="[Robar's Pages - Splash Page]"/></td>
		</tr>

		<tr>
		<td>
		<center>
			<table width="358">
	  			<tr>
      				<td width="445">
<table border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse" width="399">
      <tr>
        <td width="445" height="65" colspan="2">
        <img border="0" src="images/maint2.gif" alt=""/></td>
      </tr>
      <tr>
        <td height="78" width="222" bgcolor="#282484">
        <center>
        
            <a href="underc.asp">
        
            <img src="images/musica.gif" alt="[To Music Pages]" border="0"/></a>
        </center></td>
        <td height="78" width="222" bgcolor="#282484" align="center">
        <a href="Photosite/index.asp">
        <img src="images/photosite.gif" alt="[To Photosite]" border="0"/></a></td>
      </tr>
      <tr>
        <td height="24" width="222" bgcolor="#282484">
        &nbsp;</td>
        <td height="24" width="222" bgcolor="#282484">
        &nbsp;</td>
      </tr>
      <tr>
        <td height="120" width="222" bgcolor="#282484" align="center">
        <a href="underc.asp">
        <img src="images/comp.gif" alt="[To Computer Pages]" border="0"/></a></td>
        <td height="120" width="222" bgcolor="#282484" align="center">
        <a href="Photosite/admin/default.asp">
        <img src="images/admin.gif" alt="[To Administration]" border="0"/></a></td>
      </tr>
      <tr>
        <td height="31" width="445" bgcolor="#282484" colspan="2">
        <p align="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       
        <img src="images/cf.gif" alt="[Canadian Content]"/></p></td>
      </tr>
      <tr>
        <td height="32" width="445" bgcolor="#282484" colspan="2">
        <p align="center">
            <font face="Verdana" style="font-size: 10px" color="#C0C0C0">
            All content © 2004 Gary Robar unless otherwise noted.</font></p></td>
      </tr>
      <tr>
        <td width="445" colspan="2">
        <img src="images/mainb.gif" alt=""/> </td>
      </tr>
    </table>
   
                    </td>
	   			</tr>
			</table>
		</center>
		</td>

   		</tr>
   	
	</table>

	<!--End Table 1, 'Main'-->
	
	</center>

    <p>
      <a href="[URL unfurl="true"]http://validator.w3.org/check?uri=referer">[/URL]
      <img src="[URL unfurl="true"]http://www.robarspages.ca/images/w3c.gif"[/URL]
          alt="Valid XHTML 1.0!" height="31" width="88" border="0" /></a>
    </p>

</body>

</html>

Gary
 
Sort by date Sort by votes
Your images push the table in IE to be 446 instead of 445px. This is usually because of white-space in the code which is incorrectly handled by IE. I couldn't find a quick way to fix it with images but a solution that works would be:

1. remove your top and bottom graphics (<img> tags)
2. add the graphics as a cell background:
<td style="background: url(imgages/maint2.gif);"></td>
<td style="background: url(imgages/mainb.gif);"></td>
3. adjust td sizes so that the whole picture is visible:
<td height="83"> for the first
<td height="25"> for the second
widths should be ok, if you specify the width of the whole table correctly.

Hope it helps.
 
Upvote 0 Downvote
I've not had chance to look carefully at it.
But I have this problem regularly with 1 site I look after.
If it is as Vragabond says...

Remove new lines (in the code) from between <table>,<tr> and <td> tags.

Basically put all the table code on 1 line for each row. I know it's a pain but it works.

"I'm making time
 
Upvote 0 Downvote
Thanks for the great solutions. I have tried them both, and am now having another problem with it, that I can not figure out how to fix..take a look:


Here is the new code:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html>

<head>

	<!--Begin Meta Tag definitions-->

	<meta name="copyright" content="Copyright © 2003-2004 Gary Robar, All Rights Reserved"/>
	<meta name="classification" content="Personal"/>
	<meta name="revised" content="Gary Robar, 10/01/04"/>
	<meta name="revisit-after" content="15 Days"/>
	<meta name="author" content="Gary William Robar"/>
	<meta name="abstract" content="The personal website of Gary Robar, Halifax Nova Scotia Canada. Photosite, Music Pages, Computer Stuff, and other general areas of interest await."/>
	<meta name="description" content="The Personal Website Of Gary Robar"/>
	<meta name="keywords" content="gary robar, gary, robar, halifax, nova scotia, hammonds plains, park victoria, potato gun"/>
	<meta name="generator" content="Microsoft FrontPage 5.0"/>
	<meta name="ProgId" content="FrontPage.Editor.Document"/>
	<meta name="doc-type" content="White Paper"/>
	<meta name="GOOGLEBOT" content="index,follow"/>
	<meta name="MSSmartTagsPreventParsing" content="TRUE"/>
	<meta name="owner" content="Gary William Robaar"/>
	<meta name="ROBOTS" content="ALL"/>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
	<meta http-equiv="Content-Language" content="en-ca"/>
	<meta http-equiv="Content-Script-Type" content="text/javascript"/>
	<meta http-equiv="Content-Style-Type" content="text/css"/>
	<meta http-equiv="imagetoolbar" content="no"/>
	<meta http-equiv="PICS-Label" content='(PICS-1.1 "[URL unfurl="true"]http://vancouver-webpages.com/VWP1.0/"[/URL] l gen false comment "VWP1.0" by "Gary W Robar" on "2004.09.30T17:481700" for "[URL unfurl="true"]http://www.robarspages.ca/index.asp"[/URL] r (P 2 S 0 V 0 Com 1 Tol 1 Env 0 SF 0 Edu 0 Can -2 MC 0 Gam -1 ))'/>

	<!--End Meta Tag definitions-->


	<title>Robar's Pages - Start Page</title>

</head>
<body>

	<center>

	<!--Begin Table 1, 'Main'-->
	
	<table>

		<tr>
  		<td><img src="[URL unfurl="true"]http://www.robarspages.ca/images/splashhead3.gif"[/URL] alt="[Robar's Pages - Splash Page]"/></td>
		</tr>

		<tr>
		<td>
		<center>
			<table width="445">
	  			<tr>
      				<td width="445">
<table border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse" width="445">
      <tr><td height="83" style="background: url('images/maint2.gif');"></td></tr>
      <tr><td height="78" width="222" bgcolor="#282484"><center><a href="underc.asp"><img src="images/musica.gif" alt="[To Music Pages]" border="0"/></a></center></td><td height="78" width="222" bgcolor="#282484" align="center"><a href="Photosite/index.asp"><img src="images/photosite.gif" alt="[To Photosite]" border="0"/></a></td></tr>
      <tr><td height="24" width="222" bgcolor="#282484">&nbsp;</td><td height="24" width="222" bgcolor="#282484">&nbsp;</td></tr>
      <tr><td height="120" width="222" bgcolor="#282484" align="center"><a href="underc.asp"><img src="images/comp.gif" alt="[To Computer Pages]" border="0"/></a></td><td height="120" width="222" bgcolor="#282484" align="center"><a href="Photosite/admin/default.asp"><img src="images/admin.gif" alt="[To Administration]" border="0"/></a></td></tr>
      <tr><td height="31" width="445" bgcolor="#282484" colspan="2"><p align="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/cf.gif" alt="[Canadian Content]"/></p></td></tr>
      <tr><td height="32" width="445" bgcolor="#282484" colspan="2"><p align="center"><font face="Verdana" style="font-size: 10px" color="#C0C0C0">All content © 2004 Gary Robar unless otherwise noted.</font></p></td></tr>
      <tr><td height="25" style="background: url('images/mainb.gif');"></td></tr>
</table>
   
                    </td>
	   			</tr>
			</table>
		</center>
		</td>

   		</tr>
   	
	</table>

	<!--End Table 1, 'Main'-->
	
	</center>

    <p>
      <a href="[URL unfurl="true"]http://validator.w3.org/check?uri=referer">[/URL]
      <img src="[URL unfurl="true"]http://www.robarspages.ca/images/w3c.gif"[/URL]
          alt="Valid XHTML 1.0!" height="31" width="88" border="0" /></a>
    </p>

</body>

</html>

Gary
 
Upvote 0 Downvote
BINGO! Thanks for your valuable help! THe page displays well in IE, Moz, and Opera, AND validates properly.

I really appreciate your quick response, and correct solutions.

Gary
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
789
PeDa
PeDa
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
1K
spamjim
spamjim
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
700
PeDa
PeDa
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
189
pendle666
pendle666
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
269
jjgupta915
jjgupta915

Part and Inventory Search

Sponsor

Back
Top