Firefox vs. Chrome & IE

[chrisandclem]

I have a problem. My website (downstay.net) has suddenly broke in IE and in Chrome (but it's still OK in firefox). The pages are not rendering correctly and I think it's a CSS problem but not sure. I changed nothing on the site when this broke. I know that doesn't help but it's the truth!

I have validated in both HTML 5 and CSS 3.

It's easiest just to look and see for yourself, but I'll try to explain:

• A part of the footer, an image, is displaying just below the header.
• The background color no longer extends all the way down the page.
• My "astore" (an inline frame containing Amazon.com products) no longer displays
• ALL the pages in my site are affected.
• Firefox still correctly renders all pages.

This really has me confounded as I did not make any changes to my site, yet all pages are affected! That's why it led me to believe it was something in my css file but I haven't been able to find anything.

Please somebody, I would appreciate it if you would take the time to look at my site and see for yourself. ANY comments or leads would be greatly appreciated!

Thanks in advance,
chrisandclem

[chrisandclem]

Also, interestingly, when I view the website on my home computer as "file:///var/www/positivepaws/index.html" it renders correctly. If I look at it as "localhost/positivepaws/index.html" it errs in the ways described above.

[danielshill]

Hi Chrisandclem,

I am using Google Chrome and all of the above displays as intended. It's all working

Have you tried clearing your cache?

[chrisandclem]

Thanks danielshill for your quick reply. I did try clearing my cache after you suggested it, but to no avail.

I have put up a couple of png files to clarify what it should and shouldn't look like. They are here:

http://downstay.net/images/yes.PNG
http://downstay.net/images/no.PNG

The first url is what it is supposed to look like. The second obviously is the messed up rendering.

Also, check out http://downstay.net/privates.html. You will see what I mean about the background color not going all the way down.

[chrisandclem]

I temporarily fixed it by removing the bottom-of-the-page image that was floating up to below my masthead.

I also added overflow:auto to the outer wrapper and that fixed the problem of the background extending all the way down.

These are just temporary fixes though since I no longer have a footer or the image that was supposed to be an "endcap" to the bottom of the content area.

[Major Payne]

You are using an HTML 5 document type. HTML 5 has not been released and many browsers do not support a lot of the features that will be available. The same for CSS 3.

CSS Errprs Ignore any CSS 3 rules flagged.

HTML errors

Tableless Web Design: http://en.wikipedia.org/wiki/Tableless_web_design
Why tables for layout is stupid: http://www.hotdesign.com/seybold/
How to convert manually your HTML tables to CSS: http://www.table2css.com/articles/ho...tml-tables-css
Basic Tables [Bad Examples!]: http://www.yourhtmlsource.com/tables/basictables.html
Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Ima...ysterious_Gaps

[chrisandclem]

Thanks for the resources, I'll definitely check them all out!

[Major Payne]

You're very welcome.

[net4rx]

there are many websites which doesn't support in IE and Google Chrome Firefox is the best browser for work.

[chrisandclem]

Thanks again Major Payne, the resources you gave me must have helped spark something in my mind. There were lots of little problems, but the main one (the one that caused the footer to float up under the masthead) was due to a misplaced </div>. I didn't encapsulate the whole area I needed to. My "contentarea" contained "leftpart" and "rightpart", two columns, then came the footer. I was ending "contentarea" after the footer, when it should have been after leftpart and "rightpart", before footer. After I relocated it, the footer went right where it was supposed to. I tried it in Chrome, IE, Opera, and Firefox. Worked in all of them!

Thanks to all!