Page doesn't display good in IE

  • jerryscs
  • Novice
  • Novice
  • User avatar
  • Posts: 27
  • Loc: Okinawa, Japan

Post 3+ Months Ago

Hello All,

I'm creating a page using CSS and it shows up great using Mozilla, but in IE, there are a lot of white spaces in the navigation area. Below is the HTML for the page, and the CSS info. Thanks for any help that I can get.

You can view the page at http://www.jerryscs.com/csstest.html

Jerry


HTML Page
------------------------------------------------------
Code: [ Select ]
<html>
    <head>
        <title>Test CSS Page</title>
        <link href="http://www.jerryscs.com/csstest.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
        <div id="container">
        
        <div id="banner">
                <table border="0" cellspacing="0" cellpadding="0">
            <tr>
                        <td align="left"><img src="http://www.jerryscs.com/images/top_left_corner.gif" width="130" height="52"></td>
                        <td align="left"><img src="http://www.jerryscs.com/images/top_middle_bar.gif" width="427" height="52"></td>
                  </tr>
                </table>
          </div>
    
      <div id="nav">
                <img src="http://www.jerryscs.com/images/left_nav_space_1.gif" width="130" height="19" border="0"></td>
                <img src="http://www.jerryscs.com/images/left_nav_btn_home.gif" width="130" height="18"></td>
                <img src="http://www.jerryscs.com/images/left_nav_space_2.gif" width="130" height="21"></td>
                <img src="http://www.jerryscs.com/images/left_nav_btn_sa-bisu.gif" width="130" height="18"></td>
                <img src="http://www.jerryscs.com/images/left_nav_space_3.gif" width="130" height="24"></td>
                <img src="http://www.jerryscs.com/images/left_nav_btn_kaishagaiyou.gif" width="130" height="18"></td>
                <img src="http://www.jerryscs.com/images/left_nav_space_4.gif" width="130" height="21"></td>
                <img src="http://www.jerryscs.com/images/left_nav_btn_nakayukui.gif" width="130" height="18"></td>
                <img src="http://www.jerryscs.com/images/left_nav_space_5.gif" width="130" height="23"></td>
                <img src="http://www.jerryscs.com/images/left_nav_btn_english.gif" width="130" height="18"></td>
                <img src="http://www.jerryscs.com/images/left_nav_space6.gif" width="130" height="4"></td>
                                    
                <table border="0" cellspacing="0" cellpadding="0">
            <tr>
                        <td><img src="http://www.jerryscs.com/images/left_nav_yunta_space1.gif" width="6" height="100"></td>
                        <td><OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
                            WIDTH="92" HEIGHT="100" id="animatedYuntaNihongo" ALIGN=""> <PARAM NAME=movie VALUE="http://www.jerryscs.com/animatedYuntaNihongo.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor
                            VALUE=#006699> <EMBED src="http://www.jerryscs.com/animatedYuntaNihongo.swf" quality=high bgcolor=#006699 WIDTH="92" HEIGHT="100" NAME="animatedYuntaNihongo"
                            ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT></td>
                        <td><img src="http://www.jerryscs.com/images/left_nav_yunta_space2.gif" width="32" height="100"></td>
                      </tr>
                </table>
                <img src="http://www.jerryscs.com/images/left_nav_yunta_space3.gif" width="130" height="12">
          </div>
            
      <div id="imagebar">
          <img src="http://www.jerryscs.com/images/image_display.gif" width="427" height="158">
          </div>
    
      <div id="content">
                <h2>Content/Home stuff</h2>
            
                <p> Here is all the news that is news. From KDDI-OK</p>
                <br>
                <br>
                <br>
                <br>
                <br>
                <p> and here is some more information. </p>
            </div>
    
      <div id="footer">
                Copyright KDDI Okinawa Co., LTD.
          </div>
        </div>
    </body>
</html>
  1. <html>
  2.     <head>
  3.         <title>Test CSS Page</title>
  4.         <link href="http://www.jerryscs.com/csstest.css" rel="stylesheet" type="text/css" />
  5.     </head>
  6.     
  7.     <body>
  8.     
  9.         <div id="container">
  10.         
  11.         <div id="banner">
  12.                 <table border="0" cellspacing="0" cellpadding="0">
  13.             <tr>
  14.                         <td align="left"><img src="http://www.jerryscs.com/images/top_left_corner.gif" width="130" height="52"></td>
  15.                         <td align="left"><img src="http://www.jerryscs.com/images/top_middle_bar.gif" width="427" height="52"></td>
  16.                   </tr>
  17.                 </table>
  18.           </div>
  19.     
  20.       <div id="nav">
  21.                 <img src="http://www.jerryscs.com/images/left_nav_space_1.gif" width="130" height="19" border="0"></td>
  22.                 <img src="http://www.jerryscs.com/images/left_nav_btn_home.gif" width="130" height="18"></td>
  23.                 <img src="http://www.jerryscs.com/images/left_nav_space_2.gif" width="130" height="21"></td>
  24.                 <img src="http://www.jerryscs.com/images/left_nav_btn_sa-bisu.gif" width="130" height="18"></td>
  25.                 <img src="http://www.jerryscs.com/images/left_nav_space_3.gif" width="130" height="24"></td>
  26.                 <img src="http://www.jerryscs.com/images/left_nav_btn_kaishagaiyou.gif" width="130" height="18"></td>
  27.                 <img src="http://www.jerryscs.com/images/left_nav_space_4.gif" width="130" height="21"></td>
  28.                 <img src="http://www.jerryscs.com/images/left_nav_btn_nakayukui.gif" width="130" height="18"></td>
  29.                 <img src="http://www.jerryscs.com/images/left_nav_space_5.gif" width="130" height="23"></td>
  30.                 <img src="http://www.jerryscs.com/images/left_nav_btn_english.gif" width="130" height="18"></td>
  31.                 <img src="http://www.jerryscs.com/images/left_nav_space6.gif" width="130" height="4"></td>
  32.                                     
  33.                 <table border="0" cellspacing="0" cellpadding="0">
  34.             <tr>
  35.                         <td><img src="http://www.jerryscs.com/images/left_nav_yunta_space1.gif" width="6" height="100"></td>
  36.                         <td><OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
  37.                             WIDTH="92" HEIGHT="100" id="animatedYuntaNihongo" ALIGN=""> <PARAM NAME=movie VALUE="http://www.jerryscs.com/animatedYuntaNihongo.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor
  38.                             VALUE=#006699> <EMBED src="http://www.jerryscs.com/animatedYuntaNihongo.swf" quality=high bgcolor=#006699 WIDTH="92" HEIGHT="100" NAME="animatedYuntaNihongo"
  39.                             ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT></td>
  40.                         <td><img src="http://www.jerryscs.com/images/left_nav_yunta_space2.gif" width="32" height="100"></td>
  41.                       </tr>
  42.                 </table>
  43.                 <img src="http://www.jerryscs.com/images/left_nav_yunta_space3.gif" width="130" height="12">
  44.           </div>
  45.             
  46.       <div id="imagebar">
  47.           <img src="http://www.jerryscs.com/images/image_display.gif" width="427" height="158">
  48.           </div>
  49.     
  50.       <div id="content">
  51.                 <h2>Content/Home stuff</h2>
  52.             
  53.                 <p> Here is all the news that is news. From KDDI-OK</p>
  54.                 <br>
  55.                 <br>
  56.                 <br>
  57.                 <br>
  58.                 <br>
  59.                 <p> and here is some more information. </p>
  60.             </div>
  61.     
  62.       <div id="footer">
  63.                 Copyright KDDI Okinawa Co., LTD.
  64.           </div>
  65.         </div>
  66.     </body>
  67. </html>



CSS Page
------------------------------------------------------------------

Code: [ Select ]
body
{
    margin: 0px;
    padding: 0px;
    font-family: verdana, arial, helvetica, sans-serif;
    color: #333;
    background-color: white;
}

#container
{
    margin: 0;
    background-color: #DDD;
}

#banner
{
    background-color: #006699;
}

#banner h1
{
    margin: 0;
}

#nav
{
    float: left;
    width: 130px;
}

#nav p
{
    margin-top: 0;
}

#imagebar
{
    width: 500px;
    margin-left: 130px;
}

#content
{
    margin: 0 0 0 130px;
}

#footer
{
    clear: both;
    height: 55%;
    background-color: #666;
    text-align: right;
}
  1. body
  2. {
  3.     margin: 0px;
  4.     padding: 0px;
  5.     font-family: verdana, arial, helvetica, sans-serif;
  6.     color: #333;
  7.     background-color: white;
  8. }
  9. #container
  10. {
  11.     margin: 0;
  12.     background-color: #DDD;
  13. }
  14. #banner
  15. {
  16.     background-color: #006699;
  17. }
  18. #banner h1
  19. {
  20.     margin: 0;
  21. }
  22. #nav
  23. {
  24.     float: left;
  25.     width: 130px;
  26. }
  27. #nav p
  28. {
  29.     margin-top: 0;
  30. }
  31. #imagebar
  32. {
  33.     width: 500px;
  34.     margin-left: 130px;
  35. }
  36. #content
  37. {
  38.     margin: 0 0 0 130px;
  39. }
  40. #footer
  41. {
  42.     clear: both;
  43.     height: 55%;
  44.     background-color: #666;
  45.     text-align: right;
  46. }
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

One problem is there's a lot of un-needed code. Inside the #nav div you have a /td at the end of each image. These are completely unnecessary.

The container div is also unneccessary. Put the container css into the body css.

Second, IE has a problem dealing with spaces in html from time to time, and that's what is causing all of the extra spacing. Check for spaces between images, divs, etc. They're there. I dinked around with your source code for a while and was able to fix all of the spacing problems. You can do it.

Good job so far. I'll be happy to watch your site get built. Also, I'm on Okinawa too, so it's good to see someone here from my neighborhood.

PM me anytime and I'll be happy to offer you tips for cutting code anytime. You've got a lot of code that can be cleaned up. I'll be glad to help. Good luck.
  • jerryscs
  • Novice
  • Novice
  • User avatar
  • Posts: 27
  • Loc: Okinawa, Japan

Post 3+ Months Ago

Thank you, I'll give that a try. About the extra </td>'s...If I put the images into a table, the page is perfect in IE, but I don't want to do that so I took the images out of the table...guess I forgot to get the ending </td>'s on all the images. Once again, thank you for your help...I'll try it and see how it goes.
  • jerryscs
  • Novice
  • Novice
  • User avatar
  • Posts: 27
  • Loc: Okinawa, Japan

Post 3+ Months Ago

Ok....I am a little bit farther along. I got rid of the spaces between images in the #nav section of the page using gsv2com's advice, but there is still a space between the #nav and #image bar sections. Page is still viewable at http://www.jerryscs.com/csstest.html

Thank you again for helping.

Jerry
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

This will help clean up your code a little bit too. Turn this:

Code: [ Select ]
<div id="banner">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left"><img src="http://www.jerryscs.com/images/top_left_corner.gif" width="130" height="52"></td>
<td align="left"><img src="http://www.jerryscs.com/images/top_middle_bar.gif" width="427" height="52"></td>
</tr>
</table>
</div>
  1. <div id="banner">
  2. <table border="0" cellspacing="0" cellpadding="0">
  3. <tr>
  4. <td align="left"><img src="http://www.jerryscs.com/images/top_left_corner.gif" width="130" height="52"></td>
  5. <td align="left"><img src="http://www.jerryscs.com/images/top_middle_bar.gif" width="427" height="52"></td>
  6. </tr>
  7. </table>
  8. </div>


Into this:

Code: [ Select ]
<DIV id=banner>
<IMG height=52 src="www.jerryscs.com/images/top_left_corner.gif" width=130><IMG height=52 src="www.jerryscs.com/images/top_middle_bar.gif" width=427></DIV>
  1. <DIV id=banner>
  2. <IMG height=52 src="www.jerryscs.com/images/top_left_corner.gif" width=130><IMG height=52 src="www.jerryscs.com/images/top_middle_bar.gif" width=427></DIV>


That table is completely unneccessary. I'll keep posting pointers and I find things to fix.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Also, turn this:

Code: [ Select ]
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="http://www.jerryscs.com/images/left_nav_yunta_space1.gif" width="6" height="100"></td>
<td><OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="92" HEIGHT="100" id="animatedYuntaNihongo" ALIGN=""> <PARAM NAME=movie VALUE="http://www.jerryscs.com/animatedYuntaNihongo.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor
VALUE=#006699> <EMBED src="http://www.jerryscs.com/animatedYuntaNihongo.swf" quality=high bgcolor=#006699 WIDTH="92" HEIGHT="100" NAME="animatedYuntaNihongo"
ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT></td>
<td><img src="http://www.jerryscs.com/images/left_nav_yunta_space2.gif" width="32" height="100"></td>
</tr>
</table>
<img src="http://www.jerryscs.com/images/left_nav_yunta_space3.gif" width="130" height="12">
  1. <table border="0" cellspacing="0" cellpadding="0">
  2. <tr>
  3. <td><img src="http://www.jerryscs.com/images/left_nav_yunta_space1.gif" width="6" height="100"></td>
  4. <td><OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
  5. WIDTH="92" HEIGHT="100" id="animatedYuntaNihongo" ALIGN=""> <PARAM NAME=movie VALUE="http://www.jerryscs.com/animatedYuntaNihongo.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor
  6. VALUE=#006699> <EMBED src="http://www.jerryscs.com/animatedYuntaNihongo.swf" quality=high bgcolor=#006699 WIDTH="92" HEIGHT="100" NAME="animatedYuntaNihongo"
  7. ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT></td>
  8. <td><img src="http://www.jerryscs.com/images/left_nav_yunta_space2.gif" width="32" height="100"></td>
  9. </tr>
  10. </table>
  11. <img src="http://www.jerryscs.com/images/left_nav_yunta_space3.gif" width="130" height="12">


Into this:

Code: [ Select ]
<IMG height=100 src="/images/left_nav_yunta_space1.gif" width=6><OBJECT id=animatedYuntaNihongo codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0 height=100 width=92 classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000><PARAM NAME="movie" VALUE="http://www.jerryscs.com/animatedYuntaNihongo.swf"><PARAM NAME="quality" VALUE="high"><PARAM NAME="bgcolor" VALUE="#006699"><EMBED src="http://www.jerryscs.com/animatedYuntaNihongo.swf" quality=high bgcolor=#006699 WIDTH="92" HEIGHT="100" NAME="animatedYuntaNihongo" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT><IMG height=100 src="/images/left_nav_yunta_space2.gif" width=32><IMG height=12 src="/images/left_nav_yunta_space3.gif" width=130>


That table is unnecessary too. :) Cutting tables is fun, huh? :) Feels like liposuction... Making a fat girl thin!
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Here's some slimmed down code:

Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>Test CSS Page</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252"><LINK href="/images/csstest.css" type=text/css rel=stylesheet></HEAD>
<BODY>
<DIV id=banner><IMG height=52 src="/images/top_left_corner.gif" width=130><IMG height=52 src="/images/top_middle_bar.gif" width=427></DIV>
<DIV id=nav><IMG height=19 src="/images/left_nav_space_1.gif" width=130 border=0><IMG height=18 src="/images/left_nav_btn_home.gif" width=130><IMG height=21 src="/images/left_nav_space_2.gif" width=130><IMG height=18 src="/images/left_nav_btn_sa-bisu.gif" width=130><IMG height=24 src="/images/left_nav_space_3.gif" width=130><IMG height=18 src="/images/left_nav_btn_kaishagaiyou.gif" width=130><IMG height=21 src="/images/left_nav_space_4.gif" width=130><IMG height=18 src="/images/left_nav_btn_nakayukui.gif" width=130><IMG height=23 src="/images/left_nav_space_5.gif" width=130><IMG height=18 src="/images/left_nav_btn_english.gif" width=130><IMG height=4 src="/images/left_nav_space6.gif" width=130><IMG height=100 src="/images/left_nav_yunta_space1.gif" width=6><OBJECT id=animatedYuntaNihongo codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0 height=100 width=92 classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000><PARAM NAME="movie" VALUE="http://www.jerryscs.com/animatedYuntaNihongo.swf"><PARAM NAME="quality" VALUE="high"><PARAM NAME="bgcolor" VALUE="#006699"><EMBED src="http://www.jerryscs.com/animatedYuntaNihongo.swf" quality=high bgcolor=#006699 WIDTH="92" HEIGHT="100" NAME="animatedYuntaNihongo" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT><IMG height=100 src="/images/left_nav_yunta_space2.gif" width=32><IMG height=12 src="/images/left_nav_yunta_space3.gif" width=130></DIV>
<DIV id=content><IMG height=158 src="" width=427><H2>Content/Home stuff</H2><P>Here is all the news that is news. From KDDI-OK</P><BR><BR><BR><BR><BR><P>and here is some more information. </P></DIV><DIV id=footer>Copyright KDDI Okinawa Co., LTD.</DIV>
</BODY></HTML>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>Test CSS Page</TITLE>
  2. <META http-equiv=Content-Type content="text/html; charset=windows-1252"><LINK href="/images/csstest.css" type=text/css rel=stylesheet></HEAD>
  3. <BODY>
  4. <DIV id=banner><IMG height=52 src="/images/top_left_corner.gif" width=130><IMG height=52 src="/images/top_middle_bar.gif" width=427></DIV>
  5. <DIV id=nav><IMG height=19 src="/images/left_nav_space_1.gif" width=130 border=0><IMG height=18 src="/images/left_nav_btn_home.gif" width=130><IMG height=21 src="/images/left_nav_space_2.gif" width=130><IMG height=18 src="/images/left_nav_btn_sa-bisu.gif" width=130><IMG height=24 src="/images/left_nav_space_3.gif" width=130><IMG height=18 src="/images/left_nav_btn_kaishagaiyou.gif" width=130><IMG height=21 src="/images/left_nav_space_4.gif" width=130><IMG height=18 src="/images/left_nav_btn_nakayukui.gif" width=130><IMG height=23 src="/images/left_nav_space_5.gif" width=130><IMG height=18 src="/images/left_nav_btn_english.gif" width=130><IMG height=4 src="/images/left_nav_space6.gif" width=130><IMG height=100 src="/images/left_nav_yunta_space1.gif" width=6><OBJECT id=animatedYuntaNihongo codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0 height=100 width=92 classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000><PARAM NAME="movie" VALUE="http://www.jerryscs.com/animatedYuntaNihongo.swf"><PARAM NAME="quality" VALUE="high"><PARAM NAME="bgcolor" VALUE="#006699"><EMBED src="http://www.jerryscs.com/animatedYuntaNihongo.swf" quality=high bgcolor=#006699 WIDTH="92" HEIGHT="100" NAME="animatedYuntaNihongo" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT><IMG height=100 src="/images/left_nav_yunta_space2.gif" width=32><IMG height=12 src="/images/left_nav_yunta_space3.gif" width=130></DIV>
  6. <DIV id=content><IMG height=158 src="" width=427><H2>Content/Home stuff</H2><P>Here is all the news that is news. From KDDI-OK</P><BR><BR><BR><BR><BR><P>and here is some more information. </P></DIV><DIV id=footer>Copyright KDDI Okinawa Co., LTD.</DIV>
  7. </BODY></HTML>


and the css...:

Code: [ Select ]
BODY{paddding:0; margin:0; color:#333; padding-top:0; font:1em verdana, arial, helvetica, sans-serif; background:#fff}
#banner{background:#069}
#nav{float:left; width:130px;}
#content{margin:0 0 0 125px}
#footer{ clear:both; background:#666; text-align:right}
  1. BODY{paddding:0; margin:0; color:#333; padding-top:0; font:1em verdana, arial, helvetica, sans-serif; background:#fff}
  2. #banner{background:#069}
  3. #nav{float:left; width:130px;}
  4. #content{margin:0 0 0 125px}
  5. #footer{ clear:both; background:#666; text-align:right}

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 16 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.