css

I've long been of the opinion that CSS Frameworks are the new <table> tag because they take all the  content  and the  presentation  and mix them up, muddying the waters and hurting maintainability. My hope here is to explain why I  was right, and why I  am wrong. Some History Back in the old days of the web (the mid-90s) before CSS was a thing, web developers had to write all of their styles inline, the color of text, the size of the fonts,...

Before we start on a web design for a client, the designers spend time doing research and searching for inspiration.  When they are working on tight deadlines on multiple projects a week for everything from retailers to manufacturers to insurance companies I am always impressed by their fresh ideas and creativity.   How do they do it week after week?   (Besides the fact that they are crazy talented!) I noticed through their time logs that they have a daily routine of surfing the web, reading...

With the release of retina displays, such as Apple's new MacBook Pro with retina display, designers have been thrown yet another curve ball with which to keep our designs up to par. Not only do retina graphics exist on mobile and tablet devices but now need to be optimized for desktop computers! I have the great opportunity with ideaLEVER to be able to both design and develop some mobile sites for our clients, and am lucky enough to own an iPhone 4 to test the following example with. If you...

Recently I worked on a project that involved working with code that I did not write and I have got to say, there is nothing worse than opening up a style sheet that is messy. It is like walking into a friends house when they haven't cleaned it weeks. Yuck. This experience reminded me how important it is that we as developers write tidy, well structured and well commented code. Good coding practice doesn't just save YOU time, it saves us time when maintain YOUR beautiful site. Here at ideaLEVER...

If you have been coding HTML and CSS for any length of time you have most likely encountered a design that wanted to to align something vertically within it's container. Unless you want to add a ton of tables to your site this isn't always an easy task to accomplish. I know that I have struggled with it on more than one occasion. Did you know that you can set divs to display: table and table-cell? I sure didn't but you can and it works really well but there doesn't seem to be a blanket solution...

Recently I was working on a website that had a conditional statement which hid the full height of a div on the inside pages. Something like this: .menu-top-container{float: left; width: 980px;}     .page .menu-top-container{height: 320px; overflow: hidden;} A seemingly benign statement that you wouldn't anticipate to give you  much trouble height, width and overflow all declared; However this is the internet and we do get to deal with Internet Explorer. It would seem that there is a well...

Internet Explorer is full of odd behaviors but this one has got to take the cake. Recently a bug was reported in one of my websites for an IE8 user. Instead of seeing an opaque grey background on my navigation they were seeing a gradient that faded from the top to bottom corner into transparency. Making the text really really hard to read. Fortunately I harnessed the power of the internet and the Google search engine to find this post:...

Any designer who has ever sent their beautifully marked up newsletter to a variety of email clients knows the pain that is email marketing.  Things just don't display quite the same in Gmail and Outlook as they do in a browser window. The industry rule of thumb is to go back to the 90s in terms of your code which means markup should be in tables and inline css. But that doesn't mean that your newsletter has to look like it came out of the 90s. With a few key tips and tricks you can code...

Would you believe that there is a CMS that lets your user apply a background on a per page basis? Not only that.  It can scale to fit the browser window. Pretty shiny huh? The SiteCM header image control lets your client select an image to use in a predefined area on a per page basis. It has a default value so that if you don't select an image it will fall back to your default.  It also has a 'use parent' value so that all of the child pages will inherit their parents background or header...

[caption id="attachment_354" align="alignright" width="150" caption="Broken background on horizontal scroll"] [/caption] With the arrival of the iPad, tablet for PC and other mobile devices I've encountered more and more issues with my css not doing what you might think it would do on a smaller screen. Particularly when the design width of the site exceeds that of the browser window. CSS backgrounds fill to 100% of the browser window. You might think that this means the whole window but it...