Question

I am trying to apply a background image for a button inside the form. The code work and seems perfect in all browsers (Chrome, FF, Opera and Safari). But, in IE8(the only version i have checked), the image is getting repeated. I am trying to follow standard and simple HTML and CSS but this is really annoying. Please see the picture below

Following is the HTML

<div id="header">
            <div id="TopHead">
                <div id="logo">
                    <a href="/" alt="eyaas">
                        <img src="logo.gif" alt="eyaas" />
                    </a>
                </div>
                <div id="country">India | Rest of the World
                </div>
                <div id="linksAndSearch">
                    <div id="linksTop">My Account | Login | Register | Cart
                    </div>
                    <div id="searchBar">
                        <form id="search_mini_form" action="" method="get" class="search"> 
                            <div class="searchBox"> 
                                    <input id="Text1" type="text" name="" class="searchBoxDefaultText jsSearchTerm jsToggle" value="" /> 
                            </div>
                            <div class="searchButton"> 
                                <button type="submit" title="" class="searchBoxSubmitButton" />
                            </div>
                            <div class="clear"></div> 
                        </form>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div id="TopNav">
            </div>
        </div>

Following is the CSS

#linksAndSearch { float:left; }

.search { width:393px; height:35px; background-image:url('SearchBoxGrayFrameText.gif'); }

.searchBox { float:left; margin:6px 0 0 65px; background-image:url('SearchBoxFramed.gif'); width:275px; height:23px; overflow:hidden; }

.searchBox .searchBoxDefaultText { width:257px; height:19px; margin:2px 0 0 5px; font-size:15px; color:#CCC; }

.searchButton { float:left; margin:6px 0 0 10px; } 

.searchBoxSubmitButton { width:29px; height:23px; background-image:url( SearchSubmitBtnYellowArrow.gif); background-repeat:no-repeat; }

Answer 1

The problem was solved by

<button type="submit" title="" class="searchBoxSubmitButton"/>

to

<button type="submit" title="" class="searchBoxSubmitButton"></button>

Can someone elaborate on the issue as to why this was happening ?