Xhtml challenge with browser compatibility :)


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… :slight_smile:

[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? :slight_smile: 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.

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.

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.

… 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.

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