Ok. Here is the scenario. I found out what has been happening, but not
why.
Apparently, if you have a Datagrid with no "Font-size=smaller", IE and
Mozilla act the same (whether or not you have a style a {smaller}.
If you now add "Font-size=smaller", IE will get smaller but Mozilla will
ignore it. Mozilla doesn't ignore the other font styles, such as
"Font-name" - only "Font-Size".
Then if you have a style a {smaller} and "font-size=smaller" it is additive.
It will take the smaller from the "style a" and than will make it even
smaller from the "font-size" in the DataGrid.
This does not happen in Mozilla since it ignores the "font-size in the
DataGrid"
Which is correct?
Here are 3 files that show the behavior
1st: no font-smaller or style a{smaller}
********************************************************************************************
<%@ Page Language="VB" Debug="true" ContentType="text/html"
ResponseEncoding="iso-8859-1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<%@ Import Namespace="System.Collections" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<script runat="server">
Function CreateDataSource() As ICollection
Dim dt As DataTable
Dim dr As DataRow
Dim i As Integer
'create a DataTable
dt = New DataTable()
dt.Columns.Add(New DataColumn("StringValue", GetType(String)))
dt.Columns.Add(New DataColumn("BoolValue", GetType(Boolean)))
dt.Columns.Add(New DataColumn("CurrencyValue", GetType(Double)))
'Make some rows and put some sample data in
For i = 1 To 5
dr = dt.NewRow()
dr(0) = "Item " + i.ToString()
If (i Mod 2 <> 0) Then
dr(1) = True
Else
dr(1) = False
End If
dr(2) = 1.23 * (i + 1)
'add the row to the datatable
dt.Rows.Add(dr)
Next
'return a DataView to the DataTable
CreateDataSource = New DataView(dt)
End Function
Sub Page_Load(sender as Object, e as EventArgs)
if not IsPostBack then
DataGrid4.DataSource = CreateDataSource()
DataGrid4.DataBind()
end if
End Sub
Private Sub DataGrid4_ItemDataBound(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.DataGridItemEventArgs)
trace.warn("in itemdatabound")
Select Case e.Item.ItemType
Case ListItemType.Item, ListItemType.AlternatingItem
Dim editButton As LinkButton = New LinkButton()
editButton = CType(e.Item.Cells(0).Controls(0), LinkButton)
editButton.Attributes.Add("name", "#" & editButton.UniqueID)
Case ListItemType.EditItem
Dim UpdateButton As LinkButton = New LinkButton()
UpdateButton = CType(e.Item.Cells(0).Controls(0),
LinkButton)
UpdateButton.Attributes.Add("name", "#" &
UpdateButton.UniqueID)
End Select
End Sub
Private Sub DataGrid1_ItemDataBound(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.DataGridItemEventArgs)
trace.warn("in itemdatabound")
Select Case e.Item.ItemType
Case ListItemType.Item, ListItemType.AlternatingItem
Dim editButton As LinkButton = New LinkButton()
editButton = CType(e.Item.Cells(0).Controls(0), LinkButton)
editButton.Attributes.Add("name", "#" & editButton.UniqueID)
Case ListItemType.EditItem
Dim UpdateButton As LinkButton = New LinkButton()
UpdateButton = CType(e.Item.Cells(0).Controls(0),
LinkButton)
UpdateButton.Attributes.Add("name", "#" &
UpdateButton.UniqueID)
End Select
End Sub
Private Sub DataGrid4_EditCommand(ByVal source As Object, ByVal e As
System.Web.UI.WebControls.DataGridCommandEventArgs)
trace.warn("in editCommand")
DataGrid4.DataSource = CreateDataSource()
DataGrid4.DataBind()
End Sub
Private Sub DataGrid4_CancelCommand(ByVal source As Object, ByVal e As
System.Web.UI.WebControls.DataGridCommandEventArgs)
trace.warn("in cancelCommand")
DataGrid4.EditItemIndex = -1
DataGrid4.DataSource = CreateDataSource()
DataGrid4.DataBind()
End Sub
Private Sub DataGrid4_UpdateCommand(ByVal source As Object, ByVal e As
System.Web.UI.WebControls.DataGridCommandEventArgs)
DataGrid4.EditItemIndex = -1
DataGrid4.DataSource = CreateDataSource()
DataGrid4.DataBind()
End Sub
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>View Positions</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
</style>
</head>
<body>
<form method="post" name="form1" class="BodyText" runat="server">
<div align="left"><a href="addPositions.aspx">Add New Positions</a></div>
<p>
<asp
ataGrid id="DataGrid4" runat="server" BorderColor="#CC9966"
BorderStyle="None" BorderWidth="1px" BackColor="White" CellPadding="4"
onItemDataBound="DataGrid4_ItemDataBound"
onEditCommand="DataGrid4_EditCommand"
onUpdateCommand="DataGrid4_UpdateCommand"
onCancelCommand="DataGrid4_CancelCommand">
<HeaderStyle HorizontalAlign="center" BackColor="#c0edee"
ForeColor="#2FABAD" Font-Name="Verdana, Arial, Helvetica, sans-serif"
Font-Bold="true"/>
<ItemStyle BackColor="#F2F2F2" Font-Name="Verdana, Arial, Helvetica,
sans-serif"/>
<AlternatingItemStyle BackColor="#E5E5E5" Font-Name="Verdana, Arial,
Helvetica, sans-serif" />
<FooterStyle HorizontalAlign="center" BackColor="#E8EBFD"
ForeColor="#3D3DB6" Font-Name="Verdana, Arial, Helvetica, sans-serif"
Font-Bold="true"/>
<PagerStyle BackColor="white" Font-Name="Verdana, Arial, Helvetica,
sans-serif" />
<Columns>
<asp:EditCommandColumn ButtonType="LinkButton"
UpdateText="Update"
CancelText="Cancel"
EditText="Edit">
</asp:EditCommandColumn>
</Columns>
<PagerStyle HorizontalAlign="Center" ForeColor="#330099"
BackColor="#FFFFCC">
</PagerStyle>
</asp
ataGrid><br>
</form>
</body>
</html>
*****************************************************************************
Both IE and Mozilla are identical
2nd: adding the font-size=smaller to the DataGrid
*******************************************************************************
<%@ Page Language="VB" Debug="true" ContentType="text/html"
ResponseEncoding="iso-8859-1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<%@ Import Namespace="System.Collections" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<script runat="server">
Function CreateDataSource() As ICollection
Dim dt As DataTable
Dim dr As DataRow
Dim i As Integer
'create a DataTable
dt = New DataTable()
dt.Columns.Add(New DataColumn("StringValue", GetType(String)))
dt.Columns.Add(New DataColumn("BoolValue", GetType(Boolean)))
dt.Columns.Add(New DataColumn("CurrencyValue", GetType(Double)))
'Make some rows and put some sample data in
For i = 1 To 5
dr = dt.NewRow()
dr(0) = "Item " + i.ToString()
If (i Mod 2 <> 0) Then
dr(1) = True
Else
dr(1) = False
End If
dr(2) = 1.23 * (i + 1)
'add the row to the datatable
dt.Rows.Add(dr)
Next
'return a DataView to the DataTable
CreateDataSource = New DataView(dt)
End Function
Sub Page_Load(sender as Object, e as EventArgs)
if not IsPostBack then
DataGrid4.DataSource = CreateDataSource()
DataGrid4.DataBind()
end if
End Sub
Private Sub DataGrid4_ItemDataBound(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.DataGridItemEventArgs)
trace.warn("in itemdatabound")
Select Case e.Item.ItemType
Case ListItemType.Item, ListItemType.AlternatingItem
Dim editButton As LinkButton = New LinkButton()
editButton = CType(e.Item.Cells(0).Controls(0), LinkButton)
editButton.Attributes.Add("name", "#" & editButton.UniqueID)
Case ListItemType.EditItem
Dim UpdateButton As LinkButton = New LinkButton()
UpdateButton = CType(e.Item.Cells(0).Controls(0),
LinkButton)
UpdateButton.Attributes.Add("name", "#" &
UpdateButton.UniqueID)
End Select
End Sub
Private Sub DataGrid1_ItemDataBound(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.DataGridItemEventArgs)
trace.warn("in itemdatabound")
Select Case e.Item.ItemType
Case ListItemType.Item, ListItemType.AlternatingItem
Dim editButton As LinkButton = New LinkButton()
editButton = CType(e.Item.Cells(0).Controls(0), LinkButton)
editButton.Attributes.Add("name", "#" & editButton.UniqueID)
Case ListItemType.EditItem
Dim UpdateButton As LinkButton = New LinkButton()
UpdateButton = CType(e.Item.Cells(0).Controls(0),
LinkButton)
UpdateButton.Attributes.Add("name", "#" &
UpdateButton.UniqueID)
End Select
End Sub
Private Sub DataGrid4_EditCommand(ByVal source As Object, ByVal e As
System.Web.UI.WebControls.DataGridCommandEventArgs)
trace.warn("in editCommand")
DataGrid4.DataSource = CreateDataSource()
DataGrid4.DataBind()
End Sub
Private Sub DataGrid4_CancelCommand(ByVal source As Object, ByVal e As
System.Web.UI.WebControls.DataGridCommandEventArgs)
trace.warn("in cancelCommand")
DataGrid4.EditItemIndex = -1
DataGrid4.DataSource = CreateDataSource()
DataGrid4.DataBind()
End Sub
Private Sub DataGrid4_UpdateCommand(ByVal source As Object, ByVal e As
System.Web.UI.WebControls.DataGridCommandEventArgs)
DataGrid4.EditItemIndex = -1
DataGrid4.DataSource = CreateDataSource()
DataGrid4.DataBind()
End Sub
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>View Positions</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
</style>
</head>
<body>
<form method="post" name="form1" class="BodyText" runat="server">
<div align="left"><a href="addPositions.aspx">Add New Positions</a></div>
<p>
<asp
ataGrid id="DataGrid4" runat="server" BorderColor="#CC9966"
BorderStyle="None" BorderWidth="1px" BackColor="White" CellPadding="4"
onItemDataBound="DataGrid4_ItemDataBound"
onEditCommand="DataGrid4_EditCommand"
onUpdateCommand="DataGrid4_UpdateCommand"
onCancelCommand="DataGrid4_CancelCommand">
<HeaderStyle HorizontalAlign="center" BackColor="#c0edee"
ForeColor="#2FABAD" Font-Name="Verdana, Arial, Helvetica, sans-serif"
Font-Bold="true" Font-Size="Smaller"/>
<ItemStyle BackColor="#F2F2F2" Font-Name="Verdana, Arial, Helvetica,
sans-serif" Font-Size="Smaller"/>
<AlternatingItemStyle BackColor="#E5E5E5" Font-Name="Verdana, Arial,
Helvetica, sans-serif" Font-Size="Smaller"/>
<FooterStyle HorizontalAlign="center" BackColor="#E8EBFD"
ForeColor="#3D3DB6" Font-Name="Verdana, Arial, Helvetica, sans-serif"
Font-Bold="true" Font-Size="Smaller"/>
<PagerStyle BackColor="white" Font-Name="Verdana, Arial, Helvetica,
sans-serif" />
<Columns>
<asp:EditCommandColumn ButtonType="LinkButton"
UpdateText="Update"
CancelText="Cancel"
EditText="Edit">
</asp:EditCommandColumn>
</Columns>
<PagerStyle HorizontalAlign="Center" ForeColor="#330099"
BackColor="#FFFFCC">
</PagerStyle>
</asp
ataGrid><br>
</form>
</body>
</html>
**********************************************************************************
Both Mozilla and IE should look the same, but smaller.
3rd: adding the style a {smaller}
***********************************************************************************
<%@ Page Language="VB" Debug="true" ContentType="text/html"
ResponseEncoding="iso-8859-1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<%@ Import Namespace="System.Collections" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<script runat="server">
Function CreateDataSource() As ICollection
Dim dt As DataTable
Dim dr As DataRow
Dim i As Integer
'create a DataTable
dt = New DataTable()
dt.Columns.Add(New DataColumn("StringValue", GetType(String)))
dt.Columns.Add(New DataColumn("BoolValue", GetType(Boolean)))
dt.Columns.Add(New DataColumn("CurrencyValue", GetType(Double)))
'Make some rows and put some sample data in
For i = 1 To 5
dr = dt.NewRow()
dr(0) = "Item " + i.ToString()
If (i Mod 2 <> 0) Then
dr(1) = True
Else
dr(1) = False
End If
dr(2) = 1.23 * (i + 1)
'add the row to the datatable
dt.Rows.Add(dr)
Next
'return a DataView to the DataTable
CreateDataSource = New DataView(dt)
End Function
Sub Page_Load(sender as Object, e as EventArgs)
if not IsPostBack then
DataGrid4.DataSource = CreateDataSource()
DataGrid4.DataBind()
end if
End Sub
Private Sub DataGrid4_ItemDataBound(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.DataGridItemEventArgs)
trace.warn("in itemdatabound")
Select Case e.Item.ItemType
Case ListItemType.Item, ListItemType.AlternatingItem
Dim editButton As LinkButton = New LinkButton()
editButton = CType(e.Item.Cells(0).Controls(0), LinkButton)
editButton.Attributes.Add("name", "#" & editButton.UniqueID)
Case ListItemType.EditItem
Dim UpdateButton As LinkButton = New LinkButton()
UpdateButton = CType(e.Item.Cells(0).Controls(0),
LinkButton)
UpdateButton.Attributes.Add("name", "#" &
UpdateButton.UniqueID)
End Select
End Sub
Private Sub DataGrid1_ItemDataBound(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.DataGridItemEventArgs)
trace.warn("in itemdatabound")
Select Case e.Item.ItemType
Case ListItemType.Item, ListItemType.AlternatingItem
Dim editButton As LinkButton = New LinkButton()
editButton = CType(e.Item.Cells(0).Controls(0), LinkButton)
editButton.Attributes.Add("name", "#" & editButton.UniqueID)
Case ListItemType.EditItem
Dim UpdateButton As LinkButton = New LinkButton()
UpdateButton = CType(e.Item.Cells(0).Controls(0),
LinkButton)
UpdateButton.Attributes.Add("name", "#" &
UpdateButton.UniqueID)
End Select
End Sub
Private Sub DataGrid4_EditCommand(ByVal source As Object, ByVal e As
System.Web.UI.WebControls.DataGridCommandEventArgs)
trace.warn("in editCommand")
DataGrid4.DataSource = CreateDataSource()
DataGrid4.DataBind()
End Sub
Private Sub DataGrid4_CancelCommand(ByVal source As Object, ByVal e As
System.Web.UI.WebControls.DataGridCommandEventArgs)
trace.warn("in cancelCommand")
DataGrid4.EditItemIndex = -1
DataGrid4.DataSource = CreateDataSource()
DataGrid4.DataBind()
End Sub
Private Sub DataGrid4_UpdateCommand(ByVal source As Object, ByVal e As
System.Web.UI.WebControls.DataGridCommandEventArgs)
DataGrid4.EditItemIndex = -1
DataGrid4.DataSource = CreateDataSource()
DataGrid4.DataBind()
End Sub
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>View Positions</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
a {
font-size:smaller;
}
</style>
</head>
<body>
<form method="post" name="form1" class="BodyText" runat="server">
<div align="left"><a href="addPositions.aspx">Add New Positions</a></div>
<p>
<asp
ataGrid id="DataGrid4" runat="server" BorderColor="#CC9966"
BorderStyle="None" BorderWidth="1px" BackColor="White" CellPadding="4"
onItemDataBound="DataGrid4_ItemDataBound"
onEditCommand="DataGrid4_EditCommand"
onUpdateCommand="DataGrid4_UpdateCommand"
onCancelCommand="DataGrid4_CancelCommand">
<HeaderStyle HorizontalAlign="center" BackColor="#c0edee"
ForeColor="#2FABAD" Font-Name="Verdana, Arial, Helvetica, sans-serif"
Font-Bold="true" Font-Size="Smaller"/>
<ItemStyle BackColor="#F2F2F2" Font-Name="Verdana, Arial, Helvetica,
sans-serif" Font-Size="Smaller"/>
<AlternatingItemStyle BackColor="#E5E5E5" Font-Name="Verdana, Arial,
Helvetica, sans-serif" Font-Size="Smaller"/>
<FooterStyle HorizontalAlign="center" BackColor="#E8EBFD"
ForeColor="#3D3DB6" Font-Name="Verdana, Arial, Helvetica, sans-serif"
Font-Bold="true" Font-Size="Smaller"/>
<PagerStyle BackColor="white" Font-Name="Verdana, Arial, Helvetica,
sans-serif" />
<Columns>
<asp:EditCommandColumn ButtonType="LinkButton"
UpdateText="Update"
CancelText="Cancel"
EditText="Edit">
</asp:EditCommandColumn>
</Columns>
<PagerStyle HorizontalAlign="Center" ForeColor="#330099"
BackColor="#FFFFCC">
</PagerStyle>
</asp
ataGrid><br>
</form>
</body>
</html>
******************************************************************************
Here both IE and Mozilla get smaller (IE is smaller the Mozilla, because of
the previous setting of the font-size in the DataGrid)
Very confusing and time wasting.
The solutions seems to be to NEVER use font-size in the DataGrid if you
don't know what browser you are going to use. What I was finding that in IE
I was not able to see the link at all, it was so small.
BTW, Netscape works the same way as Mozilla.
Thanks,
Tom.