Posts Tagged ‘CSS’

CSS3 variables are the future

A good friend of mine, Dave Collier sent me a highly interesting article that had me all giddy and excited to be a Frontend Engineer. CSS3 is introducing variables, and is already available for use. The only downside, which is sure to be rendered moot soon, is that it is currently supported only by Google Chrome.

Have a read: http://www.aaronlumsden.com/css3/an-introduction-to-css-variables/

here is the code example excerpt from the above link:

:root {
    -webkit-var-brand-color: red;
 
}
h1 {
  color: -webkit-var(brand-color);
}
div {
background-color;
}
Posted: November 13th, 2012
Categories: code, Info
Tags: , , , ,
Comments: No Comments.

Overriding inline CSS

While working on the MLS (Major League Soccer) redesign, I came across an instance where I needed to override an inline style. I did not think this was possible at first, but after doing some research and googling, I came up with this solution. It uses CSS selectors which are very powerful and allow you to target specific elements on a page regardless of an ‘id’ or ‘class’.

Here is an example of inline styles being applied to an element on the page:

<div class="example-page">
    <div class="example-content">
        <div id="picture" style="position:absolute; margin:100px">
            <img src="/img/example.png" height="100" width="100"/>
        </div>
    </div>
</div>


Here is how you can override the inline style:

#picture[style]
{
    position:relative;
    margin:0;
}

Posted: February 2nd, 2011
Categories: code, tutorial
Tags:
Comments: No Comments.

IE7 not displaying CSS background image

I ran into a problem while working on a site for a client, where the background image was not displaying in IE7 at all. I was pouring over forums and looking for a fix. I came across multiple “solutions”, but none of them worked.

After re-reading my code, I noticed a ‘typo’, if you will, in my code.

Original CSS code:


body {
background: #ccc url('../../img/bg.gif')repeat-x top;
}


The above code worked perfectly in all browsers EXCEPT IE. I noticed that there was no space following the img path declaration. I inserted a space and voila!
Working CSS code:


body {
background: #ccc url('../../img/bg.gif') repeat-x top;
}


Hope this helps some of you who have been stuck.

Posted: October 19th, 2010
Categories: code, tutorial
Tags: ,
Comments: No Comments.