Extended Height issues with Mozilla

[Solomon]

O.k. guys and gals...

For some reason I can not get Netscape/Mozilla to stop expanding the height to an extreme that is surpasses the content. For instance my first <table> tag has a height="100%". This causes the sides of the site to fill the entire height of the browser in IE and Opera and even in Mozilla. But with Mozilla it goes one step further and it expands it to pass the entire site and allows you to keep scrolling.

If anyone out there can look at my (old school) HTML and give me some pointers to why it does this in Mozilla I would appreciate it. What I'm trying to do is get the left side navigation a full height even though the flash is 900px in height. Same goes for the right side. Trying to get the white and grey line to go full height of the browser.

Thanks,

Regards,
Dan Solomon Jr.
3DChipset.com

Here is the URL: http://www.3dchipset.com/about_us/index.php

[Paul O'B]

Hi,

I can't see what you mean exactly. In ie6 the height goes to 900px the size of your flash and in moz/firefox the height is also 900px and looks more or less the same as ie.

BTW tables are my achilles heel and I may not be able to help much as I don't use tables anymore .

Paul

[Solomon]

Hi,

I can't see what you mean exactly. In ie6 the height goes to 900px the size of your flash and in moz/firefox the height is also 900px and looks more or less the same as ie.

BTW tables are my achilles heel and I may not be able to help much as I don't use tables anymore .

Paul

Thanks for responding, I appreciate it. What I mean is that when you maximize the browser that page should fill the entire screen and have no vertical scroll bars unless you are 1024x768 or below. In Mozilla this works as well, but still allows you to scroll vertically up and down and shows you scrolling the whole website passed what it's supposed to be. If you load up IE and Opera it won't allow you to scroll passed the site. In Mozilla it allows you to scroll beyond the site limitations.

Thanks again for checking it...

Regards,
D. Solomon Jr.
3DChipset.com

[Paul O'B]

What I mean is that when you maximize the browser that page should fill the entire screen and have no vertical scroll bars unless you are 1024x768 or below

How can that be?

The flash movie is 900px high so you will get vertical scrollbars unless your screen height is greater than 900px height.

If I resize the flash movie to 700px then i get not vertical scrolbars in ie6, moz/firefox and Opera7.

In fact with the flash at 900px both firefox and ie6 look more or less identical and and both have vertical scrollbars.

Sorry to sound a bit thick but I'm just not getting this

Paul

[Solomon]

How can that be?

The flash movie is 900px high so you will get vertical scrollbars unless your screen height is greater than 900px height.

If I resize the flash movie to 700px then i get not vertical scrolbars in ie6, moz/firefox and Opera7.

In fact with the flash at 900px both firefox and ie6 look more or less identical and and both have vertical scrollbars.

Sorry to sound a bit thick but I'm just not getting this

Paul

Hehe... It's kinda hard to explain. In Mozilla you can scroll "forever" up and down. It's like their is no boundries. In IE and Opera you can't scroll pass a certain extent. Like you said. The Flash is 900px. If your screen resolution is 1280x1024 it should show the colors adjacent on the left and right side to fill the missing gap to fill the screen. Well on Mozilla it does this and then some. the "then some" means you can scroll passed the limitations of the site design. In IE and Mozilla you can't.

I took a snap shot to explain it better. Look at the scrollbars. See how you can still keep scrolling. In IE and Opera it doesn't do this. This is where I'm stumped... Seems 100% is tacking on the 100% + 900px flash movie.

http://www.3dchipset.com/temp/mozilla.gif

Regards,
D. Solomon Jr.
3DChipset.com

[Paul O'B]

Hi,

Right i've managed to make this happen now

When the page loads initially its fine. Its only when the screen is maximised or minimised that mozilla starts to expand further down. If you then refresh the page it loads correctly again.

I think the problem is that you have specified 100% height for all the inner tables and moz is adding some of these together.

I copied your code locally and took out all the 100% height from all the tables with the exception of the main table as below.

<!-- Left Flash Menu -->
<table height="100%" cellspacing="0" cellpadding="0" border="0">

This seems to cure the expansion problem but I'm not sure if this causes any bad side effects. It looked ok locally but I may have missed something.

I suggest you try this first and see how you get on. Mozilla is very picky about 100% height and doesn't like elements to be 100% of something that is also 100% of something else.

Hope this helps.

Paul

(of course I must point out that I'd usually do this without any tables at all lol )

[Solomon]

Hi,

Right i've managed to make this happen now

When the page loads initially its fine. Its only when the screen is maximised or minimised that mozilla starts to expand further down. If you then refresh the page it loads correctly again.

I think the problem is that you have specified 100% height for all the inner tables and moz is adding some of these together.

I copied your code locally and took out all the 100% height from all the tables with the exception of the main table as below.

<!-- Left Flash Menu -->
<table height="100%" cellspacing="0" cellpadding="0" border="0">

This seems to cure the expansion problem but I'm not sure if this causes any bad side effects. It looked ok locally but I may have missed something.

I suggest you try this first and see how you get on. Mozilla is very picky about 100% height and doesn't like elements to be 100% of something that is also 100% of something else.

Hope this helps.

Paul

(of course I must point out that I'd usually do this without any tables at all lol )

I actually tried that and it doesn't fill the left side underneath the 900px flash with the same color concept of the flash to the bottom of the screen. It stops right after the flash navigation. If I remove all height="100%" their are only 2 in the code and use CSS for the height of the site. Will it expand the left colors underneath the flash to look like one continous background?

P.S. What resolution is your desktop viewing?

Thanks for looking...

Regards,
D. Solomon Jr.
3DChipset.com

[Paul O'B]

If I remove all height="100%" their are only 2 in the code

I found 4 height="100%" in your code! (2 at the bottom and 1 in the middle and 1 at the top.)

What resolution is your desktop viewing?

I've wound it up to 1280x1024 to test this out.

I didn't notice any problems with the background locally but of course the flash wasn't playing.

Could you upload the page without the 3 other height="100%" so i can see what you are seeing. Leave only one 100% in the main table as mentioned earlier.

I'm just going offline now but I'll look again tomorrow.

paul

[Solomon]

I found 4 height="100%" in your code! (2 at the bottom and 1 in the middle and 1 at the top.)

I've wound it up to 1280x1024 to test this out.

I didn't notice any problems with the background locally but of course the flash wasn't playing.

Could you upload the page without the 3 other height="100%" so i can see what you are seeing. Leave only one 100% in the main table as mentioned earlier.

I'm just going offline now but I'll look again tomorrow.

paul

Thanks for taking the time to check this odd problem. I removed all height="100%" but the one on the top of the page. It's good to see you at 1280x1024 as well. When you load up the site without any <includes> like just offline. You noticed the left side's (gray/white/black/white) doesn't show the whole screen like the right sides (white/gray).

When you hit F11 to go full screen is when you see that after the 900px flash navigation that their is no continous back drop to go to the bottom of the screen. This can be noticed in the code:

<table width="210" cellspacing="0" cellpadding="0" border="0">
<tr>
<td bgcolor="#A4A4A4"><img src="../images/blank.gif" width="29" height="1"></td>
<td bgcolor="#ffffff"><img src="../images/blank.gif" width="2" height="1"></td>
<td bgcolor="#000000"><img src="../images/blank.gif" width="177" height="1"></td>
<td bgcolor="#ffffff"><img src="../images/blank.gif" width="2" height="1"></td>
</tr>
</table>

That's right after the flash navigation. That's their so it shows the full length of the color back drop of the navigation so it looks like it should be full screen. The right side has no problem. Just under the navigation is where I can't seem to extend the rest of the site.

Thanks for the help!

Regards,
D. Solomon Jr.
3DChipset.com

[Paul O'B]

Hi,

Well lets take another approach instead.

Get rid of that little table (in your above post) above altogether.

And use a repeating background gif behind the object instead.

e.g.

<table height="100%" cellspacing="0" cellpadding="0" border="0">
<tr valign="top"> 
	 <td width="210" style="background:url(http://www.pmob.co.uk/temp/images/chipsetbg.gif) repeat-y top left"> 
<table width="210" cellspacing="0" cellpadding="0" border="0">
		<tr> 
		 <td > <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...rsion=6,0,29,0" width="210" height="900">
			 <param name="movie" value="http://www.3dchipset.com/global/navi...AV.swf?COLOR=1">
			 <param name="quality" value="high">
			 <embed src="http://www.3dchipset.com/global/navi...AV.swf?COLOR=1" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="210" height="900"></embed> 
			</object> </td>
		</tr>
	 </table>
 
</td>
	<td width="100%"> 
	 <!-- Top UGO Link -->
	 <table width="100%" cellpadding="0" cellspacing="0" border="0">
		<tr valign="top"> 
		 <td bgcolor="#206FCF"><img src="http://www.3dchipset.com/images/blank.gif" width="1" height="30"></td>

The little table has been taken out and there is a repeating gif in the background instead. You can use my gif for testing to see if this gives you the desired result http://www.pmob.co.uk/temp/images/chipsetbg.gif

Let me know how you get on. If it works then the inline style should be put into a class for better coding practice.

Paul

[Solomon]

You know what that actually works. I didn't think you can use the:
style="background:url(http://www.pmob.co.uk/temp/images/chipsetbg.gif) repeat-y top left"

More then once... I have that fixed image for the background as you can see in my styles. Didn't know you can use multiple fixed backgrounds. I'll go ahead and use this for the site. Thanks again for your help! It's very very very appreciated.

I guess my next thing to do is try to convert the site into a CSS site. But not sure if that the site is capable of being in CSS with the way it's setup.

Thanks for your help!

Regards,
D. Solomon Jr.
3DChipset.com

[Solomon]

I'm now trying to incorporate it into the style sheet but I can't seem to get it to work... I'm using this:

<td width="210" class="nav_bak">

And this is in my style sheet. Am I doing it wrong?

.nav_back {
background: url(fo.gif);
repeat-y;
top left;
}

Regards,
D. Solomon Jr.
3DChipset.com

[Paul O'B]

Hi,

All on one line like this:

.nav_back {
background: url(fo.gif) repeat-y top left;
}

I guess my next thing to do is try to convert the site into a CSS site

Yep thats the next step and it would be a lot easier than tables (for me anyway) lol .

There shouldn't be much of a problem copying your site to css. A couple of simple things may change but overall it would be for the best.

Paul

[Solomon]

Thanks again man. It works. I appreciate your answering my questions! :-)

Regards,
D. Solomon Jr.
3DChipset.com