Firefox render gaps in ImageReady generated Slices

2 New Member

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.ht ml) 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 Reply

3837

drhowarddrfine

7,435

Recognized Expert Expert

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

New Member

table#TAG_Heade r img { display: block; } is indeed the solution. I would rename it table#ImageRead y 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

New Member

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

New Member

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

James

Jan 9 '08 #5

astangeland

New Member

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

1632

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 must be done to the ImageReady-generated HTML to make it W3C-compliant? Thanks. -F

HTML / CSS

5342

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 BGCOLOR=#5684B6 link="#5684B6" vlink="#5684B6" alink="#5684B6" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 onLoad="MM_preloadImages('brochure/view_2.gif','brochure/download_2.gif')">

Javascript

9615

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: absolute;top:68px; left:563px; width:640px;height:480px;"> <IMG src="ReportImageBox_12.54.52.png" width=640 height=480></IMG>

HTML / CSS

2326

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 =============================================================== by Pamela Datatime Team -----------------

HTML / CSS

2499

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 a large amount of problems. The biggest seems that Firefox wants to put a line in between two of my nested tags for some reason. However, this is only in the XML version. To design the page, I first made an HTML version, then I created a XSL...

HTML / CSS

6103

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 looks OK in IE7 and Opera. You can see the problem at: http://tag.dreamhosters.com/public_html/phpbb3/portal.php I created the header and rollover buttons in Adobe ImageReady. As you probably know, ImageReady breaks the original image into smaller

HTML / CSS

7037

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 slightly its not even worth it. As a matter of fact, it closes the nice gaps in IE more than it does the large unwanted firefox gaps. There has to be a way to fix this--there are so many people who are diehard slap happy about firefox I find it...

HTML / CSS

2205

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 past. A little background: I have a php based site. The layout is a table based layout that was generated by slicing a large image. Most of the pages that I have problems with use PHP includes which I think has something to do with the issue.

PHP

8839

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

9584

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

9397

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

6810

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6081

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

4893

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

3327

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

2807

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2226

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General