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; }
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
u refer this site, i think its may be useful for you,
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 ?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.