[SOLVED] A problem with internet explorer...again

sushi4664 · #1 (**permalink**) 04-18-08, 05:59 PM

I am redesigning a website and i have temporarily put it up on my server:

http://ayushsood.com/test/napkinz/home/

when you look at it through firefox everything works...

yet in internet explorer some of the images separate...

it is probably something stupid that i missed....any ideas?

Thanks a lot!!!!

-Ayush Sood

job0107 · #2 (**permalink**) 04-18-08, 08:26 PM

The problem you are having is very simple. And it always happens in IE.

IE sees whitespace in certain things when it shouldn't. And one of the most common problems is with tables.

An good example would be in your code where you are displaying top_img.png and bottom_img.png.

This is your code:

HTML Code:

<table border="0" cellpadding="0" cellspacing="0" height="11" width="920">    
        <tbody>
            <tr>
                <td>
                    <img src="images/top_img.png" border="0" height="11" />
                </td>
            </tr>
        </tbody>
    </table>

<table border="0" cellpadding="0" cellspacing="0" width="920">
            <tbody>
                <tr>
                    <td>
                        <img src="images/bottom_img.png"  />
                    </td>
                </tr>
            </tbody>
    </table>

As you can see, all the images are inside <td></td>. And you are using three lines to create the images.

HTML Code:

<td>
       <img src="images/top_img.png" border="0" height="11" />
</td>

<td>
       <img src="images/bottom_img.png"  />
</td>

When you program this way, you are leaving spaces in your code. And IE interprets these spaces as whitespace and creates a whitespace.

The proper way to program for IE, is to get rid of the spaces, so IE won't create a whitespace.
Like this:

HTML Code:

<table border="0" cellpadding="0" cellspacing="0" height="11" width="920">    
        <tbody>
            <tr>
                <td><img src="images/top_img.png" border="0" height="11" /></td>
            </tr>
        </tbody>
    </table>

<table border="0" cellpadding="0" cellspacing="0" width="920">
            <tbody>
                <tr>
                    <td><img src="images/bottom_img.png"  /></td>
                </tr>
            </tbody>
    </table>

You need to go through your code and put all your <td></td>'s on one line with no spaces.
Using multiple lines or leaving spaces, creates whitespace in IE.

This way of coding will also leave whitespaces:

HTML Code:

<table border="0" cellpadding="0" cellspacing="0" height="11" width="920">
 <tbody>
  <tr>
   <td> <img src="images/top_img.png" border="0" height="11" /> </td>
  </tr>
 </tbody>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="920">
 <tbody>
  <tr>
   <td> <img src="images/bottom_img.png"  /> </td>
  </tr>
 </tbody>
</table>

You see how I have left spaces between the <td> <img> </td> elements.
This creates whitespaces in IE.
This way will get rid of them: <td><img></td>.

sushi4664 · #3 (**permalink**) 04-19-08, 09:56 AM

Sweet!!! it fixed it!

One more question. Now that the space is gone, I am noticing a small space in the navigation bar in Internet Explorer. In the navigation bar, the "Home" button does not line up with the rest of the site on its left side. There is a small gap right there. Is that because of some gap issue too?

job0107 · #4 (**permalink**) 04-20-08, 09:32 PM

I combined the links and images from the first table,
together in one <td></td> and put them in the second table.
Then I eliminated the first table.

Then I created a class in the style section called mr.
And I use that class in the image elements to give the spacing.
You can adjust this value to change the spacing.
Or you could give each image it's own class if you want custom spacing.

Try it like this:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>NAPKINZ - HOME - Now Every Monday and Friday</title>
<meta name="verify-v1" content="oiYH+uqjBdcLpcIDoYAWIRwWkiKf/naNgQjlT6rFvkg=" />
<meta name="resource-type" content="document" />
<meta name="Generator" content="napkinzc Tag Generator" />
<meta name="revisit-after" content="5" />
<meta name="classification" content="Entertainment" />
<meta name="description" content="A funny web comic created by Yanni Davros" />
<meta name="keywords" content="napkinz, napkins, napkin, cartoon, comic, funny, yanni, davros, yanni davros, art" />
<meta name="rating" content="General" />
<meta name="copyright" content="2007" />
<link rel="icon" href="images/faveico.png" />
<meta name="author" content="Ayush Sood" />
<meta http-equiv="reply-to" content="napkinz@napkinz.com" />
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="alternate" type="application/rss+xml" title="The Official Napkinz Feed" href="http://napkinz.com/rss.php" />
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
.mr{margin-right:8px;} /* Adjust for navigation menu spacing */
</style>    
<script type="text/javascript" src="js/swap.js"></script>
</head>
<body>
<br /><br />
<div align="center">
 <!--header-->
 <table border="0" cellpadding="0" cellspacing="0" height="35" width="920">    
  <tbody>
   <tr>
    <td align="left"><a href="http://www.napkinz.com/index.php"><img class="mr" src="images/home_normal.png" alt="Home" name="home" border="0" onmouseover="this.src='images/home_over.png'" onmouseout="this.src='images/home_normal.png'"></a><a href="http://www.napkinz.com/shop.php"><img class="mr" src="images/store_normal.png" alt="Store" name="store" border="0" onmouseover="this.src='images/store_over.png'" onmouseout="this.src='images/store_normal.png'"></a><a href="http://www.napkinz.com/archive.php"><img class="mr" src="images/archive_normal.png" alt="Archive" name="archive" border="0" onmouseover="this.src='images/archive_over.png'" onmouseout="this.src='images/archive_normal.png'"></a><a href="http://www.napkinz.com/cast.php"><img class="mr" src="images/cast_normal.png" alt="Cast" name="cast" border="0" onmouseover="this.src='images/cast_over.png'" onmouseout="this.src='images/cast_normal.png'"></a><a href="http://www.napkinz.com/napkinz.php"><img class="mr" src="images/napkinz_normal.png" alt="About Napkinz" name="napkinz" border="0" onmouseover="this.src='images/napkinz_over.png'" onmouseout="this.src='images/napkinz_normal.png'"></a><a href="http://www.napkinz.com/about.php"><img class="mr" src="images/about_normal.png" alt="About the Cartoonist" name="about" border="0" onmouseover="this.src='images/about_over.png'" onmouseout="this.src='images/about_normal.png'"></a><a href="http://www.napkinz.com/contact.php"><img class="mr" src="images/email_normal.png" alt="Email Us" name="contact" border="0" onmouseover="this.src='images/email_over.png'" onmouseout="this.src='images/email_normal.png'"></a><img src="images/spacer_menu.png" border="0" /></td>
   </tr>
   <tr>
    <td><img src="images/top_img.png" border="0" height="11" /></td>
   </tr>
  </tbody>
 </table>
 <!--header-->    
 <table border="0" cellpadding="0" cellspacing="0" width="920">
  <tbody>
    <tr>
     <td bgcolor="#000000" valign="top" width="720"><a href="http://www.napkinz.com/index.php"><img src="images/logo.jpg" border="0" align="texttop" style="padding:20px 0 15px 100px;" /></a>
     <br>
      <table class="newmenus" bgcolor="#000000" width="100%">
        <tbody>
         <tr>
          <td><div align="center" style="padding-bottom:7px;"><a href="?strip_id=0" class="nav" #000;>First Comic</a>&nbsp;&nbsp;&nbsp;<a href="?strip_id=3" class="nav">Previous Comic</a></div></td>
         </tr>
        </tbody>
      </table>    
      <div align="center"><img src="archive/080321.gif" border="0" alt="Comic" align="middle"><br></div>
      <table class="newmenus" bgcolor="#000000" width="100%">
        <tbody>
         <tr>
          <td><div align="center"><a href="?strip_id=0" class="nav" #000;>First Comic</a>&nbsp;&nbsp;&nbsp;<a href="?strip_id=3" class="nav">Previous Comic</a></div></td>
         </tr>
        </tbody>
      </table>
     </td>
    <!--RIGHT HAND COLUMN-->
     <td bgcolor="#000000" valign="top" width="200" style="padding:31px 7px 0 3px;">
      <div>
       <b class="spiffy">
        <b class="spiffy1"><b></b></b>
        <b class="spiffy2"><b></b></b>
        <b class="spiffy3"></b>
        <b class="spiffy4"></b>
        <b class="spiffy5"></b>
       </b>
        <div class="spiffyfg">
         <br /><br />
       <form name="search" action="http://www.ohnorobot.com/index.pl">            
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
           <tr>
            <td align="left"><span class="style2">Search Napkinz:</span></td>
           </tr>
           <tr>
            <td width="76%" align="left" valign="top"><input type="hidden" name="comic" value="723"><input name="s" class="f1"></td>
            <td width="24%" align="center" valign="middle"><a href="#"><img src="images/subscribe.gif" alt="go" height="17" width="17" border="0" onclick="search.submit();"></a></td>
           </tr>
          </table>
         </form>
         <div align="center"><span class="style2">Powered by <a href="http://www.ohnorobot.com">OhNoRobot.com</a></span></div>
         <!-- End Ohnorobot.com code -->
         <br />
         <div align="center">
          <table width="100%" border="0">
          <tr>
           <td class="style2">Napkinz RSS Feed:</td>
          </tr>
          <tr>
            <td align="center"><a href="http://napkinz.com/rss.php"><img align="middle" src="images/rss20.gif" border="0" width="80" height="15" alt="RSS" /></a></td>
           </tr>
           <tr>
             <td align="center"><a href="http://napkinz.com/atom.php"><img align="middle" src="images/atom10.gif" border = "0" width = "80" height = "15" alt="ATOM" /></a></td>
          </tr>
          <tr align="center">
           <td><a href="http://fusion.google.com/add?feedurl=http%3A//www.napkinz.com/rss.php"><img src="http://buttons.googlesyndication.com/fusion/add.gif" width="80" height="14" border="0" alt="Add to Google"></a></td>
          </tr>
          <tr>
           <td align="center"><a href="http://us.rd.yahoo.com/my/atm/Napkinz/The%20Official%20Napkinz%20Feed/*http://add.my.yahoo.com/rss?url=http%3A//napkinz.com/rss.php"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif" width="80" height="15" border="0" align="middle" alt="Add to My Yahoo!"></a></td>
          </tr>
          <tr>
             <td align="center"><a href="http://english-87605547845.spampoison.com"><img align="middle" src="http://pics3.inxhost.com/images/sticker.gif" border="0" width="80" height="15" alt="Stop Spam" /></a></td>
          </tr>
          <tr>
             <td align="center"><a href='http://host-tracker.com/' onmouseover='this.href="http://host-tracker.com/website-uptime-statistics/328667/lvuc/";'><img width=80 height=15 border=0 alt='tracker' src="http://ext.host-tracker.com/uptime-img/?s=15&t=328667&m=00.59&p=Total&src=lvuc"></a><noscript><a href='http://host-tracker.com/'>web site monitoring</a></noscript></td>
          </tr>
        </table>
         </div>
         <br />        
       </div>
       <b class="spiffy">
       <b class="spiffy5"></b>
       <b class="spiffy4"></b>
       <b class="spiffy3"></b>
       <b class="spiffy2"><b></b></b>
       <b class="spiffy1"><b></b></b></b>
     </div>
    </td>
   </tr>
  </tbody>
 </table>
 <table border="0" cellpadding="0" cellspacing="0" width="920">
  <tbody>
   <tr>
     <td><img src="images/bottom_img.png"  /></td>
   </tr>
  </tbody>
 </table>
</div>
<br />
</body>
</html>

sushi4664 · #5 (**permalink**) 04-21-08, 06:05 AM

Thank you!

job0107 · #6 (**permalink**) 04-21-08, 07:46 AM

Your welcome.

sonoprint · #7 (**permalink**) 05-04-08, 12:36 AM

Hello-

I am also having a problem with IE, but I can not get any of my tables to display at all...

Every other browser is fine, but all IE versions will not show my tables or my nav buttons on any of my pages.

Help!!!

Mik

The main URl is http://www.sonoprint.com/main.html

job0107 · #8 (**permalink**) 05-04-08, 02:06 AM

Right before your table you have this line:

HTML Code:

<!-- top three column data here --!>

Change it:

HTML Code:

<!-- top three column data here -->