Vertical Header Text Affecting Borders

[Rob]

I have a RadGrid (v2009.2.701.35) using the Web20 theme.  In my attached screen shot, the grid in the upper half is the grid with the default horizontal text in the header.  Notice the uniform borders between all of the header columns.  The grid in the lower half is a result of changing the header text to render vertically.  Now notice the difference in column widths between columns 1 & 2 vs columns 2 & 3 or 3 & 4.  Is there any way to get uniform header column borders with vertical header text?  Here's my CSS tweak w/ changes in bold:

.RadGrid_Web20 .rgHeader, .RadGrid_Web20 .rgHeader  a
{
    color: #ffffff !important;
    font-family: Arial !important;
    font-size: 8pt !important;
    font-weight: bold !important;
    text-decoration: none;
    text-align: left;
    border-color: #FFFFFF !important;
    writing-mode: tb-rl !important;
    filter: flipV flipH !important;
}

[Andrey]

Hello,

Currently, you are applying white color to all borders of the header cell. Thus between the columns you are getting two borders one from the right border of the left column and one from the left border of the right column. You could try changing only the color of the right border. Namely:

div.RadGrid_Web20 .rgHeader, div.RadGrid_Web20 .rgHeader a
        {
            color: #ffffff ;
            font-family: Arial ;
            font-size: 8pt ;
            font-weight: bold ;
            text-decoration: none;
            text-align: left;
            border-right-color: #FFFFFF ;
            writing-mode: tb-rl ;
            filter: flipV flipH ;
        }

Additionally you could increase the specificity of your setting by adding div element in front of each class instead of using important clauses which are deprecated.

Give these suggestions a try and check whether the issue is resolved.

Kind regards,
Andrey
the Telerik team

[Rob]

Unfortunately, your suggestion did not work for me.  The border color does not change for me.  Have you actually tried your suggestion?  It seems to be more of a rendering issue than something that could be fixed with a CSS.  It looks like the left side of column 2 is overlapping the right border of column 1 by 1 pixel.  Do you have more suggestions for me to try?  Thanks.

[Andrey]

Hello Row,

Yes, we tested your case before suggesting the resolution and we were able to replicate the issue under IE7 only. Under which browser you are experiencing this behavior?

I am sending you the project I used for testing to compare with your project, then make the necessary adjustments and check whether the issue is resolved. 

If the issue is still not resolved after trying these suggestions, please send us your project to test/debug it locally.

Kind regards,
Andrey
the Telerik team

[Rob]

I was able to tweak your example in VS2010 & targetFramework=4.0 to get the look and feel that I was looking for like this (see bold):

div.RadGrid_Web20 .rgHeader, div.RadGrid_Web20 .rgHeader a
        {
            color: #ffffff ;
            font-family: Arial ;
            font-size: 8pt ;
            font-weight: bold ;
            text-decoration: none;
            text-align: left;
            background: #336699;
            border-left-color: #336699;
            border-right-color: #FFFFFF ;
            writing-mode: tb-rl ;
            filter: flipV flipH ;
        }

However, I forgot to state that I was using VS2008 & the 3.5 target framework.  Also your example uses v2011.3.1115.40 & I'm still on v2009.2.701.35.  So I'd appreciate it if you could provide an example using:

- IE7
- VS2008
- Target Framework 3.5
- Telerik.Web.UI.dll (v2009.2.701.35)

I am unable to get your example to work w/ these requirements.  We are moving in the right direction.  Thanks!

[Andrey]

Hello Rob,

We are getting appropriate behavior on our side with the setup we have sent you. In order to assist you further we need to inspect your code or to take a look at how things are rendered in native environment.

Could you send us live URL which we can inspect, or if your project is not yet deployed you could open formal support ticket and send us runnable version of your code which we can test/debug locally.

Regards,
Andrey
the Telerik team

[Rob]

A formal support ticket has been submitted.