•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 429,912 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,408 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 725 | Replies: 2
![]() |
•
•
Join Date: Apr 2007
Posts: 2
Reputation:
Rep Power: 0
Solved Threads: 0
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.
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.
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.
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.
Daylight-saving time uses more gasoline
![]() |
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
- Browser Display Issue, Please Help (HTML and CSS)
- IE issue with floats (HTML and CSS)
- JTable Limitation or Not? (Java)
Other Threads in the HTML and CSS Forum
- Previous Thread: Problem with flash
- Next Thread: Open in window, not frame



Linear Mode