When form is activated related button gains a black border in IE

  • Hello,

    Just wondering if anyone has experienced the issue I am having with Internet Explorer 6.x.

    Issue: When I select a form to enter text characters the associated forms button gains a black border around the button. This does not happen in firefox.

    Looking at my search form:-

    sidebar.php

    <li id="search">

    <h2><?php _e('Search'); ?></h2>

    <form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">

    <div>

    <input type="text" name="s" id="s" size="12"
    onclick="this.className='currentField'"
    onblur="this.className='changedField'"/>
    <input type="submit" value="<?php _e('Search'); ?>" />

    </div>

    </form>
    </li>

    The CSS file to control the colors of the field:-

    .changedField {

    background-color:white;

    }

    .currentField {

    background-color:#F2F2F2; /* light-grey for active */

    }

    Any pointers to resolve this would be most appreciated…

Viewing 8 replies - 1 through 8 (of 8 total)

  • Try adding border-width: 0; to the .currentField rules.

    Thread Starter ltambiah

    (@ltambiah)

    Thanks for the reply but unfortunateley this makes me loose all my borders I have set, when I activate a field. I have seen a site with the same issue in Internet Explorer, so maybe something you just have to except.

    add it to the button

    <input type=”submit” value=”<?php _e(‘Search’); ?>” style=”border:none;”/>

    Thread Starter ltambiah

    (@ltambiah)

    Perhaps my original question was not clear. I want my border to remain, not to be removed. The problem is that internet explorer seems to add a selected black border around the button when I activate a asociative field, which is quite ugly.

    Adding the code that Stefan has kindly suggested, quite rightly removes the border, unfortuantely that is not what I require.

    For an example see this link:- https://www.iboxifoo.com/article/4/fourth-post

    Now click the Name, email or website field in Internet Explorer and notice the bla ck border that appears around the “preview” button. Do the same in Firefox and all is fine no black border appears.

    *Just to note that Iboxifoo is not my website, but just an example of the same issue I am having.

    Thanks again for pointers already suggested…

    I’m guessing you don’t have a link because you’re editing something offline… but if you could make it available online, that would be a great help.

    I actually think the black border on iboxifoo is a good thing, kinda highlights the fact that you’ve enabled something.

    It looks like it’s being done by javascript, but I’m no JS expert so I couldn’t help you except point you in the direction of your JS file (or any JS you have in your page).

    It is just a gimmick of the internet-explorer to activate the submit-button of the actual form (there is no underlaying javascript have a look here: https://www.alles-in-aachen.de/ -my page, no code, I know for sure)

    I think there is no way to activate it on firefox or netscape except using javascript.

    It’s a default of the browser… nothing you can do about it…

    Thread Starter ltambiah

    (@ltambiah)

    I did begin to think that it is a default behaviour of Internet Explorer, thanks for confirming that.

    I only use IE for testing my website and apply hacks so it works in IE and firefox. Firefox is my main and only browser, wish we could dump IE but as a large percentage use it it cant be ignored :-(.

    Once again thank you for the quick replies, the great thing about most FOSS it has great communities and in my opnion all software needs good communities.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘When form is activated related button gains a black border in IE’ is closed to new replies.