How to center dynamic content?

Lets say you have some dynamic content that you need to center. For example a few buttons:

<asp:Button ID="btnBack" runat="server" Text="Back" />

<asp:Button ID="btnSave" runat="server" Text="Save" />

<asp:Button ID="btnNext" runat="server" Text="Next" />

and lets say in some cases you show btnSave in some cases not.

So ideally you want to use div and margin auto for centering:

<div style="margin:0 auto;width:200px;">

      <asp:Button ID="btnBack" runat="server" Text="Back" />

      <asp:Button ID="btnSave" runat="server" Text="Save" />

      <asp:Button ID="btnNext" runat="server" Text="Next" />

</div>

But, you don't know exact width, since number of buttons is variable. Of course you can  make width

dynamic in code behind. However sometimes width is difficult to calculate, so you need better solution.

Table is a saver:

<table align="center">

    <tr>

      <td>

        <asp:Button ID="btnBack" runat="server" Text="Back" />

        <asp:Button ID="btnSave" runat="server" Text="Save" />

        <asp:Button ID="btnNext" runat="server" Text="Next" />

      </td>

    </tr>

</table>

Thursday, August 14, 2008 | Add Comment

Design Time Expression Evaluation - Immediate Window

Immediate Window is a build in Visual Studio tool that people often forget about. Mostly because it shows only 

at debug time and usage is not obvious as watch window. The Immediate window is used at debug and design time 

to debug and evaluate  expressions, execute statements, print variable values, and so forth. Yes, you can use

Immediate window at design time. Lets say you write a method:

 

privatestaticint Sum(int a, int b)

{

      return a + b;

}

 

Then you can type in Immediate window:

 

?Sum(10,12)

 

and below would be result:

 

22

 

You can even debug, while you are in design mode. More information about debugging at design time in MSDN.

Thursday, August 14, 2008 | Add Comment

Browser specific css, IE conditional comments.

You should always first write the code for standard compliant browsers, such as Firefox, Safari, Opera 

and then correct it for IE7 and IE6.  There are two most four ways of writing IE specific CSS.

2. My favorite star and underscore hack:

#specificId 

{

 *property:value; // applies to IE7 and IE6 

    _property:value;  // applies only to IE6

}

2. 7* hack:

/*

  Only versions 5.5 and higher will

  apply these rules, 5.0 will not.

*/

  html*#specificId

{

  property:value;

}

 

3. Only IE understands css expressions:

#specificId

{

 property:value; // First apply css style to all browsers

   property:expression(value);  // IE specific css

}

 

4.  IE conditional comments:

<!--[if IE]>

  <style type="text/css">

    @import 'iestyle.css';

  </style>

<![endif]-->

 

<!--[if IE 6]>

According to the conditional comment this is Internet Explorer 5<br />

<![endif]-->

 

<!--[if gte IE 5]>

According to the conditional comment this is Internet Explorer 5 and up<br />

<![endif]-->

 

<!--[if lt IE 6]>

According to the conditional comment this is Internet Explorer lower than 6<br />

<![endif]-->

 

 Where special commands:

gt: greater than

gte: greater than or equal to

lt: less than

lte: less than or equal

Sunday, July 27, 2008 | Add Comment