2012年3月21日水曜日

roundedcorners display in firefox

i was under the impression that the extenders such as roundedcorners and dropshadow were all cross-browser compatible, but if you take a look at this page in IE and Firefox you will see the Firefox rendering is a little bit off the mark -http://www.accessor-wiis.com

i am implementing the appearance using two panels. the first panel (the external panel) has it's background color specified while the internal panel has a white background. here is some of the relevant code:

skin file:
<asp:Panelrunat="server"SkinId="RoundedCornersOuterPanel"Style="background-color: #4F82CB; width: 97%; text-align: center;"></asp:Panel>
<asp:Panelrunat="server"SkinId="RoundedCornersInnerPanel"Style="text-align: left; width: 95%; background-color: White; margin-top: 7px; margin-bottom: 7px; padding: 5px;"></asp:Panel>

user control:
<asp:PanelID="AccessoriesRoundedCornersPanel"runat="server"SkinID="RoundedCornersOuterPanel">
<asp:PanelID="AccessoriesInnerPanel"runat="server"SkinID="RoundedCornersInnerPanel">
<asp:DataListID="ItemsEndingNowDataList"runat="server"OnItemDataBound="ItemsEndingNowDataList_ItemDataBound"Width="95%">
<ItemTemplate>
<asp:ImageID="ItemImage"runat="server"ImageAlign="right"CssClass="float-right"/>
<asp:LabelID="CurrentPriceLabel"runat="server"CssClass="biggreen"/><br/>
<asp:LabelID="ItemTitleLabel"runat="server"/>
<br/>
<asp:HyperLinkID="BuyNowHyperLink"Target="_blank"runat="server"Text="Buy Now!"/>
</ItemTemplate>
</asp:DataList>
</asp:Panel>
</asp:Panel>
<ajaxToolkit:RoundedCornersExtenderID="AccesoriesRoundedCornersExtender"runat="server"Corners="All"Radius="3"TargetControlID="AccessoriesRoundedCornersPanel">
</ajaxToolkit:RoundedCornersExtender>

thanks in advance for any thoughts

Look at this article to help you out:

http://mattberseth.com/blog/2007/11/antialiased_rounded_corners_wi.html

Hope this helps =)

0 件のコメント:

コメントを投稿