Member Avatar for hsmukunda

Hi

encountering rendering problems for IE for rounded corners.
Rounded corners are rendered through an image.
Images attached.

We can clearly see in IE the part of below rounded corner appears next to Search caption in image.
But in Firefox it renders properly.


quick-search.gif is used for getting rounded corners.

The css for rendering rounded corners.

#quick_search .top{
 
      width:280px;

      height:9px;
 
      overflow:hidden;
  
      background:url(../Images/quick-search.gif) no-repeat 0 0;
  
      }

       
 
       
 
      #quick_search .bottom{

      width:280px;

      height:9px;

      overflow:hidden;

      background:url(../Images/quick-search.gif) no-repeat 0 -9px;

      float:right;

      }

Any help would be appreciated.

thanks.

internet_explorer.jpg 5.6 KB quick-search.gif 3.18 KB
  • 2 Contributors
  • 1 Reply
  • 96 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by kidwon
Member Avatar for kidwon

You have to clear the float!

Try

#quick_search{zoom:1;}

or

#quick_search .bottom{clear:right;}

or both rules!

In any case this is not cleared float somewhere, it might be a third element!
If my solution doesn't help upload the page somewhere and let me give it a look I'll definitely help you.

BR

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.