Fighting IE6 Forms

[sbryan]

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:

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

and

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

#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?

 

[Darth.Titan]

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.

 

[angelwatt]

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.

 

[sbryan]

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.

IE6 would break the inline display of both the search form field and the search button.

I was able to get around it with:

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

 

[Darth.Titan]

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.

 

[sbryan]

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.

 

[Consultant]

Just have a page that directs I.e. 6 users to prompt them to use firefox or upgrade. =)

i.e. 6 must die
http://davidwalsh.name/6-reasons-why-ie6-must-die
http://technorati.com/posts/o2S0hccGq9LTOSVLLGwiEXdqCUDjcE4SH0jZvsnq5Sw=
and more