No replies
freebird1127
freebird1127's picture
Offline
newbie
Last seen: 2 years 29 weeks ago
Timezone: GMT+10
Joined: 2012-02-06
Posts: 1
Points: 2

Hi All,
Thanks in advance for your help. I am using Joomla! however I am sure this issue is related to styling/CSS. I have styled a search input box with a magnifying glass icon in the background.

div.searchheader input.inputboxheader {
    background: url("/images/searchicondark.png") no-repeat scroll right center white;
    border: medium none;
    border-radius: 8px 8px 8px 8px;
    font-size: 0.75em;
    height: 16px;
    padding: 0 20px 0 8px;
}

I wanted to make the magnifying glass icon clickable to submit the form, and decided to try to use the existing form submit button, so I styled it thusly. I set the button to display as a block and positioned it:

div.searchheader input.buttonheader {
    background: none repeat scroll 0 0 transparent;
    border: medium none transparent;
    display: block;
    float: right;
    height: 16px;
    left: -16px;
    position: relative;
    width: 16px;
}

Actually this worked really beautifully in FF. The result is a lovely box with clickable mag glass background.

FFsearch.png

And for the most part it worked in IE also, everything except for one of those bloody annoying borders that doesn't want to go away!!!!

IEsearch.png

So I searched and indeed found many issues regarding IE submit buttons and borders. I have already tried:

    margin: 0;
    opacity: 0;
    outline: medium none;
    padding: 0;
}

Which didn't really change anything. Doesn't seem to be an issue related to box model or outline or border? Could it have something to do with the display: block?

Any suggestions appreciated.
Thanks again,
Evan