Backdrop dosn't adjust to page size in Mozilla/Netscape 1

[jd9419]

I created my first website using CSS recently using a template from Dreamweaver. The white backdrop adjusts to fit the size of each page in IE 6, but in Netscape / Mozilla it appears to be the same size on each page, for longer pages the main text runs over the footer and down the page on the grey background.

The site link is:

http://www.CallAladdins.com/default.html

Can anyone give me some advice or tips on what might be going on here?

Thanks in advance for your time and assistance!

 

[Vragabond]

Your class .feature has a fixed height of 200px. Since that is the only content within #content, that element is only 200px high. That causes your page not to extend gracefully. Delete the height property in .feature. Also, I suggest you change the position, from absolute to relative on #pagecell1. When possible, you should avoid absolute positioning. If that will break the code in IE, try adding the height like this:

* html #content .feature {
  height: 200px;
}

This will be ignored by other browsers.

 

[taylorantone]

And for the love of man, take off the forced window maximization. Recommend a maximized viewing setting, but don't force it.

Forcing the maximize, you get people like me at 16x12 who find the solid, huge, white page too much to read and I wouldn't stay on the site long enough to find out what it's all about.

Another suggestion is to decrease the width of the content on the page from the current 95.6% to maybe 80%.

 

[jd9419]

Thank you Vragabond! That worked on a majority of my pages.

My site is broken up into 5 major catagories or topics our business covers. Each has a folder with its own index file, so that we can give out links such as CallAladdins.com/Fire/ as opposed to a full link.

The fix worked on all of the very long pages except on 4 of the 5 index.html pages. Any suggestions as to why those pages are not adapting to the change

Example:

http://www.Callaladdins.com/carpet/index.html

vs

http://www.callaladdins.com/shared/certifications.html

both are long pages with different formats. Thank you again for you assistance!

 

[taylorantone]

Sometimes getting a div to extend below the content when the content length can vary is a pain.

Try adding this to your CSS doc:

.spacer
{
	clear: both;
	margin: 0;
	padding: 0;
	font-size: 1px;
}

Then, at the very end of the div that you would like to extend, add:

<div class="spacer"></div>

You can see what I'm talking about here:

http://www.donnaomar.com/main.shtml

 

[taylorantone]

Of course, anything you place at the very bottom and inside that div you want to extend down will do the trick--doesn't have to be a specific spacer div like the one above.

 

[philote]

Looks like you're using a separate stylesheet for the page that's not working. Try making the same changes to that other stylesheet per Vragabond's post.

Though unless you need to use only one stylesheet, the one in

http://www.callaladdins.com/css/aladdin.css

and don't use the one at

http://www.callaladdins.com/carpet/css/aladdin.css

. And you should probably use an absolute path to link to it ('/css/aladdin.css') instead of a relative one ('css/aladdin.css').

 

[jd9419]

Thanks you all for you help!!

I was making goofy beginer mistakes, the fix was more than one style sheet. I started with one then expiremented with subdomains which required individual CSS files, then I removed the subdomains and forgot about the extra CSS files.

Thank you all for your time and assistance, that would appear to be the fix to my problem!