Solved

Vertical header shows fuzzy font in IE9 but not in IE8

Posted on 2013-01-19
22
637 Views
Last Modified: 2013-09-20
Hi,

I have a gridview with vertical header.
Here is my css for the vertical header:
.verticaltextPDW
{  
 filter: flipH() flipV();
  writing-mode: tb-rl;
font-weight:lighter;
 text-align:left;
 text-align:left;
 height:150px;
  font-family:Verdana;
 }
<HeaderTemplate><div class='verticaltextPDW' >&nbsp;Integrate batch</div><input id="Cb27" type="checkbox" onclick="CheckAll(this,27)" runat="server" />
                                </HeaderTemplate>
In IE8 it looks normal but in IE9 it is bold and fuzzy, hard to read. I tried changing the font-weight with many different option but the result was always the same. See atached picture
Capture.JPG
0
Comment
Question by:arnololo123
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 10
22 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38796745
It most likely has to do with the filter property.
..Visual Filters and Transitions, which is deprecated as of Windows Internet Explorer 9.
http://msdn.microsoft.com/en-us/library/ms532992%28v=vs.85%29.aspx

You might want to give CSS3 a try for IE > 8 and other browsers.

<!--[if gt IE 8]><!--> /*  use css3 */ <!--<![endif]-->

Open in new window

With the above conditional comment you can target different versions of IE. But better, if you're not already using it, use the Paul Irish technique for ie conditional comments
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
0
 

Author Comment

by:arnololo123
ID: 38796832
I looked at those link but can't get it to work with my code
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38796844
If you post a link to your page I can help.
0
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 

Author Comment

by:arnololo123
ID: 38796897
I really apreciate it but it is for an intranet, so you can't access it. Can I just publish the code
for the header?
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38796906
That would be helpful, but if you could publish a complete page with resources, it would be better. You can of course remove any sensitive data.
0
 

Author Comment

by:arnololo123
ID: 38797120
Hi

Here is the aspx with the gridview:
 <aspnet:GridView ID="GV" runat="server" Height="100%"  AutoGenerateColumns="False"
       DataSourceID="SqlDS_mmr"     ForeColor="Black" AllowPaging="False"
         >
                         
                        <BoundaryStyle BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" />
                         
                        <RowStyle HorizontalAlign="Center" />
                        <Columns>
                           
                            <asp:BoundField DataField="PartNumber"  HeaderText="Part Number"
                SortExpression="PartNumber" HeaderStyle-Width="90px"/>
                            <asp:BoundField DataField="description" HeaderText="Description"
                SortExpression="description"  HeaderStyle-Width="260px"  />
                            <asp:BoundField DataField="MaterialType" HeaderText="Material Type"
                SortExpression="MaterialType" HeaderStyle-Width="58px"/>
                     <asp:TemplateField >
                                <ItemTemplate> <asp:CheckBox ID="CB_M1" runat="server" Checked='<%# Bind("Manuf1") %>' Enabled="False" /></ItemTemplate>
                                <HeaderStyle BackColor="#CCFFCC"   CssClass="headertest"  />
                                <HeaderTemplate><div class='verticaltextPDW' title="Rounting">&nbsp;Routing
                                </div><input id="Cb0" type="checkbox" onclick="CheckAll(this,0)" runat="server" />
                                </HeaderTemplate>
                                <ItemStyle BackColor="#CCFFCC"  />
                            </asp:TemplateField>
                                <asp:TemplateField>
                                <ItemTemplate> <asp:CheckBox ID="CB_M2" runat="server" Checked='<%# Bind("Manuf2") %>' Enabled="False" /></ItemTemplate>
                                <HeaderStyle BackColor="#CCFFCC"   height="150px"  CssClass="headertest"  />
                                <HeaderTemplate><div class='verticaltextPDW' title="Prod. version (Work center)">&nbsp;Prod. version (Work center)</div><input id="Cb1" type="checkbox" onclick="CheckAll(this,1)" runat="server" />
                                </HeaderTemplate>
                                <ItemStyle BackColor="#CCFFCC" />
                            </asp:TemplateField>    
</aspnet:Gridview  

And here are the 2 class from the CSS file:
.verticaltextPDW
{  
/*-ms-transform: rotate(270deg);*/
  writing-mode: tb-rl;
filter: flipH() flipV();
  font-weight:normal;
 text-align:left;
 height:150px;
  font-family:Verdana;
 }
.headertest
{
  padding:0px;
 width:20px;
 }
There is not much happening in the cs file. You can see from  my first post the screen shot of how it looks like.
Thanks a lot.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38797257
sorry, I can't do anything with the asp. I would need the rendered HTML.

Basically what I'm suggesting is using IE conditional comments at the top of your document, and then using the filter for IE < 9 and the transform for other browsers:

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    <head>
        <title></title>
        <meta charset="UTF-8">
        <style>

            .verticaltextPDW{   
                -webkit-transform: rotate(270deg);
                -moz-transform: rotate(270deg);
                -o-transform: rotate(270deg);
                -ms-transform: rotate(270deg);
                
                writing-mode: tb-rl; 
                
                font-weight:normal; 
                text-align:left;
                height:150px;
                font-family:Verdana;
            }
            .lt-ie9 .verticaltextPDW{
                filter: flipH() flipV();
            }
            .headertest{
                padding:0px;
                width:20px;
            }
        </style>

    </head>
    <body>
        <!-- your HTML here -->
    </body>
</html>

Open in new window

0
 

Author Comment

by:arnololo123
ID: 38801628
Thanks, but when I use the  -ms-transform: rotate(270deg); it completely throw of my vertical layout.
I have attached the rendered HTML.
Let me know if there is anything else you need.

Thanks for your help
MMR.htm
Capture.JPG
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38801757
I don't mean to be a pain, but you need to attach the css files too.

Cheers.
0
 

Author Comment

by:arnololo123
ID: 38807162
I have attached the CSS file, the file is big but on few style are used from this css file for the rendered HTML.

Thanks
timetracker.css
0
 

Author Comment

by:arnololo123
ID: 38820417
Hello kozaiwaniec, I was wondering if you had a chance to look at my issue. I have been trying many different way but can't get it to work. Thanks in advance.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38820572
hi, sorry, I haven't. i will look at it tomorrow - just got swamped.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38822310
OK, here's a working example.

http://candpgeneration.com/EE/vertical-headers/index.html

these are the CSS changes you need to make:


.verticaltext2
{   
    font-weight:bold; 
    text-align:left;
    height:90px;

}
.lt-ie9 .verticaltext2{
    filter: flipH() flipV();
    writing-mode: tb-rl; 
    
}
.not-ie .verticaltext{   
    font-weight:bold; 
    text-align:center;
    vertical-align:middle;

}
.lt-ie9 .verticaltext{
    font-weight:bold; 
    text-align:center;
    filter: flipH() flipV();
    writing-mode: tb-rl; 
}
.not-ie .verticaltextPDW{   
    font-weight:normal; 
    text-align:left;
    font-family:Verdana;

    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);

    -webkit-transform-origin: 20px 20px;
    -moz-transform-origin: 20px 20px;
    -ms-transform-origin: 20px 20px;
    -o-transform-origin: 20px 20px;
    transform-origin: 20px 20px;

    width:150px;
    height:20px;
    text-align:left;
    padding:0 0 0 17px;
    margin:0;
    white-space: nowrap;
}
.lt-ie9 .verticaltextPDW{   
    filter: flipH() flipV();
    writing-mode: tb-rl;
    height:150px;
     font-weight:normal; 
    text-align:left;
    font-family:Verdana;
}
.not-ie .headertest{
    vertical-align: bottom;
}
.headertest{
    padding:0px;
    width:20px;
}
.not-ie .headertestExcep{
    vertical-align: bottom;
}
.headertestExcep{
    padding:0px;
    width:29px;
    
}

Open in new window


You will also need to add this at the top of your document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if lt IE 9]> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" class="lt-ie9" > <![endif]-->
<!--[if gte IE 9]><!--> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" class="not-ie"> <!--<![endif]-->

Open in new window

0
 

Author Comment

by:arnololo123
ID: 38824324
Thank you so much, I Am about to try it.
0
 

Author Comment

by:arnololo123
ID: 39418553
Hello Thanks again for you great help.

I have recently a user  using IE7 who complained about alignment. I have attached the screen shot.
I tried to modify your CSS to make it work for IE7 but was not successful.
Could you help again?

Thanks in advance.
CaptureIE7.JPG
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39418613
You should encourage the user to update their browser. IE7 is very old.

if you want to apply IE7 specific classes, add this to the head:

<!--[if lt IE 8]> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" class="lt-ie8" > <![endif]-->

then in the css, use:

.lt-ie8 .someclass{
...
}
0
 

Author Comment

by:arnololo123
ID: 39418679
Thanks, I already do that to detect when IE is 9 or greater or below 9. So it works for IE 8,9,10 but for IE7 it does not and I do not know how to modify my CSS to make it work for IE7.

Here are the class that I use: .not-ie is for ie greater or equal than 9. You can also find my code in an attachment above.
.not-ie .verticaltextPDW{  
    font-weight:normal;
    text-align:left;
    font-family:Verdana;

    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);

    -webkit-transform-origin: 20px 20px;
    -moz-transform-origin: 20px 20px;
    -ms-transform-origin: 20px 20px;
    -o-transform-origin: 20px 20px;
    transform-origin: 20px 20px;

    width:150px;
    height:20px;
    text-align:left;
    padding:0 0 0 17px;
    margin:0;
    white-space: nowrap;
}
.lt-ie9 .verticaltextPDW{  
    filter: flipH() flipV();
    writing-mode: tb-rl;
    height:150px;
     font-weight:normal;
    text-align:left;
    font-family:Verdana;
}
.not-ie .headertest{
    vertical-align: bottom;
}
.headertest{
    padding:0px;
    width:20px;
}
.not-ie .headertestExcep{
    vertical-align: bottom;
}
.headertestExcep{
    padding:0px;
    width:29px;
   
}
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39418771
I looked at it in IE7, and there are other issues there too. It's really not worth trying to make it work for IE7.

I wish people would stop trying to make these obsolete browsers behave - people need to upgrade. If somebody chooses to use an obsolete browser, then they should not have expectations that it will perform like a modern browser.

I don't support anything below IE8 anymore.
0
 

Author Comment

by:arnololo123
ID: 39423038
Well, unfortunately I do not need to support IE7, so any suggestion about where is the problem would be helpful.

REgards
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 39423049
I already answered the original question.

If you want IE version specific styles, you can use the following conditionals at the top of your page:
<!--[if lt IE 7 ]> <html class="lt-ie9 ie6 nojs" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="lt-ie9 ie7 nojs" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="lt-ie9 ie8 nojs" lang="en"> <![endif]-->
<!--[if IE 9]> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" class="lt-ie9" > <![endif]-->
<!--[if gte IE 9]><!--> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" class="not-ie"> <!--<![endif]-->

Open in new window


then in CSS to target ONLY IE7:

.ie7 .class-override{

}

Open in new window


placed below whatever class you want to override.

You will have to experiment. LIke I said, I looked at it in IE7 and tried to make some adjustments, but there is no quick or easy fix for the issue.

You should open a new question specifically for IE7, and get some fresh eyes on the it.
0

Featured Post

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question