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

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

 
<HTML>

<HEAD>

<TITLE>world-map-LOWER</TITLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<!-- ImageReady Preload Script (world-map-LOWER.psd) -->

<SCRIPT TYPE="text/javascript">

<!--
 
function newImage(arg) {

    if (document.images) {

        rslt = new Image();

        rslt.src = arg;

        return rslt;

    }

}
 
function changeImages() {

    if (document.images && (preloadFlag == true)) {

        for (var i=0; i<changeImages.arguments.length; i+=2) {

            document[changeImages.arguments[i]].src = changeImages.arguments[i+1];

        }

    }

}
 
var preloadFlag = false;

function preloadImages() {

    if (document.images) {

        world_map_LOWER_01_USA_over = newImage("map-slices/world-map-LOWER_01-USA_over.gif");

        world_map_LOWER_01_China_over = newImage("map-slices/world-map-LOWER_01-China_ov.gif");

        world_map_LOWER_02_USA_over = newImage("map-slices/world-map-LOWER_02-USA_over.gif");

        China_over = newImage("map-slices/China-over.jpg");

        world_map_LOWER_04_China_over = newImage("map-slices/world-map-LOWER_04-China_ov.gif");

        world_map_LOWER_05_USA_over = newImage("map-slices/world-map-LOWER_05-USA_over.gif");

        USA_over = newImage("map-slices/USA-over.jpg");

        world_map_LOWER_07_USA_over = newImage("map-slices/world-map-LOWER_07-USA_over.gif");

        world_map_LOWER_07_China_over = newImage("map-slices/world-map-LOWER_07-China_ov.gif");

        world_map_LOWER_08_USA_over = newImage("map-slices/world-map-LOWER_08-USA_over.gif");

        world_map_LOWER_09_China_over = newImage("map-slices/world-map-LOWER_09-China_ov.gif");

        preloadFlag = true;

    }

}
 
// -->

</SCRIPT>

<!-- End Preload Script -->

</HEAD>

<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();">

<!-- ImageReady Slices (world-map-LOWER.psd) -->

<TABLE WIDTH=640 BORDER=0 CELLPADDING=0 CELLSPACING=0>

    <TR>

        <TD COLSPAN=5>

            <IMG NAME="world_map_LOWER_01" SRC="map-slices/world-map-LOWER_01.gif" WIDTH=640 HEIGHT=51 ALT=""></TD>

        <TD>

            <IMG SRC="map-slices/spacer.gif" WIDTH=1 HEIGHT=51 ALT=""></TD>

    </TR>

    <TR>

        <TD COLSPAN=3>

            <IMG NAME="world_map_LOWER_02" SRC="map-slices/world-map-LOWER_02.gif" WIDTH=416 HEIGHT=8 ALT=""></TD>

        <TD ROWSPAN=3>

            <A HREF="#"

                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');

return true;"

                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;"

                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;"

                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');

return true;">

                <IMG NAME="China" SRC="map-slices/China.jpg" WIDTH=104 HEIGHT=74 BORDER=0 ALT="China"></A></TD>

        <TD ROWSPAN=4>

            <IMG NAME="world_map_LOWER_04" SRC="map-slices/world-map-LOWER_04.gif" WIDTH=120 HEIGHT=275 ALT=""></TD>

        <TD>

            <IMG SRC="map-slices/spacer.gif" WIDTH=1 HEIGHT=8 ALT=""></TD>

    </TR>

    <TR>

        <TD ROWSPAN=3>

            <IMG NAME="world_map_LOWER_05" SRC="map-slices/world-map-LOWER_05.gif" WIDTH=95 HEIGHT=267 ALT=""></TD>

        <TD>

            <A HREF="#"

                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',

'world_map_LOWER_08', 'map-slices/world-map-LOWER_08-USA_over.gif'); return true;"

                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');

return true;"

                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');

return true;"

                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',

'world_map_LOWER_08', 'map-slices/world-map-LOWER_08-USA_over.gif'); return true;">

                <IMG NAME="USA" SRC="map-slices/USA.jpg" WIDTH=110 HEIGHT=59 BORDER=0 ALT="USA"></A></TD>

        <TD ROWSPAN=3>

            <IMG NAME="world_map_LOWER_07" SRC="map-slices/world-map-LOWER_07.gif" WIDTH=211 HEIGHT=267 ALT=""></TD>

        <TD>

            <IMG SRC="map-slices/spacer.gif" WIDTH=1 HEIGHT=59 ALT=""></TD>

    </TR>

    <TR>

        <TD ROWSPAN=2>

            <IMG NAME="world_map_LOWER_08" SRC="map-slices/world-map-LOWER_08.gif" WIDTH=110 HEIGHT=208 ALT=""></TD>

        <TD>

            <IMG SRC="map-slices/spacer.gif" WIDTH=1 HEIGHT=7 ALT=""></TD>

    </TR>

    <TR>

        <TD>

            <IMG NAME="world_map_LOWER_09" SRC="map-slices/world-map-LOWER_09.gif" WIDTH=104 HEIGHT=201 ALT=""></TD>

        <TD>

            <IMG SRC="map-slices/spacer.gif" WIDTH=1 HEIGHT=201 ALT=""></TD>

    </TR>

</TABLE>

<!-- End ImageReady Slices -->

</BODY>

</HTML>

Thanks in advance for any hints anyone might be able to provide.

Jan 8 '08 #1

Subscribe Post Reply

3771

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

astangeland

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

NuberSteve

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

jamesicus

.......... 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

astangeland

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

Similar topics

ImageReady and W3C-Compliance

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...

HTML / CSS

Form does not work in firefox, but works in IE

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...

Javascript

layer transparent Please HELP!!

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:...

HTML / CSS

FIREFOX 1.0.7 AND IE6 viewed through DATATIME: a summary REPORT

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 ===============================================================...

HTML / CSS

Problems with Nested Divs and Firefox

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...

HTML / CSS

Gap between images in Firefox

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...

HTML / CSS

Firefox tr padding nightmare

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...

HTML / CSS

Firefox destroying layout upon page load / reload fixes it

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...

PHP

Access Europe meeting on Wed 2 August - An Access Developer Guide to creating applications in Blazor

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...

Microsoft Access / VBA

How to Use CodiumAI's pr-agent?

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...

General

Development of Funny H5 Game - Toy Claw

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...

HTML / CSS

Access Europe meeting on Wed 6 Sept - Database Analyzer and other tools

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...

Microsoft Access / VBA

Cancel Print Action if Sub form has No Records

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...

Microsoft Access / VBA

To verify entry of a dropdown

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...

Microsoft Access / VBA

React to native button blinking effect

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=()=>{

Software Development

How does React native implement an English player?

by: lllomh | last post by:

How does React native implement an English player?

Mobile Development

Windows 11 and Access Combo Box Issue

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...

Microsoft Access / VBA