Browser incompatibility

tiwal

Hello I know there are a lot of incompatibilties between browsers , but what I am axperiencing now seems quite paradoxical. I have a small web page with the following simple html in it : label {width:240px;background-color:aqua} input:text {width:70px}

Stato servizio
Messaggio di benvenuto singolo Tipo messaggio di benvenuto singolo

I expect labels and inputs to appear exactly formatted in columns and having the same width ..... This effectively happens, but only in IE10...If I use Chrome (29) or Firefox (10) every label has the size of its contents,no matter what is specified in the tag ... only the background color seems to correctly follow the style directive. Is there a way to make browsers follow standard html, and to work around eventual incompatibilities?</x-turndown>

Richard Deeming

There are two problems with your styles:

By default, a <label> is an inline element, and width doesn't apply to inline elements;
input:text is a jQuery selector, not a CSS selector;

Try:

label
{
width:240px;
display: inline-block;
background-color:aqua
}
input[type=text]
{
width:70px
}

Example: http://jsfiddle.net/tJFUK/[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

tiwal

Ok thank you, I followed your suggestion and had a big improvement, even though there are still differences since the input object seems to be much smaller in size on Chrome and Firefox than on IE .... is it possible to fix this problem too ?

Richard Deeming

There's a lot of differences between the default rendering in different browsers. You'll need a browser normalization stylesheet[^] to get consistent rendering.

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

tiwal

ok thanks for the support Have a nice day