Tagged: css Toggle Comment Threads | Keyboard Shortcuts

  • danielsaidi 3:30 pm on December 20, 2010 Permalink | Reply
    Tags: asp.net, combres, css, squishIt   

    Get Combres to work with ASP.NET 

    After having some problems with getting SquishIt to work with JavaScript closures, we decided to give Combres a try. However, while SquishIt works right out of the box, Combres needs to be configured a bit. This page describes how.

    In short, you need to:

    • Create a custom Combres configuration file
    • Add the following to web.config:
      • A Combres configSection tag
      • A Combres section tag (which you point to the Combres config file)
      • Two httpModule tags
    • Add RouteTable.Routes.AddCombresRoute(“Combres Route”); to the Global.asax Application_Start method
    • Add <%= WebExtensions.CombresLink(“…”) %>wherever you want to add JS or CSS tags.

    With SquishIt, you only need to add a bundle tag to your page, which is way easier. Still, Combres is said to perform better compression…and handles JavaScript closures without any problems.

    With Combres up and running, I noticed that it does not work with IIS7 / Integrated pipeline mode. If you run into this problem, remove all mumbo jumbo content in within the Combres section tag, so that it looks like this:

    <section name=”combres” type=”Combres.ConfigSectionSetting” />

    Then, instead of:

            <add name="ScriptModule" type="System.Web.Handlers.ScriptModule,
    	System.Web.Extensions, Version=, Culture=neutral,
            <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule,
    	System.Web.Routing, Version=, Culture=neutral,

    You also need to add the modules to the system.webServer/modules tag, since that is the one used by IIS7  (keep the ones above as well, though):

            <add name="ScriptModule" type="System.Web.Handlers.ScriptModule,
    	System.Web.Extensions, Version=, Culture=neutral,
            <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule,
    	System.Web.Routing, Version=, Culture=neutral,

    If you follow these steps, Combres should work.

    • John 10:42 am on January 2, 2012 Permalink | Reply

      Thats great information, Thanks !

    • John 10:44 am on January 2, 2012 Permalink | Reply

      Application is working perfect on Local Development Server but after publish it’s not working if running on IIS 7 Pipeline Mode. Tested your suggestion and it’s worked, thanks.

    • Arun 7:28 am on March 24, 2013 Permalink | Reply

      I have worked in global.asax file and using Combres.The method RouteTable.Routes.AddCombresRoute() is not find.

      • danielsaidi 9:55 am on March 24, 2013 Permalink | Reply

        This is a rather old blog post, and Combres has probably changed a great deal since then. Do you mean that this solution is no longer applicable?

  • danielsaidi 10:16 pm on September 22, 2010 Permalink | Reply
    Tags: css, internet explorer, ,   

    IE bug fixed for web fonts 

    Yesterday, I uploaded a demo page where I tried out the awesome fonts.com Web Fonts service…

    …however, Internet Explorer did not really like the page. Turns out

    <button onclick="$('.comic').animate({fontSize: '3em', });">Text can be resized!</button>

    was too much for Internet Explorer to handle. It should be:

    <button onclick="$('.comic').animate({fontSize: '3em' });">Text can be resized!</button>

    I rest my case. The bug is fixed. Thanks for not handling any exceptions, IE!

  • danielsaidi 9:47 pm on September 21, 2010 Permalink | Reply
    Tags: css, fonts,   

    fonts.com web fonts 

    The time has finally come to throw Arial and Verdana into the trash bin (Helvetica…you can stay for a while), since Monotype, Linotype and ITC (and others) have teamed up and developed a really cool service – webfonts.fonts.com.

    Web fonts lets you use more than 7,500 fonts on your sites. The result is not an image, but markable, search engine friendly and editable text.

    Just visit webfonts.fonts.com and register as a user. Then, you’ll be able to create projects to which you can add custom fonts. After that, bind the selected fonts to your CSS elements, classes and id:s and paste the generated JavaScript snippet to your site.

    Web fonts is free up to a certain amount of page hits, but the free account will not give you access to all the fonts. Still, 1.500 free fonts is a great thing, so make sure to try it out!

  • danielsaidi 12:30 am on August 19, 2010 Permalink | Reply
    Tags: , bundle, css   

    Bundle JavaScript and CSS files with full file paths 

    I have been looking at the great PHP CSS/JavaScript bundling approach that is presented at rakaz.nl. The suggested approach is great…and works great, but has a small drawback.

    The downloaded combine.php must be adjusted and all combined files must exist in the same folder.

    Not a big problem, I know, but since I have a structure where css/js files may exist in sub folders, I want to be able to provide the bundle URL with full paths to the files I want to bundle.

    Since the original solution is so slick, this is quite easy to achieve. I will not upload my solution for download, since I want you to grab the original code from rakaz.nl so that it receives the visitors it deserves 🙂

    Well, let’s get started:

    • In your project root, create a folder called bundle (or whatever you want, it is not that important)
    • In the bundle folder, create an .htaccess file and add the following code:
              RewriteEngine On
              RewriteBase /
              RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1
              RewriteRule ^javascript/(.*\.js) /combine.php?type=javascript&files=$1
    • In the bundle folder, create a combine.php file and add this content to it.

    Well, now you’re practically where the original approach tells you to adjust the PHP code a bit. Instead, do this:

    In the combine.php file, replace

              $path = realpath($base . '/' . $element);


              $path = "../" . $element

    The code has to be replaced at two places in the PHP file.

    That’s it!

    The only thing you have to consider now is to use application root relative paths when calling the bundle URL. This will cause your bundle URL to become quiiiite complex, but it works 🙂

    For instance, I have my main JavaScript folder in the application root folder content/js. Let’s say that I have the files a.js and b.js (great naming convention, ey?). The bundle URL would then be:


    To bundle CSS files, the corresponding code would look like:


    Well, you get the point 🙂

    The newly added code will add a ../ to each link before attempting to parse the file, which will work great since the combine.php file is placed one level down from the application root…to which the links have to be relative, remember?

    The great thing now is that I can bundle any JavaScript/CSS files (they still have to be bundled separately) regardless of their physical location (as long as they exist anywhere within the application root folder).

    Another great thing is that the .htaccess file is placed inside the bundle folder, which means that you can just copy the bundle folder if you want to use it in another project.

    Hope this helps!

  • danielsaidi 10:52 am on August 6, 2010 Permalink | Reply
    Tags: css, div, float   

    The CSS fix of the day 

    Today, my dear collegue Johan Driessen showed me a nice CSS fix.

    The fix solves the problem that div elements with nested, floating divs will not resize according to the size of its nested elements, as such:

    Default div behavior

    Default div behavior: The div does not adjust its size according to nested, floating elements.

    Well, thanks to Johan  – although he stresses the fact that he found it on the web and did not write it himself – I have now a nice little CSS class that takes care of this:

       * html .fc{height:1px;}

    Just add this class to the div element that contains floating elements, and the result (sorry for the poooor graphics), will be as such:

    CSS fix result

    CSS fix: The div adjusts its size according to nested, floating elements.

    Hope this helps. If so, thank Johan.

  • danielsaidi 12:15 pm on July 1, 2010 Permalink | Reply
    Tags: , blueprint, bundler, css, less, mixins   

    Trying out Blueprint, Bundler and LESS CSS 

    I am currently trying out some nice CSS tools that will simplify working with CSS in ASP.NET MVC.

    First, Blueprint seems like a nice, basic CSS framework that provides a nice foundation. I will give it a try and hope that I can use it in project after project from now on.

    Second, Bundler can be used to bundle CSS and JavaScript in ASP.NET MVC. It looks promising and would be a nice alternative to the web form theme approach.

    Finally, LESS CSS provides you with variables, mixins etc. It will hopefully be the key to avoiding some frustrating CSS issues.

  • danielsaidi 9:37 am on June 9, 2010 Permalink | Reply
    Tags: @import, , css   

    / in URL query makes CSS @import and file paths fail 

    I am currently implementing CSS file bundling, which uses a virtual path to a PHP file, as such:

       ~/bundle/bundle.css&cssFolders=... => ~/bundle/bundle.php&type=css&cssFolders=...

    Since I provide paths to my CSS folders, a bundle URL may look like this:


    My bundle file then builds the resulting CSS content by importing all files that it finds, for instance:

       @import url("../css/x.css");
       @import url("../shared/css/y.css");

    Thus solution, however, did only work in some cases, while failing for other. I was confused…then I found the solution.

    The / chars in the URL query makes the @import statement fail, since it seems to count all / in the URL, not just all the / in the path excluding the query. This is quite understandable, since .css files are not really meant to handle query variables.

    In this case, however, we have  a virtual .css file that handles query variables, which is why we need to solve this problem.

    The solution, in this case, is to count the number of / in the query variable cssFolders and add an extra ../ for each / in the import statements. I will not show any code examples here, you will find it in the next post.

  • danielsaidi 12:19 am on June 9, 2010 Permalink | Reply
    Tags: , , css, virtual file   

    Bundle CSS files with relative file paths 

    I am currently working with bundling CSS files, and have to be able to bundle files from many different folders, when needed.

    Previously, all CSS files within the selected CSS folder (if any), as well as within a mandatory system css folder, were added to the virtual bundle file. The theme engine parsed all files and added them to the virtual file output as one mega string:

       .validation-error{border: solid 1px #bb4444;background: #ffdddd;}.RatingBar .images a{display: inline-block; width: 20px;height: 20px;}.RatingBar .unrated { background-image: url(../../../wigbi/content/img/controls/RatingBar/rating_unrated.gif); }.RatingBar .rated { background-image: url(../../../wigbi/content/img/controls/RatingBar/rating_rated.gif); }.RatingBar .half { background-image: url(../../../wigbi/content/img/controls/RatingBar/rating_half.gif); }.RatingBar .createdBy { background-image: url(../../../wigbi/content/img/controls/RatingBar/rating_createdBy.gif); }.RatingBar .hover { background-image: url(../../../wigbi/content/img/controls/RatingBar/rating_createdBy.gif); }@import url(../../../box.css);@import url(../../../classes.css);@import url(../../../controls.css);@import url(../../../design.css);@import url(../../../elements.css);@import url(../../../grid.css);@import url(../../../lists.css);html, body{margin: 0px;background-color: #FFFFFF;background-image: none;}.box{border: solid 1px #bbbbbb;}.box .body{padding: 5px;border: solid 2px white;background: #f6f6f6;}.w100 { width: 100%; }.w95 { width: 95%; }.w90 { width: 90%; }.w85 { width: 85%; }.w80 { width: 80%; }.w75 { width: 75%; }.w70 { width: 70%; }.w65 { width: 65%; }.w60 { width: 60%; }.w55 { width: 55%; }.w50 { width: 50%; }.w45 { width: 45%; }.w40 { width: 40%; }.w35 { width: 35%; }.w30 { width: 30%; }.w25 { width: 25%; }.w20 { width: 20%; }.w15 { width: 15%; }.w10 { width: 10%; }.w5 { width: 5%; }.align-center { text-align: center; }.align-left { text-align: left; }.align-right { text-align: right; }.valign-middle { vertical-align: middle; }.valign-top { vertical-align: top; }.float-left { float: left; }.float-right { float: right; }.bold { font-weight: bold; }.bold-italic { font-weight: bold; font-style: italic; }.italic { font-style: italic; }.invisible { display: none; }.clear { clear: both; }span.large { font-size: 1.3em; }span.yellow { color: #ff9900; }img.border{padding: 3px;border: solid 1px #cccccc;}#main-content-middle img.top{padding-bottom: 15px;}div.separator{margin-top: 10px;margin-bottom: 10px; font-size: 1px;height: 5px;border-bottom: solid 1px #dddddd;background-image: url(../../../img/themes/pro/bg_lines.gif);}#main-content-right div.section-title{height: 25px;padding: 3px;background: #f6f6f6;border-top: solid 1px #cccccc;border-bottom: solid 1px #cccccc;}#main-content-right img.section-icon{float: left;margin-right: 8px;}#main-content-right div.section-text{font-weight: bold;margin-top: 7px;margin-bottom: 15px;}.control input[type="text"],.control input[type="password"]{width: 98%;}.control textarea{width: 99%;}.control-body div{margin-bottom: 10px;}.control-footer{margin-top: 10px;text-align: right;}.NewsletterSubscribeForm .email { margin-bottom: 0px; }.NewsletterSubscribeForm .unsubscribe { text-align: right; }html, body{background: #222222;margin: 0px;margin-top: 50px;margin-bottom: 100px;}#main-top, #main-bottom{color: #c4c4c4;}#main-top{padding-bottom: 50px;background-position: bottom;background-repeat: repeat-x;background-image: url(../../../img/themes/pro/bg_top.jpg);}#main-logo{padding: 0px;padding-left: 150px;padding-top: 30px;background-image: url(../../../img/themes/pro/logo.gif);background-repeat: no-repeat;}.main-width{width: 900px;margin: 0 auto;}#main-content { background: white; }#main-content-left { width: 210px; }#main-content-middle { width: 412px; }#main-content-right { width: 220px; }#main-content-left,#main-content-middle,#main-content-right{padding-left: 10px;padding-right: 10px;}#main-content-left, #main-content-right {border-left: solid 1px #cccccc;border-right: solid 1px #cccccc;}#main-bottom{padding-top: 60px;background-position: top;background-repeat: repeat-x;background-image: url(../../../img/themes/pro/bg_bottom.jpg);}#main-bottom-left, #main-bottom-right{color: white;font-size: 0.82em;}#main-bottom-left{padding-right: 10px;border-right: solid 1px #000000;}#main-bottom-right{padding-left: 10px;border-left: solid 1px #333333;}html, body{color: #333333;font-family: Helvetica, Tahoma, Arial, sans-serif, Verdana, Geneva;font-size: 0.9em;}a{color: #ff9900;font-weight: bold;text-decoration: none;}a:hover { color: #ffbb00; }a, ul a { outline: none; }form{padding: 0px;margin: 0px;}h1{font-size: 1.65em;}h2{font-size: 1.4em;margin-top: 25px;border-bottom: solid 1px #cccccc;}h3{margin-top: 25px;margin-bottom: 10px;}h1, h2, h3 { color: #444444; }h1, h2.first, h3.first { margin-top: 0px; }h1.nospace, h2.nospace, h3.nospace { margin-bottom: 0px; }img, a img{border: none}table{border-collapse: collapse;}table td{padding-right: 5px;vertical-align: top;}.grid {}.grid .row {}.grid .row .cell { float:left; width: 100%; }.grid .row.one .cell { float:none; width: 100%; }.grid .row.two .cell { width:50%; }.grid .row.three .cell { width:33.2%; }.grid .row.four .cell { width:25%; }.grid .row.five .cell { width:20%; }.grid .row.six .cell { width:16.6%; }.grid .row.seven .cell { width:14.2%; }.grid .row.eight .cell { width:12.5%; }.grid .row.nine .cell { width:11.1%; }.grid .row.ten .cell { width:10%; }.grid .row, .grid .row .cell.last { overflow: hidden; }.grid .row .cell.last { float:none; width:auto; }.grid.border .row { border-top: solid 1px black; }.grid.border .row.last { border-bottom: solid 1px black; }.grid.border .row .cell { border: none; border-left: solid 1px black; }.grid.border .row .cell.last, .grid.border .row.one .cell { border-right: solid 1px black; }ul.horizontal,#main-menu ul, #main-bottom ul,#main-content-middle ul.titleMenu,#main-content-middle ul.images{margin: 0px;padding: 0px;list-style: none;}ul.horizontal li,#main-menu ul li, #main-bottom ul li,#main-content-middle ul.titleMenu li,#main-content-middle ul.images li{display:inline;}ul.vertical-list,#main-subMenu ul, #main-content-middle ul{border-top: solid 1px #cccccc;margin: 0px;padding: 0px;list-style: none;}ul.vertical-list li,#main-subMenu ul li, #main-content-middle ul li{border-bottom: solid 1px #cccccc;margin: 0px;padding: 5px;}ul.vertical-list li.even,#main-subMenu ul li.even, #main-content-middle ul li.even{background-color: #f3f3f3;}ul.vertical-list li.selected,#main-content-middle ul li.selected{border-bottom: solid 1px #bbbbbb;background-color: #eaeaea;}ul.vertical-list li.separator,#main-subMenu ul li.separator, #main-content-middle ul li.separator{font-size: 0.1em;background: url(../../../img/themes/pro/bg_lines.gif);}ul.vertical-list li:hover,#main-subMenu ul li:hover, #main-content-middle ul li:hover{background-color: #f9f9f9;}#main-menu li{font-size: 1.5em;font-weight: bold;}#main-menu li { margin-right: 10px; }#main-menu li a { margin-right: 5px; }#main-bottom li { margin-right: 5px; }#main-bottom li a { margin-right: 3px; }#main-menu li a, #main-subMenu li a, #main-bottom li a { text-decoration: none; }#main-menu li a, #main-bottom li a { color: white; }#main-subMenu li a { color: black; }#main-subMenu li a, #main-bottom li a { font-weight: normal; }#main-menu li.selected a, #main-subMenu li.selected a, #main-menu li a:hover, #main-subMenu li a:hover, #main-bottom li a:hover, #main-bottom li.section, #main-bottom li a.more{color: #ff9900; }#main-subMenu li.selected{background-image: url(../../../img/themes/pro/bg_subMenu_selected.gif);background-repeat: no-repeat;}#main-subMenu li.selected a{font-weight: bold;padding-left: 5px;}#main-bottom li.section { width: 90px; }#main-bottom li.section, #main-bottom li a.more { font-weight: bold; }#main-content-middle ul.titleMenu{padding:5px;padding-top:7px;margin:0px;margin-top: 10px;text-align: center;background-color: #f8f8f8;border-bottom: solid 1px #cccccc;}#main-content-middle ul.titleMenu li,#main-content-middle ul.titleMenu li:hover{background: none;padding: 10px;border-bottom: none;}#main-content-middle ul.titleMenu li a{color: #505050;}#main-content-middle ul.titleMenu li a:hover{color: #ff9900;}#main-content-middle ul.images{border: none;text-align: center;}#main-content-middle ul.images li,#main-content-middle ul.images li:hover{padding: 5px;border-bottom: none;}#main-content-middle ul.images img{padding: 3px;border: solid 1px #cccccc;}#main-content-middle ul.images img { margin-bottom: 8px; }#main-content-middle ul.songs, ul.songs{margin-top: 10px;}ul.songs li,ul.songs li:hover{line-height: 23px;padding: 0px;padding-top: 4px;}ul.songs li span { float: right; }#lbOverlay {position: fixed;z-index: 9999;left: 0;top: 0;width: 100%;height: 100%;background-color: #000;cursor: pointer;}#lbCenter, #lbBottomContainer {position: absolute;z-index: 9999;overflow: hidden;background-color: #fff;}.lbLoading {background: #fff url(../../../img/slimbox/loading.gif) no-repeat center;}#lbImage {position: absolute;left: 0;top: 0;border: 10px solid #fff;background-repeat: no-repeat;}#lbPrevLink, #lbNextLink {display: block;position: absolute;top: 0;width: 50%;outline: none;}#lbPrevLink {left: 0;}#lbPrevLink:hover {background: transparent url(../../../img/slimbox/prevlabel.gif) no-repeat 0 15%;}#lbNextLink {right: 0;}#lbNextLink:hover {background: transparent url(../../../img/slimbox/nextlabel.gif) no-repeat 100% 15%;}#lbBottom {font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;font-size: 10px;color: #666;line-height: 1.4em;text-align: left;border: 10px solid #fff;border-top-style: none;}#lbCloseLink {display: block;float: right;width: 66px;height: 22px;background: transparent url(../../../img/slimbox/closelabel.gif) no-repeat center;margin: 5px 0;outline: none;}#lbCaption, #lbNumber {margin-right: 71px;}#lbCaption {font-weight: bold;}

    This is great, right? Nice, clean and compact.

    However, this approach – which can be found in various CSS bundle solutions around the web – suffers from a major flaw…file paths. Since the virtual file most probably does not exist at the same folder level in the file system as the parsed files, all paths in the bundle file will be invalid. This is especially true when parsing files from many different folders.

    The approach above requires you to either use absolute paths in your css files or have the css files at the same folder level in the file system as the bundle file. This is not always applicable, especially since I want to allow developers to point out any folder as css folder.

    It is possible, though, by providing the bundle file with various file system information, to acount for the path differences and change the file paths so that they work within the bundle file. This, however, involves way too much work and testing for me to be interested in implementing such a solution…at least now.

    So, I have now taken a step back. The bundle file still remains, but instead of adding all file content to the output as above, I simply import all files of interest into it. The virtual file output will thus look something like this:

       @import url("../css/default.css");@import url("../../wigbi/css2/x.css");@import url("../../wigbi/css2/y.css");

    This is not as fast as the compact first option, since I have no possibility of compressing the CSS code. However, but by linking to the CSS files like this, I do not have to account for file paths within each file. It works automatically…like a charm 🙂

Compose new post
Next post/Next comment
Previous post/Previous comment
Show/Hide comments
Go to top
Go to login
Show/Hide help
shift + esc