Skip to main content

Home/ Web Development, Design & Programming/ Group items tagged design reference

Rss Feed Group items tagged

Soul Book

Photoshop Tutorials: Toolbox Reference - 0 views

    This section of the site is a comprehensive Photoshop Toolbox reference. Click on a tool to view its video-manual
Soul Book

CSS techniques I use all the time - 0 views

  • EM calculations
    Sizing text is always an important part of making a usable design. I start all my CSS files with the following rules:
    html { font-size:100.01%; }
    body { font-size:1em; }
    The explanation for this comes from "CSS: Getting Into Good Coding Habits:"
    This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current "best" suggestion is to use the 100.01% value for this property.
  • I used the following calculation: 14px/16px = .875, 18px/16px = 1.125. So my default text at 1 em would translate to 16px for most users, and my small text I sized at .875em which I can trust to result in 14px for most users, while my large text I sized at 1.125em which I can trust to result in 18px
  • Safe Fluid-width Columns
    I work with hybrid fluid layouts all the time, usually with max-width set at anywhere from 900 to 1000px. I usually have floated columns with percentage widths, and browsers will calculate these percentage widths to whole pixel values when rendering the columns.
  • ...3 more annotations...
  • A typical problem is the following: when a user has the viewport at a size that makes the outer container 999 pixels wide, if the first column is 60% and the second is 40%, IE 6 will always calculate the two columns as 600 and 400 pixels and as a result, the two will not fit (600+400 = 1 more than 999) and it will drop the second column. This is obviously not intended behavior, and in a world where we still have to use floats for columns (I can't wait for display:table support across all browsers), it's important to work around this problem. I used to give my last column 1 less percent (in this example, it would have 39% instead of 40%, but this would usually result in columns that don't quite fill up the container. Of late I have been giving the last column .4 less percent (in this example, 39.6%), which seems to work perfectly. Browsers will calculate this width and round up, but it will still fit even with an odd container width like 999px and I won't have to worry about dropped columns.
  • Filtering for Old Browsers
    To be honest, I barely support IE 6 nowadays. If there is something special about my layout that doesn't work in IE 6, I will simply filter it out of the CSS that IE 6 understands
  • Because old browsers like IE 6 don't support the "first child" selector (right caret >), I can do the following to make sure that IE 6 only gets the basic setting and all the new-fangled browsers get the right result:
    div#container { width:900px; }
    html>body div#container {
    /* This overrides the previous declaration 
       in new browsers only, 
       IE 6 simply ignores it. */
    Excellent simple collection of CSS tips that are easy to remember and implement. It's an old article, but i think everything is still relevant
Soul Book

A List Apart: Articles: How to Size Text in CSS - 0 views

    "When pixels failed before, we turned to ems. Repeating the logic gives us the following styles:

    body {
    line-height:1.125em; /* 16×1.125=18 */

    .bodytext p {

    .sidenote {
awqi zar

SitePoint CSS Reference - 0 views

    You can dating in here. This is a best site dating
1 - 10 of 10
Showing 20 items per page