I'm having a weird CSS behavior that is happening only in IE7. It's a
box that having rounded corners on both top-left & bottom-left sides.
The problem is that one of the rounded corner images always jumps off
its original place and spans into the content area.
Here's a screenshot of the problem for better illustration:
The small image in the middle is supposed to be in place of the red
circle. The CSS technique is a traditional old approach for achieving
CSS rounded corners:
<form action="http://sawa.org.sd/search/" method="get">
<input type="text" name="q" value="" size="17"/>
<input type="submit" value="Search" id="submitSearch"/></p>
The rounded corner images are applied to .search_top & .search_bottom
background:transparent url(../images/tlc.gif) no-repeat left top;
background:transparent url(../images/blc.gif) no-repeat left bottom;
This happens randomly. The page loads once with the image spanning
off, and if I refreshed the page it's back to its original place! Also
it's happening only with the top-left image. While I have no evidence,
I'm 100% it's happening only in IE7, not IE6 (having tested in IE
below 6). Needless to say no such quirks in Firefox or Opera.
Thanks in advance,
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/