What's with this webpage? Image/Table Problem

[Garibaldi]

I have created a design for a page that I then sliced up and saved:
http://www.wiscollectorcar.com/wcc_cruise_night.html
I would like to display that page in my joomla install (a CMS) and be able to add text below each of the headings (ie description) and use mambots in the page as well. To do this I cut up the slices so that I could eventually just delete the white image below each heading and stick text in there. However, when copy the html from that page over into a Static Content Item, it looks like this:
http://www.wiscollectorcar.com/new-wcc.html
Why does it break all the images apart like that? I have even tried pasting the html with no WYSIWYG editor and it still looks like that. I have not changed anything from the other url I posted above. Regardless of anything within Joomla itself, is there any reason why this html would change the way that it displays from one page to another?

[Marvingj]

HTML itself offers no way to seamlessly incorporate the content of one file into another. True dynamic inclusion of one HTML document (even in a different "charset") into another is offered by the OBJECT element, but due to shortcomings of browser versions in current use, it seems unwise to rely on this yet for essential content. The same can be said for IFRAME. Beware of making your "source code" non-portable. Also, the HTML can only be validated after preprocessing, so the typical cycle "Edit, Check, Upload" becomes "Edit, Preprocess, Check, Upload" (here, "Check" includes whatever steps you use to preview your pages: validation, linting, management walk-through etc.; and "upload" means whatever you do to finally publish your new pages to the web server).

[JohnnyMalaria]

Which browser are you viewing the two versions with?

Using IE7 on Vista, both look the same - no break up etc.

Ditto for IE6 on XP SP2.

BUT - I think you may want to consider reducing the size of the graphics (byte-wise) - both versions of the page took a long time to load (on my ISDN connection - 128kbps).

How about using a single graphic and an HTML image map?

[Garibaldi]

Which browser are you viewing the two versions with?

Using IE7 on Vista, both look the same - no break up etc.

Ditto for IE6 on XP SP2.

BUT - I think you may want to consider reducing the size of the graphics (byte-wise) - both versions of the page took a long time to load (on my ISDN connection - 128kbps).

How about using a single graphic and an HTML image map?

Really? Wow, I'm using firefox and they both look quite different. Maybe it has something to do with my CSS. I took a look at it in IE and they both look good. Obviously it must be something that firefox does but IE doesn't, what could this possibly be? Also what is a html image map?

I would use all one image but I need to use an animated gif for the blinking WCC and QSL signs. The other parts of the image are all jpg to reduce the size and boost the quality

[JohnnyMalaria]

Sadly, not all web browsers are created equal. I learned that from Baldrick who told me that buttons on my site didn't work with Firefox...

Anyway, image maps allow hotspots to be defined in an image, typically to provide a way of hyperlinking.

Have a look at the main image on this page: http://www.enosoft.net/products/enodvdec/help/htm/_introductiontoenodvdec.htm

(It's from the Help file for one of our products).

If you move the mouse around, you'll set it will change when it moves over a hotspot. If you let it hover, you may also see some text pop-up (not sure if Firefox does). If you click on the hotspot, you follow a hyperlink.

The HTML code is quite simple:

[img]../img/_activemoviewindow.jpg[/img] 
  <map name="_activemoviewindowmap">
    <area shape="rect" coords="14,40,198,79" href="_parameterdetail.htm#recorddate" alt="Record Date">
    <area shape="rect" coords="221,40,406,79" href="_parameterdetail.htm#recordtime" alt="Record Time">
    <area shape="rect" coords="428,40,681,79" href="_parameterdetail.htm#timecode" alt="Time Code">
    <area shape="rect" coords="12,334,202,449" href="_parameterdetail.htm#camerainfo" alt="Camera Info">
    <area shape="rect" coords="14,470,83,509" href="_parameterdetail.htm#audioinfo" alt="Audio Information">
    <area shape="rect" coords="304,470,419,509" href="_parameterdetail.htm#colorspace" alt="Decoder Colorspace">
    <area shape="rect" coords="624,470,716,509" href="_parameterdetail.htm#videoinfo" alt="Video Information">
    <area shape="rect" coords="451,445,604,498" href="_parameterdetail.htm#spoiler" alt="Trial Version Spoiler">
  </map>
</P>

You include the image as per usual, adding the 'usemap="XXXX"'. The <map> tag defines the hotspots. For this example, they are all rectangular. Each <area> tag defines the area and the hyperlink (href).

Since you have an animated GIF at the top, you could use two images - one for the animated banner and another for the hyperlinks etc. I think displaying just two images with the same width will be more browser-neutral.

[StephanP]

Hi,

Have you already discovered Firebug?
This Firefox add-on is a perfect tool for designing and debugging CSS web sites.
http://www.getfirebug.com/

I'm certain that Firebug will help you find the cause of the detached images.
(Probably default paddings in some of the divs)

Good luck,

Stephan

[thecoalman]

You have no doctype decalration in the first link. You have to use consistent doctype declarations (or no doctype) to expect what you are working on to look the same as the final page. Different doctype's can cause the browser to render the page differently....

Once you get that straightened out try:

img
{display:block;}

[Garibaldi]

Sadly, not all web browsers are created equal. I learned that from Baldrick who told me that buttons on my site didn't work with Firefox...

Anyway, image maps allow hotspots to be defined in an image, typically to provide a way of hyperlinking.

Have a look at the main image on this page: http://www.enosoft.net/products/enodvdec/help/htm/_introductiontoenodvdec.htm

(It's from the Help file for one of our products).

If you move the mouse around, you'll set it will change when it moves over a hotspot. If you let it hover, you may also see some text pop-up (not sure if Firefox does). If you click on the hotspot, you follow a hyperlink.

The HTML code is quite simple:

[img]../img/_activemoviewindow.jpg[/img] 
  <map name="_activemoviewindowmap">
    <area shape="rect" coords="14,40,198,79" href="_parameterdetail.htm#recorddate" alt="Record Date">
    <area shape="rect" coords="221,40,406,79" href="_parameterdetail.htm#recordtime" alt="Record Time">
    <area shape="rect" coords="428,40,681,79" href="_parameterdetail.htm#timecode" alt="Time Code">
    <area shape="rect" coords="12,334,202,449" href="_parameterdetail.htm#camerainfo" alt="Camera Info">
    <area shape="rect" coords="14,470,83,509" href="_parameterdetail.htm#audioinfo" alt="Audio Information">
    <area shape="rect" coords="304,470,419,509" href="_parameterdetail.htm#colorspace" alt="Decoder Colorspace">
    <area shape="rect" coords="624,470,716,509" href="_parameterdetail.htm#videoinfo" alt="Video Information">
    <area shape="rect" coords="451,445,604,498" href="_parameterdetail.htm#spoiler" alt="Trial Version Spoiler">
  </map>
</P>

You include the image as per usual, adding the 'usemap="XXXX"'. The <map> tag defines the hotspots. For this example, they are all rectangular. Each <area> tag defines the area and the hyperlink (href).

Since you have an animated GIF at the top, you could use two images - one for the animated banner and another for the hyperlinks etc. I think displaying just two images with the same width will be more browser-neutral.

That's a great effect! I will definitely remember that! I do need seperate images, however, since I want to include joomla mambots and text I can't use it here. I know what you mean about browsers, this is frustrating since I use FF

Have you already discovered Firebug?
This Firefox add-on is a perfect tool for designing and debugging CSS web sites.
http://www.getfirebug.com/

I'm certain that Firebug will help you find the cause of the detached images.
(Probably default paddings in some of the divs)

Thanks, that would really help!! I'll give it a shot asap!

You have no doctype decalration in the first link. You have to use consistent doctype declarations (or no doctype) to expect what you are working on to look the same as the final page. Different doctype's can cause the browser to render the page differently....

Once you get that straightened out try:

img
{display:block;}

Hey Coalman, good to see you! What kind of doctype declaration would I need in the first link? Something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

I have narrowed the problem down to something in the code for my Joomla template, which is below:

<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );$iso = split( '=', _ISO );echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';?>
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<META NAME="author" CONTENT="Garibaldi">
<META NAME="owner" content="Garibaldi@wiscollectorcar.com"><META NAME="distribution" content="global">
<META NAME="abstract" content="Devoted To Collector Cars">
<?php mosShowHead(); ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php if ( $my->id ) { initEditor(); } ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/templates/247portal-broad/favicon.ico\" />" ; ?>
<link rel="alternate" title="<?php echo $mosConfig_sitename; ?>" href="<?php echo $GLOBALS['mosConfig_live_site']; ?>/index2.php?option=com_rss&no_html=1" type="application/rss+xml" />
<script language="JavaScript" type="text/javascript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
  </script>
</head>

<body onload="load()" onunload="GUnload()">
<div id="highslide-container"></div>
<div>

 <a name="up" id="up"></a>
  <table width="100%"  border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td>[img]<?php echo $mosConfig_live_site;?>/templates/247portal-broad/images/space.gif[/img]</td>
  </tr>
  <tr>
      <td><div class="background">
        <table width="100%"  border="0" cellpadding="0" cellspacing="0" background="<?php echo $mosConfig_live_site;?>/templates/247portal-broad/images/center.jpg">
          <tr valign="top"> 
            <td width="26">[img]<?php echo $mosConfig_live_site;?>/templates/247portal-broad/images/left.jpg[/img]</td>
            <td class="title">            <table width="100%"  border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td height="100" colspan="2" class="title" style="padding-top:8px;"><table width="100%" border="0" cellpadding="0" cellspacing="0"> 
                    <tr valign="top">
                      <td width="100%" style="padding-left:10px;" align="center"><p align="center"> "> </p>


</td>
                    </tr>
                </table></td>
              </tr>
              <tr valign="top"><!--
                <td width="400" height="29"><div id="search">
                    <?php mosLoadModules ( 'user4', -1 ); ?>
                </div></td> -->
                <td width="100%" height="29" valign="top" class="mainlevel-nav"><?php mosLoadModules ( 'user3' ); ?></td>
              </tr>
            </table></td>
            <td width="26">[img]<?php echo $mosConfig_live_site;?>/templates/247portal-broad/images/right.jpg[/img]</td>
          </tr>
        </table> 
		
        <table width="100%"  border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td width="11" height="25" background="<?php echo $mosConfig_live_site;?>/templates/247portal-broad/images/shadowl.jpg"></td>
            <td height="25" bgcolor="#ECEAD8" style="border-bottom: 1px solid #BCB778; border-top: 5px solid #FFFFFF;"><?php mosPathWay(); ?></td>
            <td height="25" align="right" bgcolor="#ECEAD8" style="border-bottom: 1px solid #BCB778; border-top: 5px solid #FFFFFF;"><div class="date"><?php echo mosCurrentDate(); ?></div></td>
            <td width="11" height="25" align="right" background="<?php echo $mosConfig_live_site;?>/templates/247portal-broad/images/shadowr.jpg"></td>
          </tr>
        </table>
        <table width="100%"  border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td valign="top" style="padding-left:8px; background-repeat: repeat-y;" background="<?php echo $mosConfig_live_site;?>/templates/247portal-broad/images/shadowl.jpg"></td>
            <td valign="top" style="background-repeat: repeat-y;"background="<?php echo $mosConfig_live_site;?>/templates/247portal-broad/images/lb.gif">
<?php if (mosCountModules( "left" ) && $task != "new" && $task != "edit" ) {?>
    <div align="center" class="leftrow">
        <?php mosLoadModules ( 'left' ); ?>
    </div>
    <?php
    }?>

 </td>
            <td valign="top" bgcolor="#F2F1E6" width="100%"><div class"main">
              <table width="100%"  border="0" cellspacing="0" cellpadding="0">
                <tr valign="top" bgcolor="#ECEAD8">
                  <?php if (mosCountModules('top')) { ?><td colspan="3" style="border-top: 3px solid #FFFFFF;">
                      <div>
                        <?php mosLoadModules ( 'top' ); ?>
                      </div>
                      </td><?php } ?>
                </tr>
                <tr>
                  <?php if (mosCountModules('user1')) { ?><td valign="top" bgcolor="#ECEAD8" style="border-top: 3px solid #FFFFFF;"><div align="center">
                      <?php mosLoadModules ( 'user1' ); ?> 
                  </div></td>
                  <td width="4" class="mod" valign="top" bgcolor="#FFFFFF" style="border-top: 3px solid #FFFFFF;"><div class="mod"> <?php } ?><?php if (mosCountModules('user2')) { ?> </div></td> 
                  
                  <td valign="top" bgcolor="#ECEAD8" style="border-top: 3px solid #FFFFFF;"><div>
                    <?php mosLoadModules ( 'user2' ); ?>
</div></td><?php } ?>
                </tr>
                <tr align="left" valign="top">
                  <td colspan="3" style=" border-top: 4px solid #FFFFFF; padding: 5px;"><div class="main">
                      <?php mosMainBody(); ?>
                      </div></td>
                </tr>
                <tr bgcolor="#ECEAD8">
                  <td colspan="3" valign="top" style="border-top: 3px solid #FFFFFF;"><?php if (mosCountModules('bottom')) { ?>
                    <div>
                      <?php mosLoadModules ( 'bottom' ); ?>
                  </div>
                    <?php } ?></td>
                  </tr>
              </table>
             </td>
            <td valign="top" style="background-repeat: repeat-y; "background="<?php echo $mosConfig_live_site;?>/templates/247portal-broad/images/rb.gif"><?php if (mosCountModules('right')) { ?>
                <div class="rightrow">
                  <?php mosLoadModules ( 'right' ); ?>
                </div>                
              <?php } ?></td>
            <td valign="top" style="padding-right: 8px; background-repeat: repeat-y;" background="<?php echo $mosConfig_live_site;?>/templates/247portal-broad/images/shadowr.jpg"></td>
          </tr>
        </table>
        <table width="100%"  border="0" cellpadding="0" cellspacing="0" background="<?php echo $mosConfig_live_site;?>/templates/247portal-broad/images/center2.jpg">
          <tr>
            <td width="26">[img]<?php echo $mosConfig_live_site;?>/templates/247portal-broad/images/left2.jpg[/img]</td>
            <td>
              <table width="100%"  border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="30" align="left">">[img]<?php echo $mosConfig_live_site;?>/templates/247portal-broad/images/ltop.gif[/img]</td>
                  <td align="center"><div class="footer"><?php include_once('includes/footer.php'); ?> Forum ArchivesSite Designed & Created by Nick & Andrew Martin
                    Template Design</div>
                    </td>
                  <td width="30" align="right">">[img]<?php echo $mosConfig_live_site;?>/templates/247portal-broad/images/rtop.gif[/img]</td>
                </tr>
            </table></td>
            <td width="26">[img]<?php echo $mosConfig_live_site;?>/templates/247portal-broad/images/right2.jpg[/img]</td>
</tr><tr>      <SCRIPT language=javascript 
      src="http://ss.webring.com/navbar?f=j;y=garibaldi;u=defurl" 
      type=text/javascript> </SCRIPT>
      <NOSCRIPT>
<td>
</td></tr>
                  </table>
      </div></td>
    </tr>
  </table>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-243093-1";
urchinTracker();
</script>
</body>
</html>

I tried displaying the page with a different Joomla template in FF and it looked fine! Then I eliminated all the CSS from my current template and it still looked messed up like this so I know it has to be somewhere in the above html code. Ideas?

Thanks for all the help, I really appreciate it!

[thecoalman]

Hey Coalman, good to see you! What kind of doctype declaration would I need in the first link?

If you use the same doctype on the first page that is on the second page you will see that it will exhibit the same problem. that's why one diplays the way you want and the other doesn't. Vice-versa if you remove the doctype on the second one it will look the way you want.

doctype depends on the rules you are following for coding it. It should be valid, invalid code can cause strange things to happen.

http://validator.w3.org/

[Garibaldi]

Yes, that worked! I will try a different, looser doctype on that particular page and see if it fixes it. What is the real advantage to validating all my pages? It seems like it would be a lot of work for little gain

[thecoalman]

Validating a page isn't necessary but does have some benefits. Using consistent code can save you a lot of headaches down the road. As I mentioned using invalid code can have some undesirable affects, some webmasters will in some cases take advantage of that. If I ever have a problem with a page that's the first thing I do, run it through the validator. It will find other errors like missing tags, etc.

Additionally search engines like well formed valid HTML.