472,796 Members | 2,258 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,796 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, (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. <!--
  9. function newImage(arg) {
  10.     if (document.images) {
  11.         rslt = new Image();
  12.         rslt.src = arg;
  13.         return rslt;
  14.     }
  15. }
  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. }
  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. }
  43. // -->
  44. </SCRIPT>
  45. <!-- End Preload Script -->
  46. </HEAD>
  48. <!-- ImageReady Slices (world-map-LOWER.psd) -->
  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>
Thanks in advance for any hints anyone might be able to provide.
Jan 8 '08 #1
5 3771
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:

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

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

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...
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...
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:...
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 ===============================================================...
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...
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...
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...
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...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 2 August 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
by: erikbower65 | last post by:
Using CodiumAI's pr-agent is simple and powerful. Follow these steps: 1. Install CodiumAI CLI: Ensure Node.js is installed, then run 'npm install -g codiumai' in the terminal. 2. Connect to...
by: kcodez | last post by:
As a H5 game development enthusiast, I recently wrote a very interesting little game - Toy Claw ((http://claw.kjeek.com/))。Here I will summarize and share the development experience here, and hope it...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Sept 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
by: DJRhino1175 | last post by:
When I run this code I get an error, its Run-time error# 424 Object required...This is my first attempt at doing something like this. I test the entire code and it worked until I added this - If...
by: DJRhino | last post by:
Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer) If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _ 310030356 Or 310030359 Or 310030362 Or...
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
by: lllomh | last post by:
How does React native implement an English player?
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

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.