Solved

[HTML/JavaScript/CSS] Table layout messed up

Posted on 2008-06-24
10
1,120 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
10 Comments
 
LVL 29

Expert Comment

by:TeRReF
ID: 21859393
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
ID: 21860334
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
ID: 21860965
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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
LVL 44

Expert Comment

by:scrathcyboy
ID: 21861046
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
ID: 21861082
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
 
LVL 6

Author Comment

by:JapyDooge
ID: 21872506
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
ID: 21879972
try cell padding instead.  It is easy to get the two flipped.
0
 
LVL 6

Author Comment

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

Author Comment

by:JapyDooge
ID: 21977030
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
ID: 21977166
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

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

691 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