Tagged: css Toggle Comment Threads | Keyboard Shortcuts

  • danielsaidi 3:30 pm on December 20, 2010 Permalink | Reply
    Tags: , 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, , ,   

    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:)

  • danielsaidi 6:38 am on August 19, 2009 Permalink | Reply
    Tags: , css,   

    Using themes in ASP.NET MVC 

    I have finally rolled up my sleeves and created my first ASP.NET MVC (from now on, I will refer to this as MVC, since it is in .NET context) 1.0.

    After looking around a bit in the slick template you first get, I notice that .css files are manually included in the master page. I, however, prefer to use themes, so I decided to adjust the application a bit.

    To create a theme, simply do the following:

    • Right-click on your web project and choose Add/Add ASP.NET Folder/Theme, which will add the theme master folder App_Themes
    • Create a theme-specific folder within App_Themes, for instance Default
    • Add .skin or .css files to the folder – they will be included automatically
    • The theme can be applied in two ways:
      • Default theme (used by all project pages) – add Theme=”Default” to the pages tag in web.config
      • Page-specific theme (applied to a page) – add Theme=”Default” to the Page tag in each .aspx file
    • The theme will now be applied, which means that all its skin and style files will be loaded automatically

    I prefer to use default themes and apply themes only to the pages that are to use another one. This makes it easier to switch the design of an entire application by changing one config parameter.

    So, I created a Default theme and moved the Content/Site.css to the Default theme folder, modified web.config to use the theme and removed the manually applied .css file from the master page. However, when I tried to run the page, it crashed with this info:

    Using themed css files requires a header control on the page. (e.g. <head runat=”server” />).

    Turns out that the Default.aspx file in the project root is completely blank and only used to redirect the user.

    To make the application able to use a default theme, simply add this dummy code to the page:

     <head runat="server"></head>

    This will neverbe displayed and does not disturb the app in any way, but lets you use default themes, which at least I think is nice:)

    • Marcio 3:21 pm on May 22, 2013 Permalink | Reply

      How to tell mvc to use the app_theme? you said web.config, but how?

      • danielsaidi 10:40 am on May 25, 2013 Permalink | Reply

        Hi, you can set it in the pages tag in web-config, but…this post is rather old, and I would not use themes nowadays. Look at how to bundle your script and css files instead, would be my advice.

  • danielsaidi 9:17 am on January 29, 2009 Permalink | Reply
    Tags: css, doctype, , strict doctype, xhtml   

    Strict DocType – here I come! 

    After some struggling, I am now on track with strict XHTML. It’s fun to pay attention to all the code you write and make sure that it follows certain criteria…then see it validate.

    Still, the main reason to why I took the time to get this going is that I am sick and tired of creating web pages that look great in almost all browsers, just to see it collapse into a total mess when opening it in IE…OK, I am overexaggerating a bit, I know, but you know what I mean….I hope.

    So, after a night of strictifying (1.0) the code of a site that is soon to be up, a few things I’ve had to change:

    • img elements must have an “alt” attribute
    • target=”_blank” is not allowed for a elements
    • divs, spans etc. have no “name” attribute
    • input elements cannot be added directly to the form tag, they must be  nested in another element, like a div

    Also, it is nice to be forced to remove presentational elements from the HTML code.:)

    • Ivar 7:53 am on June 20, 2011 Permalink | Reply

      Suggestion, use fieldset to put form elements into. A css class to identify and jQuery to open will accomplish the target=_blank” or how did you do it?

    • danielsaidi 7:20 am on June 22, 2011 Permalink | Reply

      Oh, that was such a long time ago. I think that in this particular case, I replaced target=”_blank” with rel=”external” and modified the click event of all such anchor tags. But, on the other hand, that was 2.5 years ago, so it’s hard to tell😉

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

Get every new post delivered to your Inbox.

Join 28 other followers