Topic: IE vs Firefox

I built a site while viewing it in IE. Now that I look at it in Firefox, the page seems to dance around from page to page. By dancing around I mean that the table is not centered and seems to shift a bit. I already know what the issue is in the Samples and News sections as they are all written in PHP. However the rest of the site is all basic HTML . If any of y'all want to peek in at the site and shoot out some ideas as to where the problem is, I would really appreciate your help.

The site is http://www.connartistmusicgroup.com

The pages dance a bit for me and FireFox 1.0. But that's not a surprise with the HTML markup. The main layout markup is not the same on every pages. Compare the first tags of the "Services" and "Credits". The markup is far from being valid

Hum... you're going to release a table based design ? with a javascript based navigation ?
You should try to browse the site without the images and/or JavaScript.

First of all, you should re-work the HTML markup and make it validate, then you could really care about browser rendering differences. And by cleverly using (X)HTML+CSS your pages would be, from what I've seen of them, 2-4 times smaller than they are now.

It seems to jump yes.

Credits jump to the left, probably to accomodate the scrollbar, though there might be something else going on there that I don't see. (Changed the height of a nother content block on one of the pages without scrollbar, it jumped similarly to Credits. Scrollbar problem it is.)


Run Samples and News through HTML Tidy or the W3C Validator - it'll find a heap of things to correct. Come back when it is no longer ill formed. (I personally couldn't care less about it being valid, but you have nesting problems and such to take care of.)


However, giving all the pages and not just the problem pages a run through Tidy to clean them up would do marvels for the code quality.
--
var Liorean = {
prototype: JavaScriptGuru.prototype,
abode: "http://liorean.web-graphics.com/",
profile: "http://codingforums.com/member.php?u=5798"};

(Edited by liorean on 11-15-2004 23:38)

Services and Credits do not dance for me, however About Us and Services does do a bit of the jitter bug.

Actually, for me, the pages dance and forms 3 groups :

• Home, About us, Services, and Contact us
• Samples and News
• Credits

When I talked about layout markup differences I espcially talked about the position of the CENTER tag. Either before the TABLE or between the TABLE and the TR.

Wavmixer:

- All of the pages jump to the left if you make them have a vertical scrollbar by either adding height to the contents or by resizing the window vertically. Try it yourself, I find it a consistent behavior. The easy fix to this is to force scrollbars.

- Samples and News - you said you knew what the problem was. Fix it.

- About Us has 157-11-532 widths for the table, Services has 157-11-510, Contact Us has 102-12-548. I assume these aren't consistent for the others either. They should be. Also, if you want consistent table rendering, look into [CSS] fixed table layout and the use of [HTML] colgroup/col elements.

On the whole, I agree with poi though - converting to CSS would reduce it in disk size, make it more accessible, and make an overall easier to maintain site. That design is like made for CSS layout.

--
var Liorean = {
prototype: XHTMLGuru.prototype,
abode: "http://liorean.web-graphics.com/",
profile: "http://codingforums.com/member.php?u=5798"};

Thank you for the input. Both Samples and News are highly tweaked snippits from phpBB. My client wanted the ability to upload files in the Samples section as well as modify the News section at his leisure. This was the best way I knew how to make this happen. I wouldn't have thought that there would be so many errors with the code when I check the valadation. Could the problem be with not having the correct document type for the php generated pages?

I agree it does need to go with a CSS layout. When we were in the still playing with the design and layout, I was trying out several different ideas and never made the style sheets. Then when I had an ok on the final design, I just used the mock up page as a template and filled in the blanks. I'll go back and clean this up a bit. Thanks again for the input.

As I said, run it through Tidy. It'll tell you how it should be to work. If you want to do it the in browser way, there's an extension for Firefox called "Html Validator (based on Tidy)" that ads Tidy to your view-source view.

--
var Liorean = {
prototype: ProgrammingTheoryGuru.prototype,
abode: "http://liorean.web-graphics.com/",
profile: "http://codingforums.com/member.php?u=5798"};

(Edited by liorean on 11-16-2004 00:07)

This will force the scroll bars in Firefox - I'm not one for preaching validation . I placed it in my site style sheet.

html {
overflow: scroll;
}

I have the same problem and this fixed it to an exceptable level. With only 4.5% of the market (currently) I'm not too worried about Firefox yet but this was an easy solution to 60 percent of my pages doing the mamba.

Reguards,

--
Frosty

"It's kinda fun to do the impossible" - Walt Disney.

(Edited by frostywd on 11-30-2004 06:45)