I'm new to Ajax and just built a web page to test assorted effects that I want to use right away. One of the most straightforward - Rounded Corners - I can't get working correctly. Here are two screenshots exemplifying the problem:
Here's the pertinent HTML and CSS code:
<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Ajax_Test_1._Default" %>
<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %
<!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" >
<head runat="server">
<title>Untitled Page</title>
<link href="http://links.10026.com/?link=styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<br /
<div>
Rounded corners:<br />
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="purpleButton" BackColor="#C0C0FF">Dummy Link</asp:LinkButton>
<cc1:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="LinkButton1" BorderColor="128, 128, 255" Color="192, 192, 255" Radius="6">
</cc1:RoundedCornersExtender>
purpleButton
{
background-color:#C0C0FF;
width:75px;
text-align:center;
}
.modalBackground
{
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
.modalPopup
{
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
It's strange that the width value in the CSS file has no effect. Yet if I specify the width directly in the HTML then it fixes the problem in IE7. Nothing I do seems to change anything in Firefox 2.0
Any ideas?
Robert Werner
Vancouver, BC
Add display: block; to your purpleButton class. That'll fix it.
Just tried what you suggested. Sorry, but this doesn't do a thing. Here's the full source code: http://mwtech.com/downloads/public/AjaxTest.zip
Robert
display: block; is necessary, but you also need to add a "." before purpleButton in your CSS. The class name needs to be .purpleButton in styles.css for it to be available for reference as purpleButton in the CssStyle property in your asp.net code.
You are correct! Thank you for that tip!
I just removed all width settings from the HTML and found that in the CSS I had to set "width" to some value first before I could control the actual width using "min-width". Very odd IMHO. Maybe one day I'll fully understand all the quirks of CSS!!!
Robert
0 件のコメント:
コメントを投稿