Customizing FireFox 4 Tabs. Small icon on inactive, Hover and Active Expanded

FireFox 4 added CSS 3 support to their chrome interface. As I typically have 50+ tabs open at one time and hate horizontal scrolling in the tab bar I wanted to maximize the space available. The style below makes all inactive tabs 1px wide showing only the favicon. Hover and Active tabs get expanded to 150px wide allowing you to easily tell what tab you are currently on as well as being able to hover over inactive tabs showing the title information.

To accomplish this, edit –> If C:\Users\[USERNAME]\AppData\Roaming\Mozilla\Firefox\Profiles\[PROFILENAME]\chrome\userChrome.css with the code below. If the file doesn’t already exist, create a new file.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

/* DRR Make tabs small */

/* Shrink tab text by 20% */
.tabbrowser-tabs .tab-text {
font-size: 80% !important;
}

.tabbrowser-tab:not([pinned]) {
  min-width: 1px !important;
}

.tabbrowser-tab[selected="true"] {
width: 150px !important;
}

/* If the tab isn't selected, but is being hovered on, show the text, make it min 128px wide 
.tabbrowser-tabs *|tab:hover {
width: 150px !important;
}
*/

/* DRR Make Tabs small end */

IE 8 Standard Mode vs Compatibility Mode

We had an issue where a menu dropdown was rendering differently on the dev server in contrast to what we had locally. After doing an exhaustive comparison of the css on local and on the dev server they were identical.

As it turns out IE8 has compatibility modes which allow the user to choose how the website will be rendered. You can acess this feature via: Tools | Compatibility View Settings. This feature is quite useful for sites that haven’t been updated to support more strict HTML standards. What is of interest to us is IE8 defaults to have all intranet sites put into “Compatibility View”. This explained why it rendered perfectly fine in IE8 locally but exhibited rendering issues once accessed on the dev server via the intranet.

We were able to fix this issue by adding the following meta tag to the head section of the MasterPage. This basically tells IE8 to render in Standard Mode. This has no effect on IE6 so things work as designed:

<%--This enforces IE8 standard mode since compatibility view throws off styling--%>    
    <meta http-equiv="X-UA-Compatible" content="IE=8" >

Edit: It appears that if the Intranet zone is configured to “Display intranet sites in Compatibility View” this solution above will not force the pages into IE8 Standards mode as the browser settings are overriding this.

To get around this you need to have a Group Policy set up.

Edit (01/16/2012) It appears you can get around this by adding the necessary property to the page header.

Adding the following to the base page class that all pages inherit from will ensure all pages render in IE8 standard mode (not compatibility mode) even if viewing from Intranet which defaults to compatibility mode.

Response.AddHeader("X-UA-Compatible", "IE=EmulateIE8"); 

More info

How To Make ASP.NET Textbox Scrollable When Disabled

Instead of doing TextBox.Enabled = false;

// Disable comments but keep the scrollbar
this.tbComment.Enabled = true;
this.tbComment.ReadOnly = true;
this.tbComment.CssClass = "disabledTextBox";

.disabledTextBox
{
background-color: #FFFFFF;
border: #A7A6AA 1px solid;
color: #A7A6AA;
cursor: default; 
}

How To Programmatically Apply CSS Class to DIV

DIVSteps.Attributes.Add(“class”, “hide”);
[/source]

Change TextBox Border Color Identifying Issue During Validation

ASPX

<asp:textbox ID="textbox1" runat="server" />
<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="*" onservervalidate="CustomValidator1_ServerValidate" />
<asp:Button ID="Button1" runat="server" Text="Button" /> 

Code Behind

protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)
{
if (textbox1.Text == String.Empty)
{
textbox1.Style.Add("border", "solid 1px red");
args.IsValid = false;
}
} 

How to make controls scrollable (GridView, DropDownList, CheckBoxList etc)

Envelope your control inside of a div that has it’s vertical (overflow-y) set to scroll and horizontal (overflow-x) set to hidden. This will create a vertically container for your control. Useful in cases when you have long sets of data that you want to scroll through them (example GridView).

<style type="text/css">
    .ScrollDiv
    {
        border-color: Gray;
        border-style: solid;
        border-width: 1px;
        height: 200px;
        width: 210px;
        overflow-y: scroll;
        overflow-x: hidden;
    }    
</style>

        <div class="ScrollDiv">
            <asp:CheckBoxList ID="CheckBoxList1" runat="server">
                <asp:ListItem>Test1</asp:ListItem>
                <asp:ListItem>Test2</asp:ListItem>
                <asp:ListItem>Test3</asp:ListItem>
                <asp:ListItem>Test4</asp:ListItem>
                <asp:ListItem>Test5</asp:ListItem>
                <asp:ListItem>Test6</asp:ListItem>
                <asp:ListItem>Test7</asp:ListItem>
                <asp:ListItem>Test8</asp:ListItem>
                <asp:ListItem>Test9</asp:ListItem>
                <asp:ListItem>Test10</asp:ListItem>
                <asp:ListItem>Test11</asp:ListItem>
                <asp:ListItem>Test12</asp:ListItem>
                <asp:ListItem>Test13</asp:ListItem>
                <asp:ListItem>Test14</asp:ListItem>
            </asp:CheckBoxList>
        </div>

How To Render Column Data In GridView But Hide It From The User

There may be a time where you want to hide a GridView Column from a user but still need to access the data bound to the particular column.

Use CSS and apply it to the BoundField’s ItemStyle:

<style type="text/css">
    .hiddencol
    {
        display:none;
    }

</style>

    <asp:GridView ID="gvWorkActivitySelections" runat="server" AutoGenerateColumns="False"
        EnableModelValidation="True" OnRowCommand="ChoicesUpdate" 
        ShowHeader="False">
        <Columns>
            <asp:ButtonField ButtonType="Button" Text="Remove" CommandName="remove" />
            <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
            <asp:BoundField DataField="Id" HeaderText="Id" SortExpression="Id" >           
            <ItemStyle CssClass="hiddencol" />
            </asp:BoundField>
            
            
        </Columns>
    </asp:GridView>

More Info

How to keep line-spacing correct when using subscript

.superscript { font-size: xx-small; vertical-align:top;}

<sup class="superscript">SM</sup>

Replace Text With An Image Using CSS

This technique works by pushing the text down inside the header with a rather large line-height (it must be at least twice the height). Then the overflow: hidden hides the text since it’s overflowing. Source

<style type="text/css">
  .ccbnRequired
        {         
            
             width: 13px;
            height: 15px;   
               
            background-image:url("/images/skins/white/forms/form_required.gif");
            background-repeat:no-repeat;

            overflow: hidden;
            line-height: 500px;                  
           
        }
</style>

How to Override Table cellSpacing and cellPadding properties in IE6, IE7 and FireFox

This will force your table cellPadding and cellSpacing properties to 0 in Firefox, IE6, IE7, IE8.

 table
        {
            border-collapse: collapse;             
            *border-collapse: expression('separate', cellSpacing = '0px');  /* IE hack  */      
        }

Source