Problem with Website Header when viewed using Google Chrome

[MarkStrobel3367]

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.

 

[bcee]

#newsletter p {
position: relative;
z-index: 99;
margin-top: 10px;
}

Also writing valid code will make sure things like this don't happen.

 

[ronaldroe]

Also writing valid code will make sure things like this don't happen.

Ditto.

That said, using Chrome's awesome Dev Tools, if you remove the display:inline; (spans are inline anyway) font-weight:bold; and float:left; from the class .label, it pushes everything up where it should be...in Chrome.

 

[MarkStrobel3367]

Thank you so much for your response. Where should I place this code in layout.css? Should this code replace a current code or should this code be included with the rest of the codes? Presently, there are several codes under newsletter:

/************************** NEWSLETTER ************************/
#newsletter {
width: 580px;
background-repeat:no-repeat;
height: 180px;
top: 110;
left: 420;
margin: 10px;
position: absolute;
}
#newsletter .title {
font-size: 17px;
color: #333536;
position: absolute;
top: 10px;
left: 50px;
}
#newsletter .icon {
margin: 2px;
background-image: url('../images/layout/newsletter-email-icon.gif');
background-repeat: no-repeat;
height: 39px;
width: 39px;
display: block;
position: absolute;
top: 0px;
left: 0px;
}
#newsletter form {
position: absolute;
display: block;
top: 25px;
left: 40;
padding: 4px;
}
#newsletter form input[type="text"] {
border: solid 1px #666;
border-collapse: collapse;
}
#newsletter form .label {
width: 45px;
color: #666;
font-weight: bold;
display: inline;
float: left;
}
#newsletter form .input {
display: inline;
float: right;
}
#newsletter form .submit {
}
#newsletter form .form_item {
width: 200px;
height: 20px;
padding: 2px;
position: relative;
}
#newsletter p {
font-family: Arial, sans-serif;
font-size: 10px;
margin: 59px 15px 0 53px;

Thanks. Unfortunately, I didn't write the code for this site. I hired someone to do it.

 

[ronaldroe]

It should be ok if you just add it to the end.

BTW, on your second question in your first post, try browsershots.org.

 

[MarkStrobel3367]

Thank you for your response. Per your instructions, I placed this code at the bottom of the other codes listed under Newsletter. The problem remained unchanged in Chrome. In addition, the text in question in the header was displaced when viewing the site using FF. Do you have any other suggestions? Thanks.

 

[MarkStrobel3367]

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?

 

[ronaldroe]

I think I may have misunderstood you before. If there was existing CSS with the same selectors, you should overwrite the old. I figured you were adding new lines of CSS.

 

[MarkStrobel3367]

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.