Style seach button in IE

-P- · 2006-03-30 11:07:17

If this has been asked, please point me to right thread, didn´t find with forum search… how do I style search button (and field) with IE? Is there a class for it or can I add the class manually to the source code and where can I find it?

This is what I want to do, works with Gekko browsers and Opera:

With IE it looks now like this:

thebombsite · 2006-03-30 15:45:14

Instead of using the TXP tag you can create your own form like so:-

<code>
<form id=“searchform” action=”<txp:site_url />search/” method=“get”>
<div>
<input type=“text” name=“q” value=”“ size=“15” /><button type=“submit” value=“Go” id=“submit”>Search</button>
</div>
</form></code>
<br />

Ingnore my formatting requirements. I use a “button element” intead of an “input element” but you can change that if you wish – <code><input type=“submit” value=“Go” id=“submit” /></code> – and you can add ids and classes to your heart’s content.

-P- · 2006-03-30 19:41:51

Thank you! Again. And as always, problem solved :)

<code><form id=“searchform” action=”<txp:site_url />search/” method=“get”>
<input type=“text” name=“q” value=”“ size=“16” /><input type=“submit” value=“Ok” id=“submit” class=“button” />
</form></code>

I hope that is correct but at least it works. Amazing how much lifetime one can spend only to trying to figure how to get one button styled correctly for all browsers….

Here is the site in question

Okay, bit off topic but I wonder if you have also solution to the navigation tabs, how to lose the 1px border underneath them when viewed with damned IE…

whatbrick · 2006-03-30 20:52:22

Here’s one way I found to remove the border in IE. Add the following to the #navlist entry in the IE conditionals:

margin-bottom: -1px;
position: relative;

Worked for me.

-P- · 2006-03-31 07:26:35

Thank you whatbrick!! That did the trick!! Yipee. I tryied earlier just the plain negative 1px bottom margin but that did not help. Didn´t realize that I should add also position:relative.

Hopefully this stuff can be usefull to other non css gurus here too, took me several days trying to fix these to problems with no success. And yes, I assume that it is a bit sorry workaround to add IE conditionals but……….

whatbrick · 2006-03-31 08:20:17

I didn’t realize it needed position: relative; either until I fiddled with it enough. I’m glad it worked.

Don’t feel bad for using what works. Until the browser manufacturers can start coding their products to follow web-standards completely, then we have to use every available trick in the book to get what we (or or clients) need. So, using conditionals isn’t a sorry workaround, it’s actually a rather nice blessing considering the circumstances. When/if the time comes that those rules are no longer needed, it will be a lot easier to just delete what is in-between the comments than to hunt down any CSS hacks in a stylesheet.

alexandra · 2006-03-31 10:36:04

@-P-
could you let me know how you got this nice calendar feature on your site working? Is it a plugin?

(btw. you subscibed with TXP Blogmap, did´nt you? but the url to your pic is not correct. Can you update the url please. The Blogmap does not stop loading as long as pics are missing. thx :)

-P- · 2006-03-31 11:33:36

That calendar is a plugin, mdp_calendar

About the blogmap url, sorry for this extra trouble I´m causing… but can´t actually understand what´s causing it. Image is linked from a domain that has no hotlinkin prevention set. I did ping the blogmap now again, hope that helps. Image url is http://www.virtual.fi/images/pdom.gif, could it be the problem that image is served from different domain than the actual blog?

alexandra · 2006-03-31 13:49:38

@P i fixed the image blogmap issue and it works now. thx.

Jeff_K · 2006-03-31 19:28:38

The real test is disabling the default aqua interface for forms in Safari. After much research, it appears that flash forms (eek!) are the only way to override the default border appearance. Apparently this is going to be changed in the next release.

-P- · 2006-03-31 20:24:02

Luckily and afaik the default buttons in Safari look quite good… ……. :D

At lest Safari does not pick up the button style just “half way” like IE does.

Textpattern CMS

Textpattern CMS support forum

#1 2006-03-30 11:07:17

Style seach button in IE

#2 2006-03-30 15:45:14

Re: Style seach button in IE

#3 2006-03-30 19:41:51

Re: Style seach button in IE

#4 2006-03-30 20:52:22

Re: Style seach button in IE

#5 2006-03-31 07:26:35

Re: Style seach button in IE

#6 2006-03-31 08:20:17

Re: Style seach button in IE

#7 2006-03-31 10:36:04

Re: Style seach button in IE

#8 2006-03-31 11:33:36

Re: Style seach button in IE

#9 2006-03-31 13:49:38

Re: Style seach button in IE

#10 2006-03-31 19:28:38

Re: Style seach button in IE

#11 2006-03-31 20:24:02

Re: Style seach button in IE

Board footer