Forum Moderators: not2easy
Here is the problem in a nutshell (but you're going to want to see the code).
In IE, the page looks fine. In FF 3.0.1, the center section wraps. I am placing my code in a table that the hosting company has dictacted (same page shell for all pages). I cannot change their table properties, but I do not know that they are the problem.
Their first 'table' is:
<table border="0" cellpadding="0" cellspacing="0" width="1000">
The <td> elements do not have height attributes, only rowspan. The <img> and <object> elements in the <td> elements do have height attributes.
Here are their next two, inside <td>:
<table width="100%" align="center"><tr><td>
<table width="820" border="0" cellspacing="0" cellpadding="0">
[edited by: SuzyUK at 9:07 pm (utc) on Oct. 16, 2008]
[edit reason] per Charter, no requests please [/edit]
In my experience no problem is "too unique" ;)
(well I remember only one here but that turned out to be an IE Bug and not a regular one, and it was a long time ago heh)
dummy data will do it, but if this makes it any easier for you to understand your own problem..
.. the table cell that you are allowed to enter your custom code into is your canvas, your "body" or "wrapper" element, if you like.. so you need to figure out exactly how wide that is so you can ensure your custom content is not too wide.
You would think with the table asd table cell dimensions defined that would be simple, but it's possibly not exactly what it says. What does happen with tables is that the Browser is allowed to interpret the table model very leniently in order to make it fit, also each browser has different ways that it handles table borders, cellspacing and cellpadding so the "actual" canvas size may not be quite as wide as you think
You perhaps will have to be less pixel perfect with your custom content if you're trying to get 2 floats to sit side by side for example..
and remember with tables that although one or more of the columns may have an explicit width applied there is no guarantee that the column is actually that wide because a table will adjust to fill its content, when a table adjusts one column to be wider than its given width it might reduce the width of the next one in order to keep the table at the correct width.. that's the thing with tables, they can be just too darned flexible ;)
so make up your table with dummy data with the exact same dimensions as your "shell" gives you then try your custom content (just the two columns, with dummy data) see if it's still happening
or
try some of the firefox web dev tools/dom inspector to see what the actual computed width of your "content area" cell is to see if it's enough to stop your columns wrapping..
or
simply try making one of your columns a few pixels narrower to see of that stops it happening
Where to go from here, forget their outer shell code for now then, make sure your code works independently. Start with your own blank canvas, but use their Doctype
wrap your code in an 820px wide "container" div temporarily to simulate the space you're allowed, place it in a separate static document does it work there (in FF)?
that would be the bare bones, what is their Doctype and what is your code only. and How much control over the CSS do you have?
#mycanvas {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
Thanks for the help, direction, and the time invested in helping with these problems.
