473,326 Members | 2,168 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

Firefox render gaps in ImageReady generated Slices

I'm very new to using CSS and also the concept of slices for mouse-overs, and have made my first attempt at using ImageReady to generate slices of a world map. I basically wanted a map that would show various countries appearing to be depressed when "moused-over". To keep it simple at first, I just decided to try two countries.

After copying the HTML and JavaScript codes generated by ImageReady into the page I wanted to insert the map into, I found that it seemed to work just fine when viewed with IE7. However, when using Firefox 2.0.0.11, (and Safari), I found that the image rendered with multiple gaps. The page in question is at http://www.nowspecialties.com/temp/international.html .

The "raw" code generated by ImageReady renders quite nicely though in FireFox, so obviously I'm doing something wrong, when I try copying and pasting the code into the appropriate sections of my page... but I don't know what I'm doing wrong.

I saw another post on this forum (http://www.thescripts.com/forum/thread688091.html) where someone had a similar problem, and the solution seemed to be to insert
Expand|Select|Wrap|Line Numbers
  1. table#TAG_Header img { display: block; }
.

I have no idea where that's supposed to go, and after many attempts at pasting it into various places (including my CSS style sheet), I decided to go ahead and publicly admit that I'm the idiot that I am.

For what it's worth, here's the raw code generated by ImageReady:
Expand|Select|Wrap|Line Numbers
  1. <HTML>
  2. <HEAD>
  3. <TITLE>world-map-LOWER</TITLE>
  4. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
  5. <!-- ImageReady Preload Script (world-map-LOWER.psd) -->
  6. <SCRIPT TYPE="text/javascript">
  7. <!--
  8.  
  9. function newImage(arg) {
  10.     if (document.images) {
  11.         rslt = new Image();
  12.         rslt.src = arg;
  13.         return rslt;
  14.     }
  15. }
  16.  
  17. function changeImages() {
  18.     if (document.images && (preloadFlag == true)) {
  19.         for (var i=0; i<changeImages.arguments.length; i+=2) {
  20.             document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
  21.         }
  22.     }
  23. }
  24.  
  25. var preloadFlag = false;
  26. function preloadImages() {
  27.     if (document.images) {
  28.         world_map_LOWER_01_USA_over = newImage("map-slices/world-map-LOWER_01-USA_over.gif");
  29.         world_map_LOWER_01_China_over = newImage("map-slices/world-map-LOWER_01-China_ov.gif");
  30.         world_map_LOWER_02_USA_over = newImage("map-slices/world-map-LOWER_02-USA_over.gif");
  31.         China_over = newImage("map-slices/China-over.jpg");
  32.         world_map_LOWER_04_China_over = newImage("map-slices/world-map-LOWER_04-China_ov.gif");
  33.         world_map_LOWER_05_USA_over = newImage("map-slices/world-map-LOWER_05-USA_over.gif");
  34.         USA_over = newImage("map-slices/USA-over.jpg");
  35.         world_map_LOWER_07_USA_over = newImage("map-slices/world-map-LOWER_07-USA_over.gif");
  36.         world_map_LOWER_07_China_over = newImage("map-slices/world-map-LOWER_07-China_ov.gif");
  37.         world_map_LOWER_08_USA_over = newImage("map-slices/world-map-LOWER_08-USA_over.gif");
  38.         world_map_LOWER_09_China_over = newImage("map-slices/world-map-LOWER_09-China_ov.gif");
  39.         preloadFlag = true;
  40.     }
  41. }
  42.  
  43. // -->
  44. </SCRIPT>
  45. <!-- End Preload Script -->
  46. </HEAD>
  47. <BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();">
  48. <!-- ImageReady Slices (world-map-LOWER.psd) -->
  49. <TABLE WIDTH=640 BORDER=0 CELLPADDING=0 CELLSPACING=0>
  50.     <TR>
  51.         <TD COLSPAN=5>
  52.             <IMG NAME="world_map_LOWER_01" SRC="map-slices/world-map-LOWER_01.gif" WIDTH=640 HEIGHT=51 ALT=""></TD>
  53.         <TD>
  54.             <IMG SRC="map-slices/spacer.gif" WIDTH=1 HEIGHT=51 ALT=""></TD>
  55.     </TR>
  56.     <TR>
  57.         <TD COLSPAN=3>
  58.             <IMG NAME="world_map_LOWER_02" SRC="map-slices/world-map-LOWER_02.gif" WIDTH=416 HEIGHT=8 ALT=""></TD>
  59.         <TD ROWSPAN=3>
  60.             <A HREF="#"
  61.                 ONMOUSEOVER="changeImages('world_map_LOWER_01', 'map-slices/world-map-LOWER_01-China_ov.gif', 'China', 'map-slices/China-over.jpg', 'world_map_LOWER_04', 'map-slices/world-map-LOWER_04-China_ov.gif', 'world_map_LOWER_07', 'map-slices/world-map-LOWER_07-China_ov.gif', 'world_map_LOWER_09', 'map-slices/world-map-LOWER_09-China_ov.gif');
  62. return true;"
  63.                 ONMOUSEOUT="changeImages('world_map_LOWER_01', 'map-slices/world-map-LOWER_01.gif', 'China', 'map-slices/China.jpg', 'world_map_LOWER_04', 'map-slices/world-map-LOWER_04.gif', 'world_map_LOWER_07', 'map-slices/world-map-LOWER_07.gif', 'world_map_LOWER_09', 'map-slices/world-map-LOWER_09.gif'); return true;"
  64.                 ONMOUSEDOWN="changeImages('world_map_LOWER_01', 'map-slices/world-map-LOWER_01.gif', 'China', 'map-slices/China.jpg', 'world_map_LOWER_04', 'map-slices/world-map-LOWER_04.gif', 'world_map_LOWER_07', 'map-slices/world-map-LOWER_07.gif', 'world_map_LOWER_09', 'map-slices/world-map-LOWER_09.gif'); return true;"
  65.                 ONMOUSEUP="changeImages('world_map_LOWER_01', 'map-slices/world-map-LOWER_01-China_ov.gif', 'China', 'map-slices/China-over.jpg', 'world_map_LOWER_04', 'map-slices/world-map-LOWER_04-China_ov.gif', 'world_map_LOWER_07', 'map-slices/world-map-LOWER_07-China_ov.gif', 'world_map_LOWER_09', 'map-slices/world-map-LOWER_09-China_ov.gif');
  66. return true;">
  67.                 <IMG NAME="China" SRC="map-slices/China.jpg" WIDTH=104 HEIGHT=74 BORDER=0 ALT="China"></A></TD>
  68.         <TD ROWSPAN=4>
  69.             <IMG NAME="world_map_LOWER_04" SRC="map-slices/world-map-LOWER_04.gif" WIDTH=120 HEIGHT=275 ALT=""></TD>
  70.         <TD>
  71.             <IMG SRC="map-slices/spacer.gif" WIDTH=1 HEIGHT=8 ALT=""></TD>
  72.     </TR>
  73.     <TR>
  74.         <TD ROWSPAN=3>
  75.             <IMG NAME="world_map_LOWER_05" SRC="map-slices/world-map-LOWER_05.gif" WIDTH=95 HEIGHT=267 ALT=""></TD>
  76.         <TD>
  77.             <A HREF="#"
  78.                 ONMOUSEOVER="changeImages('world_map_LOWER_01', 'map-slices/world-map-LOWER_01-USA_over.gif', 'world_map_LOWER_02', 'map-slices/world-map-LOWER_02-USA_over.gif', 'world_map_LOWER_05', 'map-slices/world-map-LOWER_05-USA_over.gif', 'USA', 'map-slices/USA-over.jpg', 'world_map_LOWER_07', 'map-slices/world-map-LOWER_07-USA_over.gif',
  79. 'world_map_LOWER_08', 'map-slices/world-map-LOWER_08-USA_over.gif'); return true;"
  80.                 ONMOUSEOUT="changeImages('world_map_LOWER_01', 'map-slices/world-map-LOWER_01.gif', 'world_map_LOWER_02', 'map-slices/world-map-LOWER_02.gif', 'world_map_LOWER_05', 'map-slices/world-map-LOWER_05.gif', 'USA', 'map-slices/USA.jpg', 'world_map_LOWER_07', 'map-slices/world-map-LOWER_07.gif', 'world_map_LOWER_08', 'map-slices/world-map-LOWER_08.gif');
  81. return true;"
  82.                 ONMOUSEDOWN="changeImages('world_map_LOWER_01', 'map-slices/world-map-LOWER_01.gif', 'world_map_LOWER_02', 'map-slices/world-map-LOWER_02.gif', 'world_map_LOWER_05', 'map-slices/world-map-LOWER_05.gif', 'USA', 'map-slices/USA.jpg', 'world_map_LOWER_07', 'map-slices/world-map-LOWER_07.gif', 'world_map_LOWER_08', 'map-slices/world-map-LOWER_08.gif');
  83. return true;"
  84.                 ONMOUSEUP="changeImages('world_map_LOWER_01', 'map-slices/world-map-LOWER_01-USA_over.gif', 'world_map_LOWER_02', 'map-slices/world-map-LOWER_02-USA_over.gif', 'world_map_LOWER_05', 'map-slices/world-map-LOWER_05-USA_over.gif', 'USA', 'map-slices/USA-over.jpg', 'world_map_LOWER_07', 'map-slices/world-map-LOWER_07-USA_over.gif',
  85. 'world_map_LOWER_08', 'map-slices/world-map-LOWER_08-USA_over.gif'); return true;">
  86.                 <IMG NAME="USA" SRC="map-slices/USA.jpg" WIDTH=110 HEIGHT=59 BORDER=0 ALT="USA"></A></TD>
  87.         <TD ROWSPAN=3>
  88.             <IMG NAME="world_map_LOWER_07" SRC="map-slices/world-map-LOWER_07.gif" WIDTH=211 HEIGHT=267 ALT=""></TD>
  89.         <TD>
  90.             <IMG SRC="map-slices/spacer.gif" WIDTH=1 HEIGHT=59 ALT=""></TD>
  91.     </TR>
  92.     <TR>
  93.         <TD ROWSPAN=2>
  94.             <IMG NAME="world_map_LOWER_08" SRC="map-slices/world-map-LOWER_08.gif" WIDTH=110 HEIGHT=208 ALT=""></TD>
  95.         <TD>
  96.             <IMG SRC="map-slices/spacer.gif" WIDTH=1 HEIGHT=7 ALT=""></TD>
  97.     </TR>
  98.     <TR>
  99.         <TD>
  100.             <IMG NAME="world_map_LOWER_09" SRC="map-slices/world-map-LOWER_09.gif" WIDTH=104 HEIGHT=201 ALT=""></TD>
  101.         <TD>
  102.             <IMG SRC="map-slices/spacer.gif" WIDTH=1 HEIGHT=201 ALT=""></TD>
  103.     </TR>
  104. </TABLE>
  105. <!-- End ImageReady Slices -->
  106. </BODY>
  107. </HTML>
  108.  
Thanks in advance for any hints anyone might be able to provide.
Jan 8 '08 #1
5 3801
drhowarddrfine
7,435 Expert 4TB
I'm taking a couple of weeks off, as of 10 minutes ago, but the first thing you need to do is validate for your list of 182 html errors that need correcting. Use Firefox as your reference browser, never IE because it is old, buggy and non-standards compliant but its fixes are known.

After a quick scroll through that list, a lot of those errors are because xhtml requires tags to be in lower case, but you aren't serving xhtml so it's treated as html anyway.
Jan 8 '08 #2
table#TAG_Header img { display: block; } is indeed the solution. I would rename it table#ImageReady img { display: block; } and add it to your stylesheet.

However the reason it didn't work for you is because you don't have an id on your table. You see the person who came up with that solution probably didn't want to just make every img inside of table display as a block, so they added an id to the ImageReady table.

You will need to do the same thing to make that style apply to the appropriate table. So add id="ImageReady" to the table tag as follows:
<TABLE id="ImageReady" WIDTH=640 BORDER=0 CELLPADDING=0 CELLSPACING=0>

If you are having any trouble, let us know. I'm sure we can walk you through this simple CSS modification if you are new to CSS.
Jan 8 '08 #3
Thank you very much drhowarddrfine and astangeland. 182 errors! Guess the fact that the page actually rendered at all, only proves that maybe life did evolve from a series of accidents. :)

Thanks for the hint on using lower case tags.

Thanks astangeland for telling me how to configure the syntax, your solution works perfectly! It doesn't seem to matter where I insert the code into the CSS style sheet, correct?
Jan 9 '08 #4
.......... 182 errors! Guess the fact that the page actually rendered at all, only proves that maybe life did evolve from a series of accidents ..........
Not really, Extant graphical Browsers (Firefox, Opera, Safari, MSIE, et al) are configured to render "tag soup" markup, albeit often erratically). Refer to Web page Interoperability

James
Jan 9 '08 #5
Actually besides a missing type attribute on the javascript, and an align and a width attribute on the h1 and hr tags respectively it looks pretty good. Its just the ImageReady generated HTML code and you have a XHTML doctype. It all gets parsed as HTML either way, so it should be no suprise that it displays fine.
Jan 9 '08 #6

Sign in to post your reply or Sign up for a free account.

Similar topics

2
by: Fleemo | last post by:
I write most of my HTML by hand, but have been enjoying using ImageReady CS to generate complex layouts from my Photoshop layouts. Is ImageReady CS W3C-compliant? Is there a lot of tweaking that...
6
by: sipuebla | last post by:
In our web site we have a form that can not be filled using firefox, but can be filled using IE. The form is at: http://www.sipuebla.com/brochure.htm The html is as follows: <BODY...
87
by: expertware | last post by:
Dear friends, My name is Pamela, I know little about CSS, but I would like to ask a question I have an image on a web page within a css layer: <DIV ID=MyLayer STYLE = "position:...
14
by: expertware | last post by:
Ok! to avoid confusion I will start a new argument. Thanks!! FIREFOX 1.0.7 AND IE6 viewed through DATATIME: a summary REPORT ===============================================================...
4
by: jwwest | last post by:
Hello all, I've been building a simple site based on XML, XSL and CSS in order to help me learn those technologies better. However, building a tableless page is brand new to me so I've run into...
8
by: zeeeej | last post by:
Hi, I have a couple of images in my page header that I want to sit directly on top of each other. However, I'm getting a small gap between them when I view the page in Firefox and Safari. It...
10
daJunkCollector
by: daJunkCollector | last post by:
The following code renders perfect in IE, but Firefox adds immense padding in between my <tr> tags. I have tried applying <table cellpadding = 0 cellspacing = 0>. It decreases the extra space so...
7
by: amishguy | last post by:
Hello, I am having an issue with a site I'm creating right now. I have had this issue before and I would like to figure out what the solution is instead of using workarounds as I have in the...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.