• Locked
No replies
Thu, 2009-08-20 05:40
syed_afraz_ali
Offline
newbie
Pakistan
Last seen: 13 years 41 weeks ago
Pakistan
Joined: 2009-08-20
Posts: 1
Points: 0

Hi guys I am trying to create an effect by wrapping an input field inside a div which has a background image to make it feel as if my input box has round edges. The problem is all is fine in Fire fox but IE is behaving stangely and the text box goes way way off the screen. Any help please? Here is the code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
  <title></title>
 
  <style type="text/css">
    div#Container
    {
        width:980px;
        height: 300px;
        margin: auto;
        padding: 0;
        background: yellow;
    }
    div#Search
    {
        position: relative;
        border: solid 1px black;
        width: 126px;
        height: 22px;
        margin-left: 600px;
        margin-right:  200px;
        background: transparent url(../Images/SearchBox.gif) no-repeat 0 0 ;
        text-align: center;
    }
    div#Search input
    {   
        border: solid 1px white;
        width: 105px;
        height :18px;
    }
 
 
  </style>
 
</head>
 
<body>
    <div id="Container">
        <div id="Search">
               <input type="text" value="abc"/>
        </div>
    </div>
</body>
 
</html>

please note here that the image I have specified in the "Search" div has dimensions of 126 x 22. The image is attached with this post. Plz reply.
Thanks.

AttachmentSize
SearchBox.gif434 bytes
Top
Tags: