Browser page differences between Chrome, Firefox and IE8

[EL34]

I just happened to check the new schematics index page in Chrome and found out that nothing was centered on the page.
It looked fine in IE8
Then I checked Firefox and nothing was centered.

I fixed the centering issue in Chrome and Firefox
Just for info, this is what the same screen looks like in Firefox, Chrome and IE8

I think Chrome has the best cell spacing in the tables
look how much larger IE8 spaces everything.
It would drive you nuts trying to design web pages that looked great on all 3 browsers.

[sluckey]

Maybe you could generate table code to hide the table borders and just let the buttons float on the page. Something like this...

<table border="0" width="1024" cellpadding="0" cellspacing="0">

[EL34]

I tried the tables and cells with no borders but it was hard to follow the rows with the eye because the buttons are all different widths and don't line up niceley in the columns.

I actually ended up using very light colors and dotted line styles to get a very subtle border.
You can still see it and it seems easy to follow with the eye.

I also fixed the table width at 900px and made the background clear

http://www.el34world.com/charts/Schematics1.php

[Shrapnel]

It would drive you nuts trying to design web pages that looked great on all 3 browsers.

That's only because the approaches are a bit different. Imagine tossing Safari and Opera in the mix. (I primarily use Opera myself, but use Firefox when it don't work in Opera... IE I save for either being lazy or visiting MS sites that refuse to work with anything else but IE.)

CSS is the easiest way to get results that come close to each other in the various browsers. Tables and all that are more widely interpreted within a browser than CSS is... not to mention how each browser handles layering. (Your javascript has to test for all the ways and act upon the one that is valid for that browser.) To see some of what I mean, check my biz site (http://www.babic.zxq.net) out using various browsers... IF they aren't all pretty close let me know (and which browsers used) as I will need to go and fix it.  The Lynx browser doesn't count.

[EL34]

I use style sheets for all my pages, but I still like to use tables sometimes for lining up data.

My whole parts catalog and most of my web site pages are done with .css.

Even the schematics pages has several div's and styles on it.

[PRR]

In IE7 I still have an unexplained line-break after each FORM button; see screen-snip below.

I spent 2 minutes pondering the code and don't see why, nor why we should care. (Even I will be off IE7 fairly soon.)

Some buttons render a stronger button-border than others. Only in IE7. Pfffft.

I also noted that in IE7 or FF or Chrome, Search "Ampeg" gives "Not found". It is not searching the FORM button text. Yeah, yeah, I can see it is alphabetical so if I can remember an alphabet I might find what I want. Even so, when lexdysic looking fails, it is nice to Search.

This may also affect search-engines, if you care. Ah, the brand sub-pages search fine.

You'd care if your STORE were the TOP of the page. I think that level of commercialism is entirely justified.

While being over-picky...... I don't know you need "Schematics" on every button. Also 900px wide is the limit of my tolerance. Omitting "Schematics" on all buttons would get more meat in less screen.

[PRR]

After Westbury, you seem to have two /TD tags and my tidy flags it as an error.

[EL34]

Thanks PRR, I'll check out the TD thing.

I added the word schmatic to get as many hits as possible, but it's overkill for sure.

I went from page 2 to page one in google in 3 days for the words "Tube amp schematics"
But the words Tube Amp Schematic come mostly from other pages that point to the Schematics page.

[EL34]

I fixed the error.
There was a missing </td> in the lower table.

Got rid of the word schematic on every button which let me add a 5th column
I set the table width to 780 for the 800 wide crowd.

[Shrapnel]

One can also use this link http://validator.w3.org/ to check that things are in order on a web page. There is also one for CSS. http://jigsaw.w3.org/css-validator/ that can help discover non-standard compliant code or errors. These are very handy links.

For example, The results for this post reply page:


Reports back 4 errors and no warnings in XHTML on two lines (one is because of a required ALT tag. The other line may require hunting before that line. to fix the three errors.)
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.el34world.com%2FForum%2Findex.php%3Faction%3Dpost%3Btopic%3D10361.0%3Bnum_replies%3D8&charset=%28detect+automatically%29&doctype=Inline&group=0

The CSS 2.1 checks out as no problems.
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.el34world.com%2FForum%2Findex.php%3Faction%3Dpost%3Btopic%3D10361.0%3Bnum_replies%3D8&profile=css21&usermedium=all&warning=1&lang=en

Oh yeah, probably already known, or doesn't come as a surprise, but IE still isn't compliant with the W3C specifications (IE6 was the worst, but they are moving in the right direction.)

[EL34]

I use Web Expression which does css validations as you go.
It's highlights bits as you type, or you can validate the whole page, based on what's in the doctype line.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

You can also tell WE to go validate a page.
It does several other validations and error checks also.

I ignore minor errors like ALT tags sometimes.