Solved

Vertical header shows fuzzy font in IE9 but not in IE8

Posted on 2013-01-19
22
619 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
  • 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
 

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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

746 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now