This is a migrated thread and some comments may be shown as answers.

Vertical Alignment of Table Data Off in Firefox 3.0

13 Answers 179 Views

Grid

This is a migrated thread and some comments may be shown as answers.

13 Answers, 1 is accepted

answered on 08 Oct 2009, 08:34 AM

radgrid-ff-ie8.gif

Hello Levi,

See attached screenshot of a RadGrid with the Office2007 skin shown in Firefox 3 and IE8.

I suggest you to try to isolate the problem by stripping some more code and styles. If you need further assistance, please send us a runnable example.

Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 08 Oct 2009, 07:03 PM

If you go here, you can see it does not align correctly:
http://www.professional-icons.com/bad.jpg

I have no style sheets applied and I have not made any changes to the skin. Here is my markup:

    
            <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
        
            <!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></title>  
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <asp:ScriptManager ID="ScriptManager1" runat="server">  
        
                </asp:ScriptManager> 
        
                <telerik:RadGrid ID="DetailGrid" runat="server" ShowGroupPanel="False" AutoGenerateColumns="false" 
        
                    PageSize="10" Skin="Office2007" ShowFooter="false" OnNeedDataSource="gridOverview_NeedDataSource">  
        
                    <MasterTableView> 
        
                        <PagerStyle AlwaysVisible="false" /> 
        
                        <Columns> 
        
                            <telerik:GridBoundColumn UniqueName="TrafficMedium" SortExpression="TrafficMedium" 
        
                                HeaderText="Traffic Medium" DataField="TrafficMedium" ItemStyle-HorizontalAlign="Left" 
        
                                HeaderStyle-HorizontalAlign="Left">  
        
                                <HeaderStyle></HeaderStyle>  
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn UniqueName="Visits" DataFormatString="{0:#,0}" SortExpression="Visits" 
        
                                HeaderText="Visits" DataField="Visits" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right">  
        
                                <HeaderStyle Width="70px"></HeaderStyle> 
        
                            </telerik:GridBoundColumn> 
        
                        </Columns> 
        
                        <SortExpressions> 
        
                            <telerik:GridSortExpression FieldName="Visits" SortOrder="Descending" /> 
        
                        </SortExpressions> 
        
                    </MasterTableView> 
        
                </telerik:RadGrid> 
        
                </form> 
        
            </body> 
        
            </html>

answered on 09 Oct 2009, 03:01 PM

Hi Levi,

I did some research on the problem and it turned out that the difference in appearance is caused by the different way Firefox and Internet Explorer display text with a given line-height. The issue can be easily reproduced with a regular <table> element.

In our online demos the misalignment is not exhibited, as it seems that the way Firefox displays text is influenced by other styles and HTML elements on the page, which normally have nothing to do with the RadGrid.

Fortunately, an easy workaround exists - change the RadGrid line-height until the text alignment becomes equal:

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Data" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void gridOverview_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

DataTable dt = new DataTable();

DataRow dr;

int colsNum = 4;

int rowsNum = 10;

string colName = "Column";

for (int j = 1; j <= colsNum; j++)

{

dt.Columns.Add(String.Format("{0}{1}", colName, j));

}

for (int i = 1; i <= rowsNum; i++)

{

dr = dt.NewRow();

for (int k = 1; k <= colsNum; k++)

{

dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);

}

dt.Rows.Add(dr);

}

(sender as RadGrid).DataSource = dt;

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadControls for ASP.NET AJAX</title>

<style type="text/css">

.RadGrid .rgRow td,.RadGrid .rgAltRow td{line-height:17px}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid ID="DetailGrid" runat="server" Width="400px" Skin="Office2007" OnNeedDataSource="gridOverview_NeedDataSource" />

</form>

</body>

</html>

Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 12 Oct 2009, 10:02 AM

radgrid-ff-ie8.gif

Hi Levi,

Yes, I tested in both browsers. See the attached screenshot.

Generally, you can play with top and bottom paddings and line-height until you get an acceptable look.

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 13 Oct 2009, 07:29 AM

Hi Levi,

Well, I can see that setting a 17px line-height DOES fix the problem - the vertical alignment is the same in IE and FF.

Like I said, the problem is in the difference in rendering of text in Internet and Firefox - for some line heights the letters are 1px lower in Firefox. We do not consider this a problem. You have the following options:

1) override the line-height to a smaller or larger value
2) use browser-specific CSS rule to tweak the line-height and/or the padding in one browser only

In case you haven't tried it yet, you can also experiment with an ordinary <table> to get a better understanding of the discrepancy.

Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 13 Oct 2009, 07:51 AM

Well, yet another excuse and passing the blame. You yourself were surprised when you realized that it was only working on your site because of some unrelated css on the page. Obviously it doesn't work as intended if it only works in your demo section correctly. Clearly you don't know why it works on your site but no where else. If you could figure this out, maybe the problem could be fixed.

What are you looking at anyway? Line height at 17px creates the same problem in IE8. The screenshot shows this change clearly. Who cares if it makes it consistent if both browsers are now displaying incorrectly. I want it to display like it's supposed to with line height 16px and the text vertically centered. Line it up and tell me they are now the same as the original. They are not. Also, it is not the same as what's shown on your site. I am so annoyed by this lack of support. Your CSS is bad. Plain and simple. If you can't make grids that display properly in both browsers, then why should anyone bother to buy your components. Don't push responsiblity on your clients to fix your css. If you ask me it's just false advertisement. Hey our grid displays great on our site, but won't when you actually download and pay for it. So ridiculous really. It's obvious that you don't want to go through the effort to learn how to fix it and support your customers so they get what they see on your site. Don't tell me it's impossible when it works on your site. You should tell your customers, "Sorry guys we only tested on our own site. You'll have to have your text off center and a pixel bigger if you want to use our grid and it can't look the same as advertised." People invest a lot of time and money into learning and using your product only to receive this type of response is just unbelievable to me. You take a screenshot of what's on your site and then show me how 17px lines up the same on both browsers, and is the same line height as what's on your site. So frustrating to constantly report issues to you guys to fix things that should already be working. A waste of time.

answered on 14 Oct 2009, 02:29 AM

Dimo,

Sorry for the duplicate posts. There were some server errors and it kept coming up with an error when trying to reply. I guess duplicates went through. I thought I had a solution working but it only worked when the data was on a single line. That being said, I deleted it anyway.

I tried adjusting the padding as you suggested, but this does not work. While it corrects the problem in Firefox, it creates the opposite problem in IE8, where the text becomes a pixel too high. Is there a solution that will fix this problem without breaking it in one browser or the other?

Thanks for your help,
Levi

answered on 16 Oct 2009, 12:51 PM

Hello Levi,

Please review the following example:

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Data" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

DataTable dt = new DataTable();

DataRow dr;

int colsNum = 4;

int rowsNum = 10;

string colName = "Column";

for (int j = 1; j <= colsNum; j++)

{

dt.Columns.Add(String.Format("{0}{1}", colName, j));

}

for (int i = 1; i <= rowsNum; i++)

{

dr = dt.NewRow();

for (int k = 1; k <= colsNum; k++)

{

dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);

}

dt.Rows.Add(dr);

}

(sender as RadGrid).DataSource = dt;

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadControls for ASP.NET AJAX</title>

<style type="text/css">

div.LineHeightGrid .rgRow td,

div.LineHeightGrid .rgAltRow td

{

padding-top:3px;

line-height:17px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<table><tr><td style="vertical-align:top">

<p>line height 16px, top padding 4px, bottom padding 3px</p>

<telerik:RadGrid ID="RadGrid1" runat="server"

Width="500px" Skin="Office2007" OnNeedDataSource="RadGrid_NeedDataSource" />

</td><td style="vertical-align:top">

<p>line height 17px, top padding 3px, bottom padding 3px</p>

<telerik:RadGrid ID="RadGrid2" runat="server" CssClass="LineHeightGrid"

Width="500px" Skin="Office2007" OnNeedDataSource="RadGrid_NeedDataSource" />

</td></tr></table>

</form>

</body>

</html>

Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.