Aligment differences between firefox and chrome

I’m quite certain I have never experienced so much difference between Firefox and Chrome. Generally I can assume that where I put something in Firefox it will show up in the same place in Chrome. That does not seem to be the case here. I found myself having to use pixels to adjust font size as opposed to using percentages. 110% in Firefox is different than 110% in Chrome.

The biggest problem I am having now is that I am using absolute position and it is a few pixels off in Chrome, or Firefox, depending on how you want to look at it. I generally use Firefox as my reference so I was surprised to find out things were different when I look at it in Chrome.

So currently I have my CSS adjusted to show the small (down pointing) Chevron in the bottom right corner correctly. However if you look at the same page in Firefox you will see it is slightly off.

Also I have noticed that the word MAP seems bolder than the rest of the words on the page in Chrome. Cant figure this one out either.

Would love to know how to fix this.

http://splitlightdesigns.com/oxbridge/current-projects/
UN - oxbridge
PW - oxy510

Many thanks,
Houston

htown,

Have you found and fixed the problems you reported seeing on this page? To me, they look exactly the same in FF and Chrome except for very minor differences in the rendering of the fonts. The bottom chevron looks like it could benefit from .second-border:after {bottom: 3px;} instead of 5px, but that’s all I see.

Personally, I think your choice of font-sizes is too small for many users with modern higher rez screens and the gray lacks adequate contrast against the background color. It begs users to zoom the page larger to read the fine print. IMHO, that’s a design fail.

Ronpat,

Thaks for taking a look. I have not found a solution but I am playing with it to make it look decent in Chrome. The few pixels that you are talking about is the world to my client. I am aware of the font sizes and for that matter the whole site. I have mentioned to them the shortcomings of the design but I have no final decision. All i can do is make it work and they will learn the hard way.

I am still bafelled as what to do about these differences between the two. Now I am seeing that even though I have css that says no radius is to put put on the form boxes, the drop down on the contact us page in Chrome has rounded edges. Arghhhhh. WHY WHY WHY??? Also the spacing is not consistent. never had this problem and it is driving me crazy.

Many thanks,
Houston

Maybe you should post a screen shot of the problem that you see… the good and the not-so-good side-by-side. Chrome and FF look identical to me.

The difference in the font rendering that I mentioned is not really “pixels” that one can change. Firefox uses a different algorithm to calculate the spacing between characters in proportional fonts that causes a pixel of difference between some characters, but not most. In the end, a sentence generally remains exactly the same length. It’s nothing to be excited about.

Have you verified that the user settings for font size in the browsers and zoom level are the same in FF and Chrome?

As an example, here is the Contact us page.

In my Firefox and Chrome (mac and PC) those bottom arrow pieces are both misplaced and should be bottom:3px and not bottom:5px. The browsers are showing the same though.

the drop down on the contact us page in Chrome has rounded edges. Arghhhhh. WHY WHY WHY??

In Chrome mac you can’t remove those corners unless you use -webkit-appearance:none but then you lose the dropdown arrow as well so is not much use. Form elements still cannot be styled the same cross browser.