Hi

 

Could anyone shed any light onto a little problem that I have. My contact form fields appear a lot bigger in Safari, where as in every other browsers it's displayed as I want.

 

link: My link

 

There is no padding and the font is only 12 or 14. I was going to oversize pad it but Safari spoilt that dream.

 

Thanks for any help.

It's something that both Safari, and Google Chrome do. I'm not sure what it is that causes it, but with a wordpress hack that targets chrome and safari, you can eliminate it by applying your own padding to those two browsers.

 

/* Safari and Chrome Hack */

@media screen and (-webkit-min-device-pixel-ratio:0)
{
.cssclass or #cssid
{
      padding : 0px; etc...
}
}

 

I used it in my latest project for a form so can vouch for it.

I'm surprised to see the input boxes with more height in Safari (I used Google Chrome which uses the same engine as Safari) but do you notice that the textarea box is the same height as in Firefox? It's only the input boxes.

 

I don't have this height problem with input boxes in Safari or Chrome so I'm wondering why you do.

 

I have noticed that using size=..." for width is not as precise as deleting size="..." and using a class for each input box with width: ??px; so the same would apply with height: ??px. I've just done a quick test by adding it like this in one of my forms:-

<li><input style="height: 40px;" type="text" name="name" size="30"/></li>

 

and Google Chrome and IE7 increase the input box height so you should be able to set the height you want and it should work in Safari.

I'm surprised to see the input boxes with more height in Safari (I used Google Chrome which uses the same engine as Safari) but do you notice that the textarea box is the same height as in Firefox? It's only the input boxes.

 

I don't have this height problem with input boxes in Safari or Chrome so I'm wondering why you do.

 

I have noticed that using size=..." for width is not as precise as deleting size="..." and using a class for each input box with width: ??px; so the same would apply with height: ??px. I've just done a quick test by adding it like this in one of my forms:-

<li><input style="height: 40px;" type="text" name="name" size="30"/></li>

 

and Google Chrome and IE7 increase the input box height so you should be able to set the height you want and it should work in Safari.

 

Hey thanks for that, works a treat! Should have thought of applying the class widths and heights to force it to display the same.