Category Archives: CSS

Luke Fabish – Tame Your CSS with Some SASS

SASS.  I have toyed with SASS a little, and I do mean a little.  We have it built into one of our projects.  Usually when you create your styling you rarely need to go change it.  So those few times I have managed to figure things out.

Personally that is not good enough.  It is one of those topics I keep meaning to learn about and yet not have the time.  I received an email with a link to Luke’s article from Simple Programmer.  It is a long read, but it is worth it.

Tame Your CSS with Some SASS by Luke Fabish

Simple Programmer is a great resource as well.  I highly suggest you subscribe to his news letter.  You never know what you mind find in your inbox; today I found this article.  I went to Luke’s site and saw right away several more I would like to read.

Telerik Kendo Menu and Styling

This is more of a note to myself than anything else.  I am trying to create a new MVC project using our Telerik subscription.  I wanted to try their menu, but noticed it wasn’t styled properly.  Nothing like in their demo, it was huge.

I did some searching on the Internet to no avail, so I fired up Opera’s web tools and started tooling around.  I noticed my menu was using a non-Telerik style, but one of the default ones found in Site.css.  Specifically it was using ul #menu.

I had to laugh at myself.  Telerik’s menu renders as a UL, like most menus these days.  Silly me used the name menu.  That is why that style was being applied.  I changed the name to masterMenu and it looked as advertised.

CSS3 Border Radius

This is, to me, one of the best things to come out of CSS3. The ability to create rounded corners with CSS. No need for images, or lots of divs. You can read the documentation at the W3C site as well.

The syntax is fairly straight forward; border-radius or border-*-*-radius. The *-* would be something like top-right or bottom-left.

Mozilla is a bit different. Another great reference site is CSS3.info, where I found this little chart.

W3C Specification Mozilla Implementation
border-radius -moz-border-radius
border-top-left-radius -moz-border-radius-topleft
border-top-right-radius -moz-border-radius-topright
border-bottom-right-radius -moz-border-radius-bottomright
border-bottom-left-radius -moz-border-radius-bottomleft

There is more that can be written about it, but given those two references you should be fine.

CSS3 Gradient Generator

I started looking into CSS3 gradients and asked some of my friends for some help.  I had assumed they already played with this in CSS3.  While I did not get a nice explanation of things I did get a great link to a CSS3 generator.  One drawback, everywhere I have looked, it appears that IE9 does not support gradients, although you can pull this off in IE7 and IE8.

CSS3 Generator By Eric Hoffman and Peter Funk

After a little more searching I found a post by CSS3 Wizardry that appears to have made a little work around for IE9.  He uses SVG to create the gradient.  You can read his blog post here.

Read the rest of this entry

IE8 and CSS Troubles

This post is to store a little bit of information I found that relates to Internet Explorer 8 and CSS.  Like many, doing CSS for three browsers can be a headache, especially with IE not wanting to play.

Well it turns out it can play well, you just have to tell it to with a simple meta tag.  I really wish I could remember the URL I found this information on originally but I am sorry I cannot. Trust me, this is an easy one to forget so it goes here in my E-Brain.

Here is the meta tag you will need to use.  I have used it in a .NET master page that other master pages used and it still worked.

<meta http-equiv="X-UA-Compatible" content="IE=8"/>