CSS Font-size in DataGrid

T

tshad

I am having trouble with links in my DataGrid.

I have Links all over my page set to smaller and they are consistant all
over the page in both Mozilla and IE, except for the DataGrid.

Here is a snippet from my .css file:
***************************
body {
margin:0;
padding:0;
}
th {
background-color:#2FABAD;
color:white;
}
td {
font-size:smaller;
}
a {
font-size:smaller;
}
********************************************

I only have the font-size set in my "td" and "a" rules.

This makes everything work in both IE and Mozilla outside of the Datagrid
and the links are the same size in the Datagrid for Mozilla.

In IE, however the links always seem to be smaller than all the other links.
The text, however, is always the same size in both IE and Mozilla.

If I remove the "td" or "a", all the links get larger (as I would expect),
but in IE the links in the DataGrid is still smaller than the other links on
the page.

It is almost as if the Page is setting the links to smaller and the DataGrid
is setting smaller to the smaller size (doubling the smaller in essence) -
But only in IE.

What is causing this and how do I get around it?

Thanks,

Tom
 
G

Guest

Tom, I played around a bit and couldn't duplicate your problem, but I do know
that relative sizes (e.g. "smaller" vs. "small") are always relative to the
parent element, not to some absolute, so I think a smaller <a> within a
smaller <td> is going to be "twice" as small (although I couldn't get this to
happen in IE6, which doesn't say much for the theory). Do you have the same
problem if you go with absolute sizes (e.g. 12px, small, etc.)?

Bill
 
T

tshad

Bill Borg said:
Tom, I played around a bit and couldn't duplicate your problem, but I do
know
that relative sizes (e.g. "smaller" vs. "small") are always relative to
the
parent element, not to some absolute, so I think a smaller <a> within a
smaller <td> is going to be "twice" as small (although I couldn't get this
to
happen in IE6, which doesn't say much for the theory). Do you have the
same
problem if you go with absolute sizes (e.g. 12px, small, etc.)?

I'll have to play with it some more and get a small example to see if I can
recreate it and post it. I don't know about fixed sizes.

I know I am using IE6 and that is where it is happening

But I know I have other links on my screen (and they are all in TD's in some
form or another) that don't change and match Mozilla's size. Only inside of
my DataGrid are they a problem and only on IE.

Thanks,

Tom
 
M

Marc Jennings

To style elements within a data grid, you can specifically add rules
using the following kind of syntax.
 
T

tshad

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:DataGrid 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:DataGrid><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:DataGrid 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:DataGrid><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:DataGrid 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:DataGrid><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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top