Entries Tagged as 'CSS'

Basic HTML to Excel Formatting

ColdFusion , CSS , Default , MS Office , Tips and Tricks 13 Comments »

I've come across this before but have never thought to blog about it, simply because it was quite an easy implementation in the end-up.

If you're exporting data from an HTML table to an Excel workbook, then the following will save you some time when trying to get Microsoft Excel to format the data. and display it as you desire.

Using Microsofts own Office XML format, you can style \ format the cell data using "CSS like" syntax.

For example, if you wish to format a date column, you can simply add a style attribute with the content style='mso-number-format:"mm\/dd\/yyyy"'.  This format is pretty self explanatory, but will format a given date in the format "10/01/2011" for 10th January 2011.

<td style="mso-number-format:"mm\/dd\/yyyy">
   
 10/01/2011
</td>

If you're a stickler for seperation, like I am, you can take this further by defining CSS Rules in a stylesheet and specifying the class name in your HTML elements.

Read more...

IE CSS Border Property Issue

Browser Compatability , CSS , Gotchas No Comments »

We had this issue at work last week and only getting round to blogging this now, but it might save some time if you're aware of this glitch with Internet Explorer.

There was a simple form that had an element of type "submit" that also had a background-image specified to give a roll-over effect like so (this was also tested with type="button"):

<input type="submit" id="submit" name="submit" value="Yes" />

The CSS to accomplish this was:

 
input#submit {
        width:235px;
        height:180px;
        border: none;
        text-indent:-9999px;
        background-image:url(submit-button.gif);
        background-position:top right;
}

input#submit:hover {
        background-position:right -212px;
}

OK, so the button worked on everything except for IE. 

The PROBLEM:

The border was still visible but so was the button.  The image wasn't appearing at all.

Apparently Internet Explorer does not render CSS border properties with a value "none" (highlighted above). 

The SOLUTION:

You must specify valid shorthand or individual properties for the CSS rules.  So to overcome this problem, the CSS was changed to the below.

input#submit {
        width:235px;
        height:180px;
        border:0px solid white;
        text-indent:-9999px;
        background-image:url(submit-button.gif);
        background-position:top right;
}

This seems to have solved the problem.

NOTE: This issue was tested with IE 7.

 

Bookmark and Share

HTML format CFGRID column data alignment

ColdFusion , CSS , Javascript , Tips and Tricks No Comments »

I came across an issue yesterday where I wanted to control the alignment of certain columns in an HTML data grid using the ColfFusion \ ExtJS CFGRID.  At first I tried the "dataalign" and "headeralign" attributes of CFGRIDCOLUMN but after checking the docs it turns out that these are only available with grid formats applet \ flash.

Without delving into the ExtJS docs, I found a really simple method of doing this without having to write one line of Javascript.

<style type="text/css">
    .x-grid-col {text-align:right;}
    .x-grid-col-0 {text-align:left;}
    .x-grid-col-1 {text-align:left;}
</style>

 You can also update just the column headers using a similar method. 

<style type="text/css">
    .x-grid-hd {text-align:center;}       
    .x-grid-hd-0-0 {text-align:left;}      
    .x-grid-hd-0-1 {text-align:left;}
</style>

Credit goes to the following post http://www.webtrenches.com/post.cfm/quick-and-easy-column-alignment-for-cfgrid by @spraguey

Thanks!

Bookmark and Share
Powered by Mango Blog. Design and Icons by N.Design Studio
RSS Feeds