SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb xhtml challenge with browser compatibility :)

    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.
    Last edited by kuszeras; Feb 2, 2012 at 13:00. Reason: spelling

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    I'm the web overlord for Graphic Business Systems

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sdleihssirhc View Post
    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.

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a good way to maintain font compatibility (height) in terms of browsers? Why specifying height is bad?
    http://www.yourshoutbox.com <- FREE chat for your website - limited offer
    http://www.smartchatbox.com <- let your visitors talk


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •