User Name Password Register
DaniWeb IT Discussion Community
All
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
Reply
Join Date: Apr 2007
Posts: 2
Reputation: skiopp is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
skiopp skiopp is offline Offline
Newbie Poster

Help Layout issue

  #1  
Apr 18th, 2007
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.
AddThis Social Bookmark Button
Reply With Quote  
Join Date: Jan 2007
Posts: 2,565
Reputation: MidiMagic is on a distinguished road 
Rep Power: 7
Solved Threads: 115
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Posting Maven

Re: Layout issue

  #2  
Apr 23rd, 2007
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.
Daylight-saving time uses more gasoline
Reply With Quote  
Join Date: Apr 2007
Posts: 2
Reputation: skiopp is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
skiopp skiopp is offline Offline
Newbie Poster

Re: Layout issue

  #3  
Apr 24th, 2007
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.
Reply With Quote  
Reply

Only community members can participate in forum threads. You must register or log in to contribute.

DaniWeb HTML and CSS Marketplace
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

Thread Tools Display Modes

Similar Threads
Other Threads in the HTML and CSS Forum

All times are GMT -4. The time now is 9:52 pm.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC