Few problems with my search box

I have a search box.

The box itself is an image and the button is an image too.

The CSS is as follows:

.form-search {
    background: url("../images/search_form.png") no-repeat scroll 0 0 transparent;
    float: left;
    height: 44px;
    margin: 28px 0 0;
    position: relative;
    text-align: center;
    width: 442px;
}
.form-search .button {
    left: 393px;
    position: absolute;
    top: 6px;
}
.form-search .input-text {
    color: #847D7D;
    font-size: 1em;
    font-weight: bold;
    left: 93px;
    position: absolute;
    top: 13px;
    width: 270px;
}

The HTML is as follows:

<fieldset class="form-search">
    <input type="text" class="input-text" name="keyword" value="Enter Keyword / Catalogue Code" id="textBox"/>
    <?php echo $form->error("keyword"); ?>
    <input type="image" class="button" name="search" alt="Search" src="../images/search_form_button.png" />
</fieldset>

I have a few problems.

• Firstly, there is a line all around the area that I am attempting to have my search box. Have I missed some code to remove an outer line?
• Secondly, the actual search box to place text into is sitting ontop of the image rather than within and it's clear. Again, is there something I can do to remove the input type text box border.
• Finally, In chrome and IE there is no problem, but in FF my button isn't appearing where it should.

I have enclosed an image of the problems I am having in FF.

Update:

I removed the borders from the fieldset and the input elements. This leaves me with only the third problem. Chrome and IE show the button just fine, but FF does not.

I think the fieldset has a border by default. Remove it by setting border: 0 on the fieldset. You should also reset margins and especially the padding on the fieldset and the form.

Question 1 is already answered by GolezTrol. The second is solved by yourself.

Now, about the third:

Short answer: Remove the padding of the fieldset element.

Somewhat longer answer:

Every browser styles all elements with different defaults. In this case, FireFox adds padding to a fieldset element. So you have to remove the padding manually.

If you want this kind of pixel perfectness and you want your site to look exactly the same in every browser, then it is usually recommended to use a reset style sheet. Linking such a style sheet as first to your markup prevents you from doing this kind of adjustments in your production style sheet.

Another tip: you might consider to expand the text input's size because some browsers show a focus border around input elements (like Chrome, Safari). See this demo fiddle for an example.