Problem with Website Header when viewed using Google Chrome

After downloading Google Chrome a couple of days ago, I learned that the
newsletter signup located on my website header, http://www.strongfamilies.us, shows text under-lapping the text boxes. This is not the case when viewing this website using FF or IE.

  1. How do I go about fixing this problem so that the header appears correctly in all popular browsers?

  2. Short of installing various browsers, is there any tool that I could use to make sure that this website appears correctly in most popular browsers?

Thanks.

I would suggest you start by validating your code. Your site sets browsers in quirks mode which is different rendering from each browser. Once your code is valid, the browsers will be in standards mode, and that may solve your problem.

I tend to build using Firefox with several add-on tools. One tool I use a log is HTML Validator. It is not always correct, but I can start at the top of my code fixing things and after I fix some things the others tend to be fixed. Things like having a complete Doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

will help the validators know how to check your site.

It is good to check your site using different browsers, but a tool you can use is http://browsershots.org/ where you enter your URL and they get a large assortment of views for you.

“2. Short of installing various browsers, is there any tool that I could use to make sure that this website appears correctly in most popular browsers?”

I tend to just go ahead and use a bunch of different browsers. I have ie.7 chrome, ff, and safari on my main machine, and other browsers on other machines.

A really hand thing is to get a bunch of browsers and their respective developer toolbars, as they are a really quick way to peer into your document and see what is causing things to show up where ever.

It might be cumbersome to setup that software, but really, it is the best way once it is all working, at least IMO.

I guess that I am confused. Using http://browsershots.org, I notice that this site is reporting that the header of my site looks appropriate in Chrome 9.0.597.98, the version that I recently installed. Why is this site reporting that the header looks appropriate yet the newsletter header text as viewed in the same Chrome version that I recently installed is under-lapping the text boxes? Should I disregard this issue as this site is reporting my site header as appropriate?

Well, it is broken in my version of chrome, and in your version of chrome. It is probably broken in Chrome.

You can make your own call about how it looks to whoever hits the site.

Like I said, I prefer to look at stuff as it is served to the various browsers on my computer. That is pretty much the only way to be sure-- as you are seeing browsershots might not be the most reliable thing.

I played around with your code, and got it to validate, and the problem is still there.

As I look at the situation, I think it is the text boxes that are wrong in Chrome. The two boxes drop down over the text that is below the line where they should be staying. The two Chrome boxes are a little longer than the Firefox boxes. It may have something to do with the table you are using. Try giving the boxes a little more room with some styling of the <td> code.

Thank you all so much for helping with this issue. This issue is now resolved!! However, I have another issue.

I tried using http://browsershots.org to determine how my site is viewed through various browsers but the results seemed inconsistent. Therefore, I decided to install the most popular browsers (IE, FF, Chrome, Opera, and Safari) on my computer to see how my website appears. My site appears correctly on all browsers except for Opera. For some reason, the text links located in the navigational bar to the left of each page are scrunched together without spaces in between leaving too much space between the live help button near the bottom and the end of the bar. Out of all 5 browsers, this problem only occurs in Opera. This isn’t a huge issue but it would be nice to have the site view consistently in each browser. Do you have any recommendations as to how I could fix this issue? Thanks.