kuszeras — 2012-02-02T13:49:12-05:00 — #1
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.
system — 2012-02-02T17:31:11-05:00 — #2
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 — 2012-02-03T21:23:50-05:00 — #3
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.
system — 2012-02-04T04:18:17-05:00 — #4
... 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 — 2012-02-07T13:09:42-05:00 — #5
Is there a good way to maintain font compatibility (height) in terms of browsers? Why specifying height is bad?