[HTML/JavaScript/CSS] Table layout messed up

I have this webpage:

That works great on Internet Explorer 7.x, you can rightclick 'buildings' and go there so it centers the page, you have 'bookmarks' of locations on the map, but for some reason it does'nt work on Mozilla FireFox and Opera. I have'nt tested it on Internet Explorer 6.x so if someone wants to do that, would be great.

The main question is, why is'nt it working? Can someone help me getting the same effect on Opera and FireFox 2.x and 3.x and Internet Explorer 6.0 as what i'm having on Internet Explorer 7.0?

The map is embedded in an iframe, path to that file is:

I just had confirmed that it works on IE6.x
Who is Participating?
JapyDoogeConnect With a Mentor Author Commented:
Fixed it myself.

border-spacing only works in FireFox when border-collapse: separate; is set.
In IE only cellspacing="20" works.

Check code below for the solution, now it works in both IE and FF.
<table id="map" border=0 cellspacing="20" style='border-spacing: 20px;'>

Open in new window

I see that you've duplicated the first table row in map.html. Maybe that has something to do with it?

Otherwise my guess is that it has something to do with absolute/ relative positioning not being handled properly by IE (FF and Opera do have a better track record in that perspective)
absolute positioning from the parent doesn't work in an iframe -- you have to use absolute positioning in the page that goes into the iframe.  That code should have align top left attributes set to that absolute positions will work.  This classic X-browser incompatibility with absolute / relative CSS positioning is one that almost all people struggle with.

If you made a series of tables with cell widths  to position them, you will find that all  browsers render it identially, with little effort on your part.  But since we are told that tables and cells for layout have been superseded by CSS, then you have to struggle with this positioning hassle.

Also, if you are doing plat design, you should seriously consider some CAD software to do this for you.  Some CAD programs are now workable on the web, although the field is struggling to come of age.  The best solution is some simple FREE CAD software to make the plat itself.  Then the background can be simply put as a -- background:green.gif  -- in the BODY CSS.  Put that in the page that goes into the iframe, and you have only 2 elements -- a background, and a image which is taken from a CAD diagram.  What could be simpler?

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

JapyDoogeAuthor Commented:
well in a later staduim the page is gonna be dynamically generated by php so a picture is'nt a solution.
The worst thing is the space between cells not working in FireFox and Opera, the second worse thing is the positioning not working correctly in FF but that has to do with the first thing, becouse the locations are wrong without those borders.

Opera is just acting wierd.

So, how to do the  cellspacing="20" in firefox? is there a working csss alternative?
sure --

margin:10 px

or some combination.  However, if you are using cellspacing = "20" in your code, you are using a table layout?  If so, you can easily fix the problem with that, otherwise, use the padding and margin in CSS.  Also set border:0px in to remove any cell borders and image borders.
BTW, if you are dynamically generating this in PHP which is going into a iframe, you echo all of  this CSS code in the PHP file, don't try to put it in the master page, it won't work.
JapyDoogeAuthor Commented:
well the iframe is also a php page so i offcourse put the css for that in there.

I'm using cellspacing = "20" indeed, but this does'nt work in firefox for some reason.
try cell padding instead.  It is easy to get the two flipped.
JapyDoogeAuthor Commented:
I'm sorry for my late answer, will try it today or tomorrow!
JapyDoogeAuthor Commented:
Tried both padding and margin, but cellspacing is the only option that does it for me now.

Any other ideas?
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.