Archive for the ‘CSS’ Category

Setting up ASP.NET MVC 4 and Twitter Bootstrap 3 with LESS

Tuesday, September 17th, 2013
ASP.NET MVC + Twitter Bootstrap + LESS When setting up an ASP.Net MVC 4 application recently, I decided to add Bootstrap 3 into the project. The default NuGet package for Bootstrap (Twitter.Bootstrap) includes the source and the minified versions of the JavaScript and CSS. However, should you want to edit the LESS files and recompile and minify the CSS, you will need a different Bootstrap NuGet package, a minifier adapter NuGet package, and some additional configuration. Also, while client-side LESS interpretation is great when working in a development environment, it may not be ideal or available for all website visitors. For ...
[ Read More ]

TTF to EOT and @font-face

Saturday, October 6th, 2012
For those of you who followed my tutorial on using @font-face, you will remember that generating the proprietary font file for Internet Explorer was not an easy task. Now, there are websites and desktop software that will convert your TrueType (TTF) font file to an Embedded OpenType (EOT) file format. Here are a few resources that I have found:

It may be time to update your reset stylesheets

Thursday, March 10th, 2011
If you're using Grails and the Grails UI plugin's autocomplete feature, you may have noticed all of your textboxes have disappeared in Chrome 10. This is thanks to Chrome 10 adding a new default browser style for an invalid attribute: "hidden". Take a look at this jsFiddle: If you remove the CSS style on the right, Chrome 10 will by default hide input elements that have the "hidden" attribute set to true. The problem with this is that the hidden attribute is not a valid attribute - and should therefore be "undefined". So, if you've noticed this issue, make sure to add the following CSS style to your reset stylesheet so Chrome 10 behaves like all the other browsers: input[hidden=true][type=text]{display:inline;}

sIFR to @font-face Site Conversion

Tuesday, November 3rd, 2009

Recently, I was browsing CSS Beauty and noticed quite a few articles on the CSS3 @font-face rule. I have always been somewhat unhappy with sIFR - I just don't like having Flash files as header text. However, after reading more about the @font-face rule, I found out that it may be a suitable substitute for my special headline fonts - it's also mostly cross-browser compliant (and Google Chrome will be adding support in the [ Read More ]

Extending CSS Spriting

Friday, December 5th, 2008

CSS Spriting is a technique for speeding up the load times for your website by reducing the number of HTTP requests for images to the server. On Yahoo's best practices website, they say:

"CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment."

This technique can be extended for non-background images on your site as well. However, some issues arise when you use CSS spriting for your main navigation elements(among other images):

  1. You can't attach alternate text to divs for accessibility purposes
  2. CSS Spriting and the IE6 PNG fix a ...
[ Read More ]