Cross-browser with site CSS

HTML & CSS
1

Hello everyone,

I am running into an CSS issue with my very first site design (http://societybridge.com/) and can’t figure out what I am doing wrong. The site is being rendered well with Firefox (v3.6.13), but the sign up form is not looking so hot on Chrome (v9.0.597.94) or Safari (v5.0.3) on my Mac. I am at my wits end so any advice or feedback regarding this issue would be greatly appreciated.

Thanks again!

View via Firefox

View via Chrome/Safari

2

Hi,

Welcome to Sitepoint :slight_smile:

You’ll have to be more specific with your question and point directly to the element/problem in question as I see loads of differences between those images but most are just the usual browser form control differences.

If you are talking about the extra shadow on #global_content in webkit then that’s because you have applied a page shadow to it here:


#global_content {
  -webkit-box-shadow:#959595 0 1px 18px;
}

Just remove that box-shadow rule if the shadow was the problem.

If that wasn’t what you meant then please clarify where we should look :slight_smile:

3

Thanks for the quick response Paul O’B! The section I am having problems with is the fields on the form. The align the way I want them to on Firefox, but that is not the case on Chrome & Safari. A good example of this in the above pics are the “password again” & “language” fields. The strange thing is they render just fine in all 3 browsers on Windows-based pc’s, but I get this issue on my Mac. What do you think?

Thanks again!

4

Hi,

You see I didn’t even notice the language field had dropped until you pointed it out :slight_smile:

It’s fine on the pc anyway but I can see it’s dropped in Safari on the mac. It looks like the float is snagging on the element before so you need to make sure the first element clears the one above.


#passconf-wrapper{clear:left}

In different browsers some form elements are bigger and smaller so you must ensure that that each row begins with the element on a new line and not snag so make sure the first one is cleared. Older IE will still have problems with this approach and when you float pairs of items you should contain each left and right float in a parent element which is then cleared before a new row starts and will avoid snagging.

BTW There’s too many divs in that form code as you don’t need to wrap the labels and the inputs each in divs. You can wrap each pair if needed but no need to wrap the div and the label unless you are applying multiple images to them etc.

You would have been better off using display:inline-block on the inputs and avoid the float snagging issues but you would need a different structure so probably too late to change now.

You also seem to be doing something weird with the labels and placing them over the inputs anyway. That seems to make the input response rather sluggish and I guess some older browsers may have trouble with you clicking them.

I would have placed the labels off screen and then used the value attribute of the input to supply the hint text (which seems to be what you are doing with the labels).:slight_smile: