CSS Articles ::
Categorized List of CSS ArticlesCreating Triangles in CSS
Posted on :: Mar 9
I’ve come across a few techniques and tips in my career, while working at my last gig a co-worker pointed me to this technique. I believe this was originally discovered by the legendary Eric Meyer, but I couldn’t find much documentation about it on the web so I thought I would describe it here.
HTML 4 and XHTML 1 to HTML 5
Posted on :: Feb 20
HTML5 has several new block-level sectioning elements that we can use to give relevant parts of web pages more semantic meaning. These new elements are for ‘chunks of related content’—basically a logical section of the document:
HTML 5 : Tag Reference
Posted on :: Dec 15
HTML 5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors.
Some of the new features in HTML 5 are functions for embedding audio, video, graphics, client-side data storage, and interactive documents. HTML 5 also contains new elements like <nav>, <header>, <footer>, and <figure>.
The HTML 5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and many hundreds of other vendors.
Note: HTML 5 is not a W3C recommendation yet!
iPhone compatible multi-column CSS liquid layouts
Posted on :: Dec 11
I've put together a series of website layouts that use percentage widths and relative positioning, and they work with all the common web browsers including Safari on the iPhone and iPod touch. They're also 'stackable' so you can use multiple column types on the one page. This makes the number of possible layouts endless! Follow the links below for the demos and more detailed info:
Conditional Comments :: What they are & how to use them
Posted on :: Nov 24
One of the most common operations performed in a Web page is to detect the browser type and version. Browser detection is performed to ensure that the content presented to the browser is compatible and renders correctly. The browser type can be detected using many different techniques. Most methods of browser detection make use of script on the server or client.
This article introduces conditional comments, which offer certain advantages over scripted browser detection techniques.
Designing Your Site for IE & Firefox
Posted on :: Nov 20
Hiding Styles from IE 6
It's actually really easy to hide styles from IE 6 but make them visible to standards compliant browsers. Use child selectors.
In one design I built, I created a two column layout that required margins and padding. This meant that I was hitting the box model differences when I viewed the page in IE 6. My first CSS style sheet for Firefox included a line like this:
div#nav { width: 150px; margin-left: 20px; }
This made the page line up perfectly in Firefox and Safari, but in IE the nav column was pushed over to the right too far.
So, I converted the line to use child selectors. The #nav div is a child of the body tag, so I changed the line to read:
body > div#nav { width: 150px; margin-left: 20px; }
Of course, doing this made the #nav div lose all it's properties in IE, so I needed to add in some IE styles to get IE 6 looking okay. I added this line to the CSS:
#nav { width: 150px; margin-left: 10px; }
The placement of this line of CSS is important if my page is still to look good in Firefox and Safari. The IE line needs to come first. Firefox and Safari will read that line and then it will be over-ridden by the body > div#nav selector lower in the document. IE 6 will read the first line and set the styles. It will then ignore the child selector, as it doesn't recognize them. When IE 7 comes along, it will act like Firefox and Safari.
By designing for a standards-compliant browser first, and then modifying your CSS to support IE's quirks, you spend a lot less time fiddling with the design and a lot more time actually designing.
IE 8 Need to knows...
Posted on :: Nov 9
Reports on IE8 Bugs, CSS 2 and CSS3 Display issues, IE7 Compatibility Mode and how to render your pages like IE7
A CSS / JQuery Framework you can use...
Posted on :: Nov 3
Better quality and coherence coding inside a front-end team
Preset CSS classes, know where your going with highly reusable classes
A collection of some of the best jquery scripts
A solid cross browser compatible stylesheetA new project means getting JS plug-ins together, clean a CSS and restart. This framework is intended to be your project starter, and in most case, you can jump in the project right away with a solid css foundation. This is not really a CSS “framework” but more a website starter kit.
The framework is based on a 960px grid, but is very easy to manipulate to get the grid you want. It is however not intended to be used as a liquid grid.
This is a CSS/Jquery Framework you can use and build upon.
Designing Websites for Mobile Phones
Posted on :: Sep 9
Mobile web design seems to be something that most developers are avoiding. I have worked on a couple mobile websites, during this process, I have made some discoveries which I thought I would detail to help out others who may be jumping into mobile web design in 2009.
Mobile Websites for the Real World
Posted on :: Sep 9
Mobile development is less about the device and more about you. Your desktop PC, while relatively compact, is not really mobile. Your laptop, while mobile relative to a desktop, retains the same basic physical requirements as a desktop: horizontal surface, room for keyboard and screen, the use of two hands, etc. Your mobile device, however, represents a singularity in the evolution of portable personal computing. You are no longer restricted to a limited set of movements and positions - not to mention the use of two hands - in order to interact with your device. In essence, the truly mobile device is an extension of you and not visa-versa.
What is the mobile web?
What’s So Bad About CSS Frameworks?
Posted on :: Jun 2
CSS frameworks are by no means breaking news. There have been several to choose from for a good couple of years now, with one of the earliest and most well-known being Yahoo’s Grids CSS.What’s amazing to me is that many are failing to take advantage of these great little time-savers.
A quick stroll through any forums reveals plenty of people having the same frustrating, discouraging issues with floated layouts and positioning; I’m quite sure these could’ve been avoided if the developer had simply used tried and tested layout methods grabbed from a CSS framework.Hey, hold on — put those rotten tomatoes away! I’ll explain, I promise.
Heading Tags Explained
Posted on :: May 18
Heading tags are an integral part of SEO (search engine optimization).
5 Reasons to use css
Posted on :: May 18
Some useful and helpful reasons why to use CSS.
Text Sizng and Fluidity
Posted on :: May 18
Fluid and liquid layouts are definitely considered the ‘ideal’ design type right now, and I cannot agree more. I much prefer a fluid design over a set layout. For text we know that relative sizing (meaning the use of em, ex, and percentages) are preferred over the use of pixel sizing.
CSS Tips, Class or Div?
Posted on :: May 18
If your beggining CSS or even if you're not, this can be a bit challenging, and many a time i’ve heard people ask “But theres no difference, so which should I use ?”. In this short article I will explain the slight, but important, difference between the two.
Converting Tables to a CSS Div Tag and XHTML validated layout
Posted on :: Apr 30
This is one very long tutorial/article. I know that many web designers, particularly those who adore table-based layouts will find this articles/tutorial especially helpful. I will be teaching you how to take your current website/layout created with tables, tear it apart, and put it back together using valid XHTML and CSS.
Here’s a bit of an overview of what we’re about to do:
a: Replace all tables with div’s
b: Remove any broken, or old invalid code.
c: Edit remaining code so it fits XHTML transitional standards.
d: Write a CSS file to style the new layout.CSS MouseOver Effects
Posted on :: Apr 30
In this CSS Tutorial, I'm goin to show you that making a Mouse Effect, doesn't always need to use JavaScript.
Infact, the same overall effect can be achieved with the use of some CSS. This sample will be using 3 overall images: One for the regular state, one for the mouse over state and one for the clicked state.Why not tables? Is CSS really better?
Posted on :: Apr 30
A lengthy discussion on the ultimate value of pure CSS (Cascading Style Sheets) based layout over the use of tables has been taking place. Sometimes, living in the sheltered world of accessible and standards-based design, I can lose touch with the fact that many people out there simply don’t accept some of the same guidelines I work with every day?—?- and that this does not, in any way, mean that they haven’t given the subject a fair shot. Very good arguments have been made to defend each side.
On the whole, I think this discussion is an old, worn-out subject: those who won’t use tables generally don’t use them out of principle, and those who do use them out of pragmatism and a justified awareness that principles don’t build websites. I want to review the question once more, however, ignoring the entire question of principle.
Reasons Why CSS Is Superior to Tables in Website Design
Posted on :: Apr 30
Why is it that Cascading Style Sheets (CSS) are superior to table-based layouts when designing a website? Some web designers swear that table-based layouts are better than CSS-based layouts, while others believe that table-based layouts are ancient history and XHTML combined with CSS is the only real solution to coding a web site’s visual layout. Since we’re one of those CSS die-hards, we’ve compiled a list of 13 reasons why CSS-based layouts are superior to table-based layouts.