Solved

[HTML/JavaScript/CSS] Table layout messed up

Posted on 2008-06-24
10
1,114 Views
Last Modified: 2012-05-05
I have this webpage:
http://www.jdsoft.eu/gameidea/

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:
http://www.jdsoft.eu/gameidea/map.html

I just had confirmed that it works on IE6.x
boe.png
0
Comment
Question by:JapyDooge
  • 5
  • 4
10 Comments
 
LVL 29

Expert Comment

by:TeRReF
Comment Utility
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)
0
 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
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?

0
 
LVL 6

Author Comment

by:JapyDooge
Comment Utility
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?
0
 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
sure --

padding:0px
margin:20px
or
padding:10px
margin:10 px
or
padding:20px
margin:0px

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.
0
 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
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.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 6

Author Comment

by:JapyDooge
Comment Utility
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.
0
 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
try cell padding instead.  It is easy to get the two flipped.
0
 
LVL 6

Author Comment

by:JapyDooge
Comment Utility
I'm sorry for my late answer, will try it today or tomorrow!
0
 
LVL 6

Author Comment

by:JapyDooge
Comment Utility
Tried both padding and margin, but cellspacing is the only option that does it for me now.

Any other ideas?
0
 
LVL 6

Accepted Solution

by:
JapyDooge earned 0 total points
Comment Utility
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

0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now