Anyone understand this small css problem?

[Cunniffe66_]

TP may not be the best place to ask this question but I thought i'd ask quickly before making a one-stop account on a web-dev forum.

My problem is that in Google Chrome, 20pixels seems to mean 22pixels..
I have set absolute pixel sixes for my elements in a contact form and firefox displays it perfectly however chrome does not.

Here is an image to help explain my problem.

Any idea what is causing this problem?

Cheers, Steven.

 

[Crazy Dino]

Browsers output a website differently...

All I can help with im afraid.

 

[King_Boru]

I'd probably blame the min-height & max-height attributes. Do you need these?

 

[Cunniffe66_]

I'd probably blame the min-height & max-height attributes. Do you need these?

Well I put those in to combat the problem yet it's still there.
I also tried this hack

max-height: 20px;
height:auto !important;
height: 20px;

Which is supposed to get 'round an I.e. Flaw but that didnt work either :\.

It's as though chrome displays things slightly bigger but the strange thing is the overall box is the same size in both. Therefore it's a problem specific to textfields..

 

[CraigyBoy86]

There is a feature of Google Chrome that allows you to resize any text box. For example:

[YOUTUBE]<object width="640" height="505"><param name="movie" value="http://www.youtube.com/v/dCydEtBNrsE&hl=en_GB&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/dCydEtBNrsE&hl=en_GB&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="505"></embed></object>[/YOUTUBE]

Clicky

Might be something to do with this? :shrug:

 

[King_Boru]

There is a feature of Google Chrome that allows you to resize any text box. For example:

Might be something to do with this? :shrug:

Safari does it and has been for quite some time I think. I don't think this would effect it.

I'm still trying to figure this one out.

 

[flicker]

I'm not near a computer at the minute so can't really have a good look at this, but some browsers put the border on the inside of the container and some on the outside, which could be adding your 2 pixels. The best thing to do would be to set the padding to 0 on your inputs and remove the Borders. If they are the same then, work up from there.

 

[Cunniffe66_]

Thanks for all the input guys, much appreciated.

CraigyBoy, text-areas are resizeable but not text-fields so I can't see that being the problem though i'll check the video out because It could be usefull.

Flicker, thanks i'll try that and get back to you.

 

[Cunniffe66_]

Wow, I simply entered "padding: 0px" in the CSS for both the text-fields (singleline) and text-area (multiline) and the problem has been solved

Thank you very much Flicker, it's displaying perfectly in chrome now

 

[XD2]

Probably a bit late to chime in as you have solved it but you should start all style sheets with this code:

* {padding:0;margin:0;}

This is like resetting all the different ways browsers treat these attributes and gives it an even playing field for everything you do afterwards.

It also doesn't hurt to add:

img {vertical-align: text-bottom;}

As this stops that annoying space you get under images sometimes that puts your margins out.

Again sorry it is late but hope it helps someone.

 

[sitemaster]

universal reset

 

[Cunniffe66_]

Probably a bit late to chime in as you have solved it but you should start all style sheets with this code:

* {padding:0;margin:0;}

This is like resetting all the different ways browsers treat these attributes and gives it an even playing field for everything you do afterwards.

It also doesn't hurt to add:

img {vertical-align: text-bottom;}

As this stops that annoying space you get under images sometimes that puts your margins out.

Again sorry it is late but hope it helps someone.

Thanks for the tip.
I started with a CSS "ready-meal" sheet on this site which has a universal reset section at the top however it doesn't have any reference to form elements so that's something I'll be able to spot in the future.

Thanks for the help everybody.