Formatting form elements with CSS - size?

[MasterKaos]

Ok i'm trying to create a customized text input and submit button on the front page of my site, to access the search function. I have been able to set the background colour and the border colour and border style without any trouble.

But my problem is getting the size right. I want the input and the submit button to be the exact same height and width, so they align correctly when one is placed above the other.

input.search{
	font-size : 10px;
	line-height : 10px;
	height : 16px;
	width: 84px;
	background-color :#333366;
	color : White;
	border-width : 1px;
	border : 1px solid;
	border-color : White White White White;
}

So i used the same class (above) for both the text input and the submit button. Now in IE5, Netscape 6.2 and Opera 7.2 they both display as identical height and width.

However in IE6 and FireFox 0.8 the text input is displayed about 2 pixels wider and taller than the submit button.

Why is this so? They are both the same class, and both have the same width and height.

Is there anyway i can use CSS to display the text input and submit button as the same width and height across the above mentioned browsers? I don't mind if the sizes vary slightly between browsers but they need to be consistent! I mean if the text input is larger than the submit button should be larger too!

----------------------------------------------------------------------------
The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.

 

[BillyRayPreachersSon]

You won't manage this with 1 set of CSS and get the button and input box the same width or height in all browsers. You need to build room for error into your design.

Sorry to break it to you the hard way ;o)

Dan

 

[MasterKaos]

BillyRay,

Yes i thought that might be the case. I just don't get how IE can go from 84 px = 84px in version 5 and earlier, then all of a sudden in version 6 decide that 84px = 87px, but only in certain elements. Oh Well. Micro$oft works in mysterious ways.

It's times like this i'm glad i'm writing a pretty much static site in PHP. I could just use PHP to point to a different CSS file depending on the browser that requests it. Would this be a typcial way of supporting multiple CSS files, or is there a 'better' way?

----------------------------------------------------------------------------
The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.

 

[Foamcow]

You could try using the "box model hack" (

http://www.tantek.com/CSS/Examples/boxmodelhack.html)

and put the IE specific stuff after the "hack

 

[vongrunt]

This will help to explain:

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

Yup, Mircosoft went W3C. Many people reported similar "bugs" in IE6, especially on CSS-heavy sites with buncha DIV's instead of tables.

 

[ChrisHunt]

Could it be that IE6 and Firefox are adding some [tt]padding[/tt] to text input boxes? If so, you could try adding this line to your CSS:

input.search{
    font-size : 10px;
    line-height : 10px;
    height : 16px;
    width: 84px;
    [COLOR=red]padding: 0px;[/color]
    background-color :#333366;
    color : White;
    border-width : 1px;
    border : 1px solid;
    border-color : White White White White;
}

That said, the aim of getting pixel-perfect identical pages from all browsers (even if you ignore ancient monsters like NS4) is probably an impossible dream. Sometimes you have to just allow a little slack for browser differences.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[MasterKaos]

ok, i accept that i will have to use PHP to load multiple CSS files for cross browser compatibility. But i'm still curious why?

Chris says it's an impossible dream to create pixel perfect pages, and i understand, but i just wnat shape perfect, not pixel perfect.

Vongrunt says Microsoft has gone W3C, and yes that link seems to explain some of whats happening. In non-W3C compliant mode the border is part of the height / width, in W3C compliant mode the border is not part of the height and width. I just don't understand why this only applies to certain elements? Is it the W3C's recommendation that text inputs don't count border width / height but that submit buttons do? Or is this a quirk where browsers have gone compliant on certain elements and not others?

By the way i have tried padding but it doesn't work, the problem is with the height / width of the actual border.

----------------------------------------------------------------------------
The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.