Layout issue

[skiopp]

For starters, I'm a novice, so please forgive me for not being fully versed in all pertinent terminology.
For some of the pages on my website I'm having a compatibility issue w/ Mozilla Browsers run on PCs.
For example with my page
http://www.skiopp.com/videos_9.htm
I have seperated the left content box into 3 diferent table rows <tr>, each with only one table data cell <td>.
The top one simply has text, the middle has an embedded quicktime window, and the bottom has more text, serving as an area to add a caption for the video above.
For this entire left content box I want to maintain the dimensions 494x370.
With most browser configurations (especially IE) this seems to be giving me the appearance that I'm looking for. But, I know that w/ Mozilla run on a PC the content <td> for the three table rows is overflowing causing the background images for both left and right content boxes to be repeated. Hence, the 370px height of these boxes is not being maintained.
I would greatly appreciate if someone could look over the code for this page and lend me any suggestions.
Below is the CSS associated with this page:

/* CSS Document */
body {background-color: #333333}
td.bottab {background-color:#CCCCCC; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; color:#666666}
td.topa {color:#FFFFFF; font-family:impact; font-size:200%}
td.toptab {color:#666666; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12pt; background-color:#CCCCCC}
td.bota {font-family:Arial, Helvetica, sans-serif; font-size:9px; color:#FFFFFF}
td.m {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:35px; color:#FFFFFF}
td.npad {font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:11px; }
td.n {font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:11px}
td.name {margin-bottom:2px}
a.bl {color:#FFFF33; cursor:pointer; text-decoration:none}
a.nobl {cursor:pointer; color:#FFFFFF; text-decoration:none}
a.gry {cursor:pointer; color:#666666; text-decoration:none}
h1 {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:18px; color:#FFFFFF}
h2 {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:60px; color:#FFFFFF}
h3 {margin-left:10px; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:11px}
h4 {margin-top:4px;}
h5 {color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; margin:0px}
h6 {color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:10px; margin:0px}
p {color:#333333}
p.w {color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; }

thank you so much for your time.

[MidiMagic]

It works fine for me. I have Firefox 2.0.

One thing you have to be aware of is how the browser constructs a box object (such as a td):

- Some browsers include the margins, border, and padding of a box object INSIDE the specified dimesions of the box. So the actual contents of the box must be smaller.

- Other browsers place the margins, border, and padding of a box object OUTSIDE the specified dimesions of the box. So the actual contents of the box fit the dimensions, but the box object as a whole takes up more space than tyhe specified dimensions.

The hard part is making anything with declared absolute dimensions work the same on all browsers. But there is a trick to it.

Suggestion 1: Make everything relative. DON'T specify absolute pixel sizes, but let the contents or surroundings of a box determine its size.

Suggestion 2: You can shrink it down to no difference by setting the margins, borders, poaddings, and cellspacings to zero.

Suggestion 3: Nest several boxes. Set them up with the following properties:

- The innermost box contains what you want in the box. It has zero settings on the surrounding attributes listed above. You can define the size of this box.

- The box containing the innermost box is otherwise empty, and has margins, borders, and/or paddings set to the sizes wanted. Note that, since the size of this box is not defined, it doesn't matter if the surrounding elements are inside or outside the box. It will be the same size either way.

- An outermost box with zero settings on the surrounding elements can contain the entire set of boxes listed above. It can have its settings defined instead of defining the settings of the innermost box, and it won't change size with different browsers.

[skiopp]

midimagic,
thank you very much for the suggestions. I greatly appreciate your taking the time to address my predicament. I will work on putting your advice into practice and go from there.