Vertical align label (as block element) text and textbox text with CSS in ASP .NET

If you use a label and an input element as block element with CSS, you can’t use vertical-align, border-top, padding-top or margin-top for vertical alignment of the text values.  

image

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Rvl.HelperTools.Website._Default" %>

<!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>Untitled Page</title>

    <!-- Load css styles -->
    <style type="text/css">
        .Main
        {
            background-color: white;
            margin-left: auto; /* Center mainTable for >= IE6  */
            margin-right: auto; /* Center mainTable for >= IE6  */
        }
        .LeftLabelColumn
        {
            display: block;
            margin-left: 10px;
            margin-right: 10px;
            height: 22px;
            padding-top: 5px;
        }
        .LeftValueColumn
        {
            display: block;
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>

    <script language="javascript" type="text/javascript">
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div class="Main">
        <div style="float: left; border-top: solid 1px white;">
            <asp:Label ID="Label1" CssClass="LeftLabelColumn" runat="server" Text="Customer"></asp:Label>
            <asp:Label ID="Label2" CssClass="LeftLabelColumn" runat="server" Text="City"></asp:Label>
            <asp:Label ID="Label3" CssClass="LeftLabelColumn" runat="server" Text="Supplier"></asp:Label>
            <asp:Label ID="Label4" CssClass="LeftLabelColumn" runat="server" Text="Products"></asp:Label>
        </div>
        <!-- Because we can't use border-top, margin-top or padding-top on a textbox, we surround the textboxes with div tags -->
        <div>
            <div style="padding-top: 5px;"><asp:TextBox ID="TextBox1" CssClass="LeftValueColumn" runat="server" Text="Microsoft"></asp:TextBox></div>
            <div style="padding-top: 5px;"><asp:TextBox ID="TextBox2" CssClass="LeftValueColumn" runat="server" Text="Redmond"></asp:TextBox></div>
            <div style="padding-top: 5px;"><asp:TextBox ID="TextBox3" CssClass="LeftValueColumn" runat="server" Text="IBM"></asp:TextBox></div>
            <div style="padding-top: 5px;"><asp:TextBox ID="TextBox4" CssClass="LeftValueColumn" runat="server" Text="Windows, Office"></asp:TextBox></div>
        </div>
    </div>
    </form>
</body>
</html>

Change div or table width and height, with CSS rules based on user screen resolution in ASP .NET by using javascript

If you want to change the width of your main div or main table element in ASP .NET, you can use margin-left: auto; and margin-right: auto; to dynamically change the width of these elements based on the browser width, but this width will vary when you change you’re browser screen and older browser (IE6) don’t support the min-width css statement. If you want to have an exact width of the main element you can set the width by using css, but then you will have to choose a fixed value for all user screen resolutions. With the use of javascript, you can change the css value dynamically based on the user screen resolution.

If the main table or main div has an exact width, you can base all other layout inside relative to this width, by using margin’s and padding’s.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Rvl.HelperTools.Website._Default" %>

<!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>Untitled Page</title>

    <!-- Load css styles -->
    <style type="text/css">
        .Main
        {
            background-color:Silver;
            margin-left: auto; /* Center mainTable for >= IE6  */
            margin-right: auto; /* Center mainTable for >= IE6  */
            width: 800px;
        }
    </style>

    <!-- Correct css styles based on user screen resolution -->
    <script language="javascript" type="text/javascript">

        // Find the first css class based on parameter [className].
        function GetStyleClass(className) {

            // Loop all loaded css style sheets
            for (var s = 0; s < document.styleSheets.length; s++) {

                // Check if browser uses [rules]
                var rules;
                if (document.styleSheets[s].rules) {
                    rules = document.styleSheets[s].rules;
                }

                // Check if browser uses [cssRules]
                if (document.styleSheets[s].cssRules) {
                    rules = document.styleSheets[s].cssRules;
                }

                // Check if browser supports css rules
                if (rules) {
                    // Loop rules in css stylesheet
                    for (var r = 0; r < rules.length; r++) {

                        // Stop search and return rule, when classname is found
                        if (rules[r].selectorText == '.' + className) {
                            return rules[r];
                        }
                    }
                }
            }

            // If css class not found, return null.
            return null;
        }
        // Convert a css px value to int.
        function ConvertCssPxToInt(cssPxValueText) {

            // Set valid characters for numeric number.
            var validChars = "0123456789.";

            // If conversion fails return 0.
            var convertedValue = 0;

            // Loop all characters of
            for (i = 0; i < cssPxValueText.length; i++) {

                // Stop search for valid numeric characters,  when a none numeric number is found.
                if (validChars.indexOf(cssPxValueText.charAt(i)) == -1) {

                    // Start conversion if at least one character is valid.
                    if (i > 0) {
                        // Convert validnumbers to int and return result.
                        convertedValue = parseInt(cssPxValueText.substring(0, i));
                        return convertedValue;
                    }
                }
            }

            return convertedValue;
        }

        // Get main table css class
        var mainClass = GetStyleClass('Main');

        // Change main table width based on user screen resolution.
        if (mainClass) {

            // Use default css width, if screen width is less then default css width.
            var width = ConvertCssPxToInt(mainClass.style.width);

            // Use screen width - 50px if screen width is greather the default css width.
            if (screen.width > width) {
                width = screen.width - 45;
            }

            // Change the width of the main table
            mainClass.style.width = width + 'px';
        }
    </script>
</head>
<body>

    <form id="form1" runat="server">
    <div class="Main">
        <p>Some text</p>
        <p>Some more text...</p>
    </div>
    </form>
</body>
</html>

Best Practices – CSS

This post describes a code guidelines and a best practices for CSS, it will evolve over time and will be updated whenever I find new or better best practices.

CSS Files

  • Every web application should have a General.css, which contains only the classes that are used in more then 1 page or user control.
  • Every master page, page, user control, external library components should have there own css file.
  • Create a browser specific css file, if you have to use browser specific css hacks
  • All css files should be saved in a Css folder in the root of the web application.
  • The master page should first link to the General.css and then to the Master.css and then it should contain a contentplaceholder, so pages and user controls can add there css file to the head of the master page 
  • <asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>

  • All pages and user controls should link to there own css file, by adding a link to there css file in the master page by implementing the contentplaceholder head from the master page:
  • <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        <link href="Css\Default.css" rel="Stylesheet" type="text/css" />
    </asp:Content>

  •  

 

CSS Structure

  • Keep HTML free of presentational attributes, all styling should go in classes in css files.
  • Every class defined in CSS should be used, else it must be removed.
  • Every browser specific hack should be commented.
  • Don´t use a reset scripts except for padding and margin when working with a pixel perfect design, else external libraries might no work.
  • Don´t use css direct on html tags, only on html and body tag, all other tags should have classes, else external libraries might no work.
  • Don´t use important! only if you have to overwrite inline styling and then comment it.
  • Class name should start with lowercase and use camel casing.
  • Use only classes and avoid id´s, because asp .net will render a control in a usercontrol like ctrl001.
  • Order the classes within the css file based on the order of the markup. If the first element of the page is an <h1 class="titleHeader">, put it first.
  • Properties within a class should be in alphabetic order.
  • Set the font on the body tag, so other tags inherit from it.
  • Set classes on outer elements and use selectors to style the child elements.
  • Don’ t use * before property name, so don’ t use .exampleClass { *width: 20px; }

CSS Tips

  • If you want to add horizontal spacing between rows, use a border for the <tr> tag:
  • .rowWithBottomSpacing
    {
        border-bottom: solid 5px #ffffff;
    }

  • An example IE8 hack could be, a class that hides the dashed border arround a link when it’ s clicked:
  • .linkWithNoDashesOnActivation
    {
        border-color: Red;
        border-style: solid;
        border-width: 1px;
        color: #000000;
        display: block;
        outline: none;
    } 
  • Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
  • Note: a:active MUST come after a:hover in the CSS definition in order to be effective.
  • Note: Pseudo-class names are not case-sensitive.
  • a:link {color:#FF0000}      /* unvisited link */
    a:visited {color:#00FF00}  /* visited link */
    a:hover {color:#FF00FF}  /* mouse over link */
    a:active {color:#0000FF}  /* selected link */
    a:focus {color:#00A0FF}  /* focused link */

  •  


Source and Related posts

 

 

ASP.NET – How to remove hyperlink or linkbutton (active/focus) dotted border in IE 8 using CSS

When you set a border on a hyperlink in IE 8 it will display the border dotted when the hyperlink is clicked. In IE 6 and IE 7 the borders are not altered. To remove the dotted border when the hyperlink is active (has focus) in IE8 use the css attribute outline: none;

<a style="border-color: Red; border-style: solid; border-width: 1px; color: #000000; display: block;" href="Default.aspx">Link with dotted borders when clicked (active/focus) in IE8 </a>

        <a style="border-color: Red; border-style: solid; border-width: 1px; color: #000000; display: block; outline: none;" href="Default.aspx">Link without dotted borders when clicked (active/focus) in IE8</a>