FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Input Button's - Internet Explorer

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


garionw
I am currently working on my blog template and have almost finished it. Heres how the search should display (In FireFox):



However this is how it displays in Internet Explorer:



Now as you can see, Internet Explorer adds an inner border and when clicked, the inner border will turn black. Is there a way to remove this?

Here's the CSS Code I have:
Quote:
Code:

#input{height: 16px; padding: 3px; margin: 0; background: url(images/search_bg.png) repeat-x top left; border: 1px solid #000000; border-right: 0; vertical-align: top; width: 150px;}
 #button{width: 60px; height: 24px; background: url(images/search_bg.png) repeat-x top left; border: 1px solid #000000; border-left: 0; margin: 0; font-weight: bold;}


And the HTML:
Quote:
Code:

<input type="text" id="input" onfocus="clearDefault(this)" value="Enter Search Terms" /><input type="submit" id="button" value="Search" />
alalex
Wink im not sure if this will solve the problem you have, but it may be because some browsers display text fields in diferent sizes, and thus in IE it looks higher than it should. you could try something like the following:
Code:
FORM>
<script language="JavaScript">
if (document.layers)
document.write("<INPUT type=text size=12>")
else
document.write("<INPUT type=text size=16>")
</script>
</FORM>

this way you can have separate sizes for each browser.
About the white inner border, I know nothing. Sad
Manofgames
i think you missed out the {}s in your javascript alalex
MrBlueSky
Manofgames wrote:
i think you missed out the {}s in your javascript alalex


Javascript expects a statement after "if (x)" and after "then". If you want to use mutiple statements, you need to create a block using {}. In this case only one statement is used, so the {}'s are optional.

See http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Statements:if...else for more information
Manofgames
ah, sorry :embaressed:
alalex
how about replacing the button with an image, and then add a javascript function (onClick) so that it submits the form

Code:
function submit_form(form_id){
var f_form = document.getElementById(form_id);
f_form.submit()
}

that would work out pretty well Wink
unknownc1c
yeah i hate stupid firefox and internet explorer. You have to code EVERYTHING differently just b/c of them. It drives me nuts.
garionw
Thanks for all of your help, but I've decided to scrap it for now, I'll just go with a plain one.

Upon closer inspection, it turned out to be transparent rather that than white. It's certainly non standard and I'll check it out with IE7 tonight.
qscomputing
I had to look twice to see what that box was meant to do; it'll certainly confuse the newbies so maybe best to leave it out.

You could use JS to auto-submit the form when the user presses Enter, without needing a submit button...
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.