xhtml challenge with browser compatibility :)

[kuszeras]

Hi!

All I want to do is to have such layout (that is browser compatible and valid xhtml ). I tried with divs, margins and still I am missing something for IE7 so maybe I won't tell my solution but someone can think of own. I will be grateful and I am offering a beer . It seems quite simple...


[input box1] - some free space (2px) - [input box2]
[---- input box 3 fitting with width ideally -----]
-free- [submit1] -free space(2px)- [submit2] -free-


Each input box and submit button should have a 1px border and every line should have 2px top margin . Can someone handle that with cross browser compatibility with working solution for IE7? I always was getting different inpu t widths for IE7 and FF or wrong top margins... . 2px turned out to be 1px for IE . Font size should be preferably 10px . All input boxes and submit buttons should have 16px height.

[deathshadow60]

Can't be done... because the width and default padding of form elements isn't consistent cross browser... IE has a default padding that padding makes no changes to, Gecko has default padding in a different metric that padding makes no changes to, Opera treats them exactly if they were inline-block, and don't even get me STARTED about the mess Webkit based browsers make of form elements. It's why the pixel-perfect arsty fartsy designs usually fall to pieces cross browser once forms are involved.

the 'best' answer I can think of is to give them a transparent border, transparent background, then place them inside/over elements you can control. It's what I've had to do in several cases thanks to no two browser makers agreeing on how to size anything.

[sdleihssirhc]

Just to see how doable this was, I threw together a quick, ugly, pixel-dependent, ugly mock-up. In spite of all the hurdles deathshadow60 mentioned, it's pretty consistent (I don't have access to a native IE7, just IE9-as-7).

But I'd be surprised if that will help you very much. It makes a lot of assumptions about spacing and whatnot. You might be better-served if you showed us your solution, and we tried to figure out where that extra 1px in IE7 is coming from.

[deathshadow60]

But I'd be surprised if that will help you very much. It makes a lot of assumptions about spacing and whatnot.

... and it relies on px metric fonts and declaring heights; which pretty much shtups accessibility... killing the padding on form elements also makes them harder to use in Opera since there's suddenly NO padding compared to other browsers.

[kuszeras]

Is there a good way to maintain font compatibility (height) in terms of browsers? Why specifying height is bad?