bug in IE6/7 displaying inline list and input form

[Maven4Champ]

All, a link to my page with the issues quite visible are is as follows:

http://elance.creative-clarity.com/

As you can see, I have a few small issues that I am working on. The two I hope to have help with are the navigation and then search input form field.

1.) Navigation
The navigation looks fine in IE7 and Firefox 2 (haven't tested with FF1 yet) but in looking in IE6, there is a BIG issue with the nav. It's all displayed vertically rather than inline and scrolls down the page instead of the nav being across (horizontal) as it is in IE7 and FF2. Is there a different CSS property I need to adjust for or compensate for to achieve this?

ul.menu, .menu ul {
	list-style: none;
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	cursor: default;
	display: inline;
	display: table;
}
ul.menu li {
	display: table-cell;
	position: relative;
	padding: 0px;
}

The second issue is the input form. I messed with this for several hours and couldn't figure it out in IE6/IE7/FF.

I simply want the the input field to be the same height as the images next to it (29px) and for it to have the proper text alignment (vertically centered and left-aligned horizontally). The css is in the source code of that page. I am probably trying to make this too difficult but getting them lined up properly is becoming a huge pain. Th other issues are manageable and I just need to be sure during coding that I check in all brwosers available for compatibility.

Any advise is greatly appreciated!

 

[datamasher]

Hi,
just for info, your navigation renders vertically ( incorrectly) in IE7 on Windows XP and correctly (horizontally) in Opera 9.6, Safari 3, Google Chrome and Netscape 7.0 all on Windows XP.

In Netscape 7.0 the words "search this site" don't appear in the Search Input field.

I am not familiar with workings of Joomla though, so can't help any further.

Steve (datamasher)

 

[Maven4Champ]

Steve,

Even though it's Joomla (a CMS), it's standard CSS and HTML that I am using for the actual structure and design.

It looks as if I was testing in IE8 an not IE7 - good catch.

As for the text not showing in Netscape, I'm not too worried about that.

I would like to figure out with some assistance on how to fix the input field's alignment and position and also resolve the navigation button issue.

Thanks!

 

[Vragabond]

1. Navigation: IE does not support table and table-cell as values for the display property. Therefore it reverts to block. However, if you're going to force your navigation list to behave like a table, using a table is a better option. A list that acts like a table will always be a second rate table. I however would suggest using floats to clear up the issue.

2. Since styling form elements is quite difficult, I would suggest you make your input box transparent and without borders, with the line-height of your choice (that will ensure vertically centered text) and give the white background to the container holding the input box.

Do something about world cancer today: Comprehensive cancer control information at PACT

 

[Vragabond]

Oh, and I forgot the most important thing. Try removing the xml declaration from the very top. If IE finds anything before the doctype, it will ignore the doctype, reverting back to quirks mode.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]