Fighting IE6 Forms

Discussion in 'Web Design and Development' started by sbryan, Sep 4, 2009.

  1. sbryan macrumors member

    Joined:
    Jun 6, 2007
    #1
    You may remember my problem of getting form elements to display consistently in an inline navigation menu. I had a workable result in IE7, Safari, and Firefox with the following:

    HTML:

    Code:
    <div id="NavButtons">
            <?php include_once "header.php"; ?>
        	</div><!-- End of NavButtons -->
    and

    Code:
     <div id="search"><form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
    <div id="searchfield"><input type="text" value="<?php the_search_query(); ?>" name="s" id="s" /></div>
    <div id="searchbutton"><button type="submit" style="border: 0; background: transparent;" value="">
    	<img src="http://eidolonmarketing.com/wordpress/images/search.jpg" width="70" height="20" alt="submit" /> </button></div>
    </form></div> <!-- End of Search -->
    CSS:

    Code:
    #search {
    	float: left;
    	display: inline;
    	width: 243px;
    	height: 20px;
    }
    #searchfield #s {
    	float: left;
    	display: inline;
    	width: 150px;
    	height: 18px;
    	margin-top: 2px;
    	margin-left: 8px;
    	margin-right: 5px;
    	border: 1px solid #CAC4B6;
    }
    #searchbutton {
    	float: left;
    	display: inline;
    	height: 20px;
    	width: 70px;
    	margin-top: 1px;
    }
    IE6 doesn't like this code, and actually, neither does the iPhone Safari browser, even though desktop Safari looks fine. (Same result between IE 6 and Safari for iPhone).

    Any suggestions? Does IE6 add img element formatting that I should override?
     
  2. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #2
    You'll have to be a bit more specific than "doesn't like the code". Without the full code to look at we can't see what it's doing, and we have no way of knowing what you want.

    That being said, I can't help but notice you're setting widths on inline elements. That usually doesn't work well. You should use inline-block if that's what you want to do, but browser support is spotty.
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    For the inline-block mentioned, most browsers will support it on most tags, but at least older IE only supports in on tags that are natively inline tags like label and span.
     
  4. sbryan thread starter macrumors member

    Joined:
    Jun 6, 2007
    #4
    IE6 would break the inline display of both the search form field and the search button.

    I was able to get around it with:

    Code:
    #search {
    	float: left;
    	display: inline;
    	width: 243px;
    }
    #searchfield #s {
    	float: left;
    	display: inline;
    	width: 150px;
    	height: 18px;
    	margin-top: 2px;
    	margin-left: 8px;
    	margin-right: 5px;
    	border: 1px solid #CAC4B6;
    }
    #searchbutton {
    	float: left;
    	display: inline;
    	margin-top: 1px;
    }
    #searchbutton button {
    	height: 22px;
    	width: 74px;
    	margin: 0;
    	padding: 0;
    }
    Yes, I think I am pushing the limitations of designing with px specifications. What are some good resources for designing with EMs, percentages, and scalable text for accessibility -- both print and web?

    I'll play around with inline-block to see if it improves what I'm currently working on.
     
  5. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #5
    It's not a problem with what measurement you're setting the width with, but the fact that you're setting widths at all. Inline elements semantically should not have fixed widths.

    Here's a good site with lots of examples of horizontal menu options.
     
  6. sbryan thread starter macrumors member

    Joined:
    Jun 6, 2007
    #6
    That's a cool resource.

    It's not that I'm using px width for this particular item, it's that I gather the real pros design first with percentages and EMs. For example, I'd like to know how to make my text scalable without breaking my design for accessibility.
     
  7. Consultant macrumors G5

    Consultant

    Joined:
    Jun 27, 2007

Share This Page