Tuesday, 24 February 2015

Points to Pixels

Approximate Conversion from Points to Pixels

(and Ems and %)

Here's a chart that converts points to pixels (and ems and %). It's an approximation, which will depend on font, browser and OS, but it's a good starting point.
Points Pixels Ems Percent
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%

How to Make Transparent Carousel Control on IE9

Add this Class

.carousel-control.right,
.carousel-control.left{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000);
}

Monday, 23 February 2015

Bootstrap useful classes

@charset "utf-8";

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);

@font-face {
    font-family: 'nexabold';
    src: url('css/NEXA BOLD-webfont.eot');
    src: url('css/NEXA BOLD-webfont.eot?#iefix') format('embedded-opentype'),
         url('css/NEXA BOLD-webfont.woff2') format('woff2'),
         url('css/NEXA BOLD-webfont.woff') format('woff'),
         url('css/NEXA BOLD-webfont.ttf') format('truetype'),
         url('css/NEXA BOLD-webfont.svg#nexa_boldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/**********gmk classes***********/
/*======== CONTENT ========*/
 font-family:"nexabold";
 }

body nav.navbar {   font-family: "Open Sans";}
 
 
body{
 font-family:"Open Sans";
   overflow-x: hidden;
}


.cr a {
    color#fff;
}


/*truncate string / limited text */

/*======== SPACING & ALIGNMENTS ========*/
/*for flat icons*/

.pad0{    padding: 0;}

.pad-l0{    padding-left: 0;}

.pad-r0{    padding-right: 0;}

.martop30{
margin-top:30px;
}

.marbot30{
margin-bottom:30px;
}

.wide-dvr,
.dvr .container {
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.pull-lft {
    float: left;
}
.pull-rgt {
    float: right;
}
.pull-cntr {
    float: none;
    margin: 0 auto;
}

.valign {
/*========= IMG =========*/
.ovrflw {
    overflow: hidden;
}

.ovrimg {
    overflow: hidden;
}

.ovrimg img{
    width: 100%;
}


/*========= BG ========*/
.wide-box-holder {
clear:both;
    position: relative;
overflow:hidden;
}.

.ovrvis{ overflow:visible; }
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -80;
}

.section-bg > img {
    height: auto;
    width:100%;
}

/*relative for inside of wide box*/

/*========= LIST  ========*/

.zebra-cross > *:nth-child(2n+1){
background-color:#eee;

}


.clrlist ul {
    padding: 0;
    margin-bottom:0;
}

.clrlist li {
    display: inline-block;
    list-style-type: none;
}

.listview ul li {
display:block;
}


.listdvr li + li {
    border-left: 1px solid #eee;
}

[class*="list-col-"] ul { padding:0; }


.alistdvr li a{
    border-right: 1px solid #eee;
   margin-right: 10px;
    padding-right: 15px;
}
.alistdvr li:last-child a{
    border: 0;
}


/*========= SLIDER =========*/

/*for slider caption*/



/*======== FORM =========*/

[type="submit"] {
    background-color: #ff6500;
    color: #fff;
}
.form-control {
    border: 1px solid #eee;
    border-radius: 0;
    height: 40px;
}

/*radio button*/
option:hover {
    background-color#fafafa;
.form-control::-moz-placeholder {
color:#ccc;
}

.form-control:-ms-input-placeholder {
color:#ccc;
}

.form-control::-webkit-input-placeholder {
color:#ccc;
}


body,
body *,
body *:after,
body *:before,
.transition, .transition *, .transition *:after,  .transition *:before,
.transition *:hover{
transition:all 0.3s ease 0s !important;
/*
    transition: all 500ms ease 0s; */
}



/*====== NAVBAR ======*/
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{
    background-coloryellow;
}



@media only screen and (max-width : 768px) {
body .nav.navbar-nav {

.sticky-hdr {
    background-color: rgba(255, 255, 255, 1);
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid #eee;
    font-size: 12px;
    position: fixed !important;
    width: 100%;
    z-index: 5555;
}

/*========LINKS========*/
.strip-btn a {
    animation: 2s linear 0s normal none infinite running progress-bar-stripes;
border-bottom:5px solid #cc4500;
}

.strip-btn a:hover {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
color:#fff !important;
    box-shadow:0 0 0 1% rgba(255, 69, 0, 0.5);;
}

.iln-btn {
    display: inline-block;
}

/*========HOVER========*/


/*
For Mobile Friendly Navigation
http://jsfiddle.net/gmkhussain/awqs01zc/
*/
/****Note: add above Class for hover***/



/**********./gmk classes***********/

Bootstrap classes with description

Basic Bootstrap Classes

.container

  • sets fixed width to an element (which changes depending on a screen size to other fixed values, so it's still responsive) on all screen sizes except xs - on xs, the width is calculated automatically (this behaviour can be changed)
  • a fixed width responsive website should be wrapped in .container (or just the content without menu, whatever - it's up to you)
  • .container can't be nested!

.container-fluid

  • sets 100% width, margin-left and margin-right: auto, padding-left and padding-right: 15px
  • a full screen website should be wrapped in .container-fluid
  • .container-fluid can't be nested!

.row

  • creates horizontal groups of columns (which usually have width classes, see below)
  • must be within .container to ensure correct padding and alignment
  • only columns (block elements with width classes) may be immediate children of rows
  • sets margin-left and margin-right: -15px

.pull-right

.pull-left

  • sets float to either left or right

.wrap

  • sets clear: both and width: 100%

.center-block

  • sets margin-left and margin-right to auto

Bootstrap Grid Classes

  • can be nested, the nested columns must be wrapped in .row as well
  • all columns have float: left and position: relative styles

.col-xs-1

.col-xs-2

.col-xs-3

.col-xs-4

.col-xs-5

.col-xs-6

.col-xs-7

.col-xs-8

.col-xs-9

.col-xs-10

.col-xs-11

.col-xs-12

  • sets width of a column (specified in %) on extra small screens (<768pxt)

.col-sm-1

.col-sm-2

.col-sm-3

.col-sm-4

.col-sm-5

.col-sm-6

.col-sm-7

.col-sm-8

.col-sm-9

.col-sm-10

.col-sm-11

.col-sm-12

  • sets width of a column (specified in %) on small screens (≥768px)

.col-md-1

.col-md-2

.col-md-3

.col-md-4

.col-md-5

.col-md-6

.col-md-7

.col-md-8

.col-md-9

.col-md-10

.col-md-11

.col-md-12

  • sets width of a column (specified in %) on medium size screens (≥992px)

.col-lg-1

.col-lg-2

.col-lg-3

.col-lg-4

.col-lg-5

.col-lg-6

.col-lg-7

.col-lg-8

.col-lg-9

.col-lg-10

.col-lg-11

.col-lg-12

  • sets width of a column (specified in %) on large screens (≥1200px)

.col-xs-offset-* (.col-xs-offset-1, .col-xs-offset-2, .col-xs-offset-3 ... up to -12)

.col-sm-offset-* (.col-sm-offset-1, .col-sm-offset-2, .col-sm-offset-3 ... up to -12)

.col-md-offset-* (.col-md-offset-1, .col-md-offset-2, .col-md-offset-3 ... up to -12)

.col-lg-offset-* (.col-lg-offset-1, .col-lg-offset-2, .col-lg-offset-3 ... up to -12)

  • sets offset (margin-left) by specified number of columns (eg. set .col-sm-offset-3 class to a column to move it by three columns on small screens)

.col-xs-pull-* (.col-xs-pull-1, .col-xs-pull-2 ... up to -12)

.col-sm-pull-* (.col-sm-pull-1, .col-sm-pull-2 ... up to -12)

.col-md-pull-* (.col-md-pull-1, .col-md-pull-2 ... up to -12)

.col-lg-pull-* (.col-lg-pull-1, .col-lg-pull-2 ... up to -12)

  • sets left position in % as it is with columns (e.g. left: 75% with -pull-9)

.col-xs-push-* (.col-xs-push-1, .col-xs-push-2 ... up to -12)

.col-sm-push-* (.col-sm-push-1, .col-sm-push-2 ... up to -12)

.col-md-push-* (.col-md-push-1, .col-md-push-2 ... up to -12)

.col-lg-push-* (.col-lg-push-1, .col-lg-push-2 ... up to -12)

  • sets right position in % as it is with columns (e.g. right: 25% with -push-3)

Bootstrap Visibility Classes

  • you can apply all as many of these classes on a single element as you wish and this mixing gives you even more possibilities for your layout

.clearfix

  • obvious, clear: both
  • often combined with classes below

.visible-xs-block and .visible-xs

.visible-sm-block and .visible-sm

.visible-md-block and .visible-md

.visible-lg-block and .visible-lg

  • displays element (sets display: block property) only on screens with specified size and hides it (sets display: none) on screens of other sizes automatically
  • often combined with .clearfix so that clearfix is effective only on the selected screen size

.visible-xs-inline-block

.visible-sm-inline-block

.visible-md-inline-block

 

.visible-lg-inline-block

  • displays element (sets display: inline-block property) only on screens with specified size and hides it (sets display: none) on screens of other sizes automatically

.visible-xs-inline

.visible-sm-inline

.visible-md-inline

.visible-lg-inline

  • displays element (sets display: block property) only on screens with specified size and hides it (sets display: none) on screens of other sizes automatically

.hidden-xs

.hidden-sm

.hidden-md

.hidden-lg

  • hides element (sets display: none property) only on screens with specified size and hides it (sets display: none) on screens of other sizes automatically

.visible-print-block

  • displays element (sets display: block) in print (pre)view

.visible-print-inline

  • displays element (sets display: inline) in print (pre)view

.visible-print-inline-block

  • displays element (sets display: inline-block) in print (pre)view

.hidden-print

  • hides element (sets display: none) in print (pre)view

Bootstrap Typography Classes

  • default font-size of <body> a <p> elements is 14px, line-height 1.428; <p> also has margin-bottom of half of its line-height (20px with 14px font), therefore 10px by default
  • all elements like b, big, code, em, i, mark, small, strong, sub, sup, ins, del, s, u, abbr, address and blockquote (and small and cite inside) are properly styled
  • vast majority of these classes are most often set to either paragraph, strong or em elements

.page-header

  • class for a wrapping div of a heading
  • adds some margin, padding and border-bottom

.h1

.h2

.h3

.h4

.h5

.h6

  • makes an element look like heading of a chosen level

.lead

  • for highlighting an element
  • sets element's font-size to 21px, font-weight: 300, line-height: 1.4 and margin-bottom: 20px

.text-left

.text-center

.text-right

.text-justify

  • aligns texts, usually paragraphs, with text-align CSS property

.text-nowrap

  • keeps the whole text with this class on a single line, no wrapping occurs because of white-space: nowrap CSS property of this class

.text-lowercase

.text-uppercase

.text-capitalize

  • sets text-transform CSS property to make all characters inside the element with this class lowercase, uppercase or capitalized

.text-muted

  • makes text grey

.text-primary

  • makes text blue

.text-success

  • makes text green

.text-info

  • makes text dark blue

.text-warning

  • makes text dark yellow

.text-danger

  • makes text red

Bootstrap Lists' Classes

.list-unstyled

  • removes list-style and margin-left on list items
  • doesn't apply for nested lists (if needed, the nested list has to have .list-unstyled class as well)

.list-inline

  • places list items on a single line (with display: inline-block and padding)

.dl-horizontal

  • class for a definition list (<dl>)
  • sets nice styles for <dt> and <dd> within the definition list (text align, font-weight)

.list-group

  • class for the parent element (usually <ul>, but can be <div> as well) of list items
  • list items have to have .list-group-item class

.list-group-item

  • class for .list-group children elements
  • for a nicer look of the list items
  • usually on <li>, but can be <a> as well

.list-group-item-heading

  • for a heading within .list-group-item, often <h4> or similar low-level heading

.list-group-item-text

  • for text within .list-group-item, often in the paragraph tag or just in a span

Bootstrap Tables' Classes

.table

  • for an ordinary table
  • table heading has only border-bottom and <td>s have only border-top

.table-striped

  • every odd line will be darker for a nicer look (using :nth-child selector)
  • table heading <th> has only border-bottom and <td>s have only border-top
  • should be combined with .table class

.table-bordered

  • table with borders all around
  • should be combined with .table class

.table-hover

  • class for a table
  • adds hover/focus effect on the table's tbody rows
  • should be combined with .table class

.table-condensed

  • should be combined with .table class
  • for an ordinary table with half cell padding, so rows are not that high

.table-responsive

  • class for a wrapper (! mostly div) of a table to keep it responsive in the way that scrollbar appears on extra small devices

.active

.success

.info

.warning

.danger

  • classes for either <tr> or just <td>
  • sets background color for all <td> in a table row (or just one <td>) to grey (active) / green (success) / blue (info) / yellow (warning) / red (danger)

Bootstrap Forms' Classes

  • don't forget that even form elements can be in the Bootstrap grid, so don't be afraid to use .row inside a form and then col-*-* wrappers

.form-group

  • when creating vertical forms, it's a class for its wrapper (mostly div) of each label and its input, adds some margin-bottom

.form-control

  • for every form element (input, textarea...), gives it 100% width
  • to make it narrower, use a narrower wrapper (row and col-*-* divs)

.form-control-static

  • for a paragraph that replaces a form element (input...)

.form-horizontal

  • for horizontal forms where label is on the same line as input
  • you have to use column classes (like col-xs-10) for each label and its input (or whateveer it is)
  • still combined with .form-group wrapper and .form-control classes

.form-inline

  • for a single line form (but still vertical on extra small screens)
  • often used with the placeholder attribute to not need labels
  • labels of inline forms should get .sr-only class to be positioned so that they can't be seen (but they won't get display: none or visibility: hidden property)

.input-lg

.input-sm

  • makes a form element like input or select either bigger or smaller than default

.input-group-lg

.input-group-sm

  • classes for .input-group (see further)
  • always used together with .input-group class

.input-group

  • class for a wrapper of .input-group-addon or .input-group-btn
  • used instead of form-group when the classes above are used

.input-group-addon

  • class for a span that serves as a wrapper for either .glyphicon or a radio/checkbox input
  • adds your choice (glyphicon...) on the inner edge of an input field with grey background
  • the span with this class can be either before or after input, depends where you want the icon to show (the left or right side of the input)
  • must be within .input-group

.input-group-btn

  • class for a span that serves as a wrapper for a button that looks like it was within a form input
  • the span with this class can be either before or after input, depends where you want the button to show (left or right side of the input)
  • contains <button> (the button can also include .dropdown-toggle class, span with .caret class and data-toggle="dropdown" attribute for even more complicated buttons)
  • must be within .input-group

.caret

  • class for an empty span that creates a dropdown arrow

.help-block

  • class for a span that serves as a help text for users
  • has to be placed right after an input of a form

.has-success

.has-warning

.has-error

  • classes for wrapping divs with .form-group class
  • colours the label, input and .help-block span inside to green/yellow/red
  • the label within the wrapper with one of these classes has to have .control-label class to be coloured as well

.has-feedback

  • class for the wrapping divs with .form-group class when you also use glyphicon for the input within the wrapper
To disable input, use disabled="disabled" or readonly="readonly",
To disable whole fieldset, wrap form-groups to fieldset with disabled="disabled"

Bootstrap Image Classes

  • images should have .img-responsive or .thumbnail to be responsive and be wrapped in a column wrapper (like col-xs-3...)

.img-rounded

  • img class that provides little border-radius

.img-circle

  • img class that provides 50% border-radius making the img circle shaped

.img-thumbnail

  • img class that provides a 1px solid grey border, 4px padding, white background, display: inline-block property and fast CSS3 transition

.thumbnail

  • class for a wrapping div (or <a> in case of gallery) of an image, adds some styles (border, padding, background, transition) and set's the image max-width: 100%, height: auto; display: block; and margin-left and margin-right: auto

.img-responsive

  • img class that makes any image responsive (scaling to the parent element) as it has max-width: 100% and height: auto
  • may not work if placed in a floating element!

.caption

  • class for a div inside .thumbnail element (a or div) that may include h3, p, a (also buttons) for a proper margin/padding

.media

  • class for a div (or li, whatever) that may contain an image, a heading, some <small> text and paragraphs
  • ensures proper image margin/padding
  • heading inside should also have media-heading attribute and should be (together with paragraphs) wrapped in a .media-body wrapper
  • any image within should have .pull-left or .pull-right class to float

.media-list

  • class for a list (ul, ol) that contains .media inside
  • ensures better margin/padding

.glyphicon

  • base class for glyphicons (font-based icons), sets font, its styles and positioning
  • should be used on a span

.glyphicon-* (replace the star with any name of a glyphicon from this list)

  • sets picture via font and :before CSS3 selector with content of the font
  • must be used together with .glyphicon class to show proper image
  • should be used on a span

Bootstrap Embed Classes

.embed-responsive

  • general class for responsive embedding wrapper

.embed-responsive-4by3

.embed-responsive-16by9

  • specific class for the embed wrapper with ratio already set
  • used together with .embed-responsive class

.embed-responsive-item

  • used on the iframe or whatever it is inside the wrapper

Bootstrap Navigation Classes

.nav

  • the basic class for every navigation structure (<ul>), removes any list-style, left padding and bottom margin
  • also sets display: block and position relative for its <li> children
  • must be set on every navigation

.active

  • class for a list item (nav item, li) that makes it look active / current

.nav-tabs

  • class for navigation structure that gives it a tab style (proper borders + float: left)

.nav-pills

  • class for navigation structure that gives it a pills style (background on active nav item)

.nav-stacked

  • makes vertical pills navigation
  • used together with .nav-pills (and .nav of course)

.dropdown

  • class for an
  • nav item to make it dropdown
  • needs additional classes elsewhere to work (see below)

.dropdown-toggle

  • class for an <a> which is within <li class="dropdown"> to make a dropdown menu
  • needs additional classes elsewhere to work (see below)

.dropdown-menu

  • class for an <ul> which is within <a class="dropdown-toggle"> to make a dropdown menu
  • provides proper displaying and hiding
  • the most important dropdown menu class
  • needs .dropdown and .dropdown-toggle classes on parent elements (see above)

.nav-justified

  • class for an <ul>, together with .nav-tabs or .nav-pills creates a navigation with centered text and links' parent elements of the same width

.disabled

  • class for <li> in a navigation
  • disables the link inside VISUALLY and also adds a special mouse cursor, but the link remains active - you need to remove the href attribute of the <a> to completely disable the link

Bootstrap Navbar Classes

  • the difference between nav and navbar classes is the fact that navbar can collapse the whole nav (the nav can't do it on its own)

.navbar

  • basic class for a navigation wrapper (usually <nav>), sets border, bottom margin, min-height and position: relative
  • if it's not supposed to be fixed, can be placed anywhere in .container or .container-fluid

.navbar-default

  • sets other basic styles for a navigation wrapper (background gradient and box-shadow) and also its items (including .active class on <li>s)
  • for dark colours, see .navbar-inverse below

.navbar-inverse

  • variation of navbar-default but with dark colours
  • never use navbar-default and navbar-inverse on one element as it doesn't make any sense

.navbar-brand

  • sets styles for special hyperlinks and other "simple text" in a menu (float: left, bigger font size, some padding, text-shadow...)

.navbar-fixed-top

.navbar-fixed-bottom

  • additional class to .navbar that makes the navigation fixed at the top (or bottom) of the page as you scroll
  • used together with .navbar and also .navbar default (just to keep the nice look)
  • you should add some top or bottom padding to your <body> to not let the navbar overflow your content

.navbar-static-top

  • removes top, right and left border and also border-radius of your navigation

.breadcrumb

  • class for <ul> that serves as breadcrumbs
  • gives breadcrumbs a cool look

.pagination

  • class for <ul> that serves as pagination
  • properly styles <li> within this pagination also with .disabled and .active classes (keep in mind that .disabled doesn't remove link's functionality)

.pagination-lg

.pagination-sm

  • used on <ul> together with .pagination, makes pagination either bigger or smaller than default

.pager

  • used on <ul>, styles "Previous" and "Next" links to look better with a grey border
  • its list items can have .previous, .next and also disabled classes for even better styling

.next

.previous


  • used on <li> within <ul class="pager">, adds arrows to the links

Thursday, 5 February 2015

The Principles Of Cross-Browser CSS Coding

It is arguable that there is no goal in web design more satisfying than getting a beautiful and intuitive design to look exactly the same in every currently-used browser. Unfortunately, that goal is generally agreed to be almost impossible to attain. Some have even gone on record as stating that perfect, cross-browser compatibility is not necessary.
While I agree that creating a consistent experience for every user in every browser (putting aside mobile platforms for the moment) is never going to happen for every project, I believe a near-exact cross-browser experience is attainable in many cases. As developers, our goal should not just be to get it working in every browser; our goal should be to get it working in every browser with a minimal amount of code, allowing future website maintenance to run smoothly.
In this article, I’ll be describing what I believe are some of the most important CSS principles and tips that can help both new and experienced front-end developers achieve as close to a consistent cross-browser experience as possible, with as little CSS code as possible.
Cross-Browser CSS

Understand the CSS Box Model

This is one of the first things you should be thoroughly familiar with if you want to be able to achieve cross-browser layouts with very few hacks and workarounds. Fortunately, the box model is not a difficult thing to grasp, and generally works the same in all browsers, except in circumstances related to certain versions of Internet Explorer (more on this later).
The CSS box model is responsible for calculating:
  • How much space a block-level element takes up
  • Whether or not borders and/or margins overlap, or collapse
  • A box’s dimensions
  • To some extent, a box’s position relative to other content on the page
The CSS box model has the following basic rules:
  • Block-level elements are essentially rectangular (as are all elements, really)
  • The dimensions of a block element are calculated by width, height, padding, borders, and margins
  • If no height is specified, a block element will be as high as the content it contains, plus padding (unless there are floats, for which see below)
  • If no width is specified, a non-floated box will expand to fit the width of its parent minus padding (more on this later)
Some important things to keep in mind for dealing with block-level elements:
  • If a box has its width set to “100%”, it shouldn’t have any margins, padding, or borders, otherwise it will overflow its parent
  • Vertically-adjacent margins can cause some complex collapsing issues that may cause layout problems
  • Elements positioned relatively or absolutely will behave differently, the details of which are extensive and beyond the scope of this article
  • The rules and principles above are stated under the assumption that the page holding the block-level elements is rendered in standards mode (this point was added later after review of the comments posted)
The Box Model as shown in Firebug
The box model as its displayed using Firebug in Firefox

Understand the Difference Between Block and Inline

For experienced developers, this is another no-brainer. It is, however, another crucial area that, when fully understood, will cause the light bulb to appear, many headaches will be avoided, and you’ll feel much more confident in creating cross-browser layouts.
The image below illustrates the difference between block and inline elements:
Block and Inline Elements
Here are some basic rules that differentiate block elements from inline:
  • Block elements will, by default, naturally expand horizontally to fill their parent container, so there’s no need to set a width of “100%”
  • Block elements will, by default, begin at the leftmost edge of the parent box, below any previous block elements (unless floats or positioned elements are utilized; see below)
  • Inline elements will ignore width and height settings
  • Inline elements flow with text, and are subject to typographical properties such as white-space, font-size, and letter-spacing
  • Inline elements can be aligned using the vertical-align property, but block elements cannot
  • Inline elements will have some natural space below them in order to accommodate text elements that drop below the line (like the letter “g”)
  • An inline element will become a block element if it is floated

Understand Floating and Clearing

For multi-column layouts that are relatively easy to maintain, the best method is to use floats. Having a solid understanding of how floats work is, therefore, another important factor in achieving a cross-browser experience.
A floated element can be floated either left or right, with the result that the floated element will shift in the specified direction until it reaches the edge of its parent container, or the edge of another floated element. All non-floated, inline content that appears below the floated element will flow along the side of the element that is opposite to the float direction.
A Floated Element
Here are some important things to keep in mind when floating and clearing elements:
  • Floated elements are removed from the flow of other block-level, non-floated elements; so in other words, if you float a box left, a trailing paragraph (block level) that’s not floated will appear behind the float in the stack, and any text inside the paragraph (inline level) will flow around the float
  • To get content to flow around a floated element, it must be either inline or else floated in the same direction
  • A floated element without a declared width will shrink to the width of its content, so it’s generally best to have a set width on a float
  • If a block element contains floated children, it will “collapse”, requiring a fix
  • An element that’s “cleared” will avoid flowing around floated elements above them in the document
  • An element that’s both cleared and floated will only clear itself of elements that come before, not after

Use Internet Explorer First (Or Don’t)

Please note that Smashing Magazine’s team strongly advises against developing websites in Internet Explorer first. In our opinion, sites should be developed in “modern” web-browsers, with standards first and then be tweaked for buggy versions of Internet Explorer. The advice below does not reflect the opinion of the Smashing Editorial team. Agree or disagree? Comment on this article!
Most of what I’ve discussed so far has to do with CSS coding and layout principles. This principle is more related to habits and preferences of most designers. Although we might hate to use IE6 and IE7 in our everyday internet activities, when it comes time to build a client project from scratch, one of the best things you can do is test your layout in those browsers early in development. You might even want to open up a standalone version of IE6 or IE7 and just start your development in that browser.
Of course, you won’t have access to tools like Firebug, but generally for CSS (especially early in development) you won’t need Firebug. It’s much easier to get a layout working first in IE6 and IE7, then fix for other browsers, than to do it the other way around. Waiting until late in the development process to open up IE6 and/or IE7 will likely cause some, if not all, of the following problems:
  • Multiple hacks will be required, needing separate stylesheets for different versions of IE, making the code bloated and less maintainable and making the website slower
  • The layout in some spots may have to be reworked, multiplying development time
  • Testing time will increase, sometimes exponentially, leaving less time for more important tasks
  • The layout in other browsers will not be the same as in IE6 and IE7
I wouldn’t expect developers to use Internet Explorer this aggressively for personal projects, web apps, or other non-client work. But for corporate clients whose user base is primarily on Internet Explorer, this tip could prevent a lot of headaches while getting things to work properly, and will definitely make a cross-browser experience much more likely.
Sometimes viewing IE’s problems as “annoying bugs” can create unnecessary negativity, and can hinder development time and future maintenance. Dealing with IE is a fact of life for designers and developers, so just view its problems as you would any CSS issue — and build from there.

Understand Internet Explorer’s Most Common Problems

If you’re going to start with IE in your development, or at the very least check your layout in IE early on, then you should understand what things Internet Explorer (usually versions 6 & 7) has problems with, or what its limitations are.
A detailed discussion of every possible problem that can occur in Internet Explorer, and a list of all of its CSS compatibility issues is certainly beyond this article. But there are some fairly significant inconsistencies and issues that come up in relation to IE that all CSS developers should be aware of. Here is a rundown of the most common problems you’ll need to deal with:
  • IE6 will become problematic if floats are overused, causing (paradoxically) disappearing content or duplicate text
  • IE6 will double the margin on floated elements on the side that is the same direction as the float; setting display: inline will often fix this
  • In IE6 and IE7, if an element doesn’t have layout, it can cause a number of problems, including backgrounds not showing up, margins collapsing improperly, and more
  • IE6 does not support min- and max-based CSS properties like min-height, or max-width
  • IE6 does not support fixed positioning of background images
  • IE6 and IE7 do not support many alternate values for the display property (e.g. inline-table, table-cell, table-row, etc.)
  • You cannot use the :hover pseudo-class on any element in IE6 except an anchor (<a>)
  • Certain versions of IE have little support for certain CSS selectors (e.g. attribute selectors, child selectors, etc.)
  • IE versions 6-8 have little support for CSS3, but there are some workarounds
There are many more bugs, issues, and inconsistencies that can arise in Internet Explorer, but these are probably the most common and most important ones to keep in mind when trying to create a cross-browser experience. I encourage all developers to do further research on many of the issues I’ve mentioned above in order to have a more accurate understanding of what problems these issues can cause, and how to handle them.

Some Things Will Never Look the Same

As already mentioned, creating the exact same experience visually and functionally in every browser is possible, but unlikely. You can get the layout and positioning of elements close to pixel-perfect, but there are some things that are out of the developer’s control.

Forms Will Often Look Different

Discussing all the differences and quirks that occur with form elements across the different browsers and platforms could be an article in itself, so I won’t go into extensive details here. A simple visual demonstration, however, should suffice to get the point across.
Take a look at the image below, which displays the <select> elements on the Facebook home page, as shown in 5 different browser versions (screenshots taken from Adobe’s Browserlab):
The Facebook sign-up form in different browsers
<select> elements appear differently in different browsers
Some form elements can be controlled visually. For example, if the client requires that the submit button looks the same in every browser, that’s no problem, you can just use an image, instead of the default <input type="submit">, which, similar to <select> elements, will look different in different browsers.
But other form elements, like radio buttons, textarea fields, and the aforementioned <select> elements, are impossible to style in a cross-browser fashion without complicating matters using JavaScript plugins (which some developers feel harm the user experience).

Typography Will Always Look Different

Another area in which we can’t expect pixel-perfect designs is with regards to fonts, particularly fonts on body copy. Different methods have sprung up to help with custom fonts in headers, and the recently launched Google Font API will contribute to this. But body copy will probably always look different in different browsers.
With typography, we not only face the problem of font availability on different machines, but in some cases even when the font is available on two different machines, the type will look different. Windows ClearType, for example, is available on IE7, but not on IE6, causing the same font to look different on two different versions of IE.
The graphic below displays screenshots from A List Apart on IE6 and IE7. The grainy text in IE6 is more evident on the heading than in the body copy, but all text displays a marked difference between the two browsers (unless of course the text is an image):
A List Apart's typography compared in IE6 and IE7
A List Apart’s typography compared in IE6 and IE7

Use a CSS Reset

Ever since I started using a CSS reset for my projects, my ability to create a cross-browser experience has greatly increased. It’s true that most resets will add unnecessary code to your CSS, but you can always go through and remove any selectors that you know will not be a factor (for example, if you don’t plan to use the <blockquote> tag, then you can remove reference to it, and repeat this for any other unused tags).
Many of the margin- and padding-related differences that occur across different browsers become more normalized (even in troublesome HTML forms) when a CSS reset is implemented. Because the reset causes all elements to start from a zero base, you gain more control over the spacing and alignment of elements because all browsers will begin from the same basic settings.
CSS Reset
A CSS reset as shown in Firefox’s developer toolbar
Besides the benefits of producing a cross-browser experience, a reset will also be beneficial because you won’t use as many hacks, your code will be less bloated, and you’ll be much more likely to create maintainable code. I recommend Eric Meyer’s CSS reset, which I’ve been using for quite some time now.

Use SitePoint’s CSS Reference

If you’re having trouble getting a particular CSS property to display correctly across all browsers, look up the property in the SitePoint CSS Reference to see if it has any compatibility limitations. SitePoint’s reference (which is also available as a hard copy, though not as up to date), includes a useful compatibility chart that displays browser support for every standard CSS property.
SitePoint's Compatibility Charts for CSS Properties
SitePoint’s Compatibility Charts for CSS Properties
Each compatibility chart is accompanied by a fairly detailed description of the bugs that occur in different browsers, and users are permitted to add comments to document new bugs that come up and to provide further explanations on complex CSS issues.
Using this as a guide, you can narrow down the possibilities, and can usually determine whether or not a CSS issue is due to a browser bug, or due to your own misapplication or misunderstanding of the CSS property in question.

Conclusion

While there is so much more that could be discussed on the topic of cross-browser CSS, the principles and guidelines I’ve introduced here should provide a foundation to assist CSS developers in creating as close to a consistent cross-browser experience as is currently possible. Cross-browser CSS is an attainable goal, within reasonable limits.
But, as an epilogue to this article, I also would like to concur with those promoting the use of CSS3 with progressive enhancement, and encourage developers to push new CSS techniques to the limits, even doing so, where possible, on client projects.

The principles I’ve introduced here should help developers create a beautiful and intuitive experience in IE, while providing an extra-beautiful and super-intuitive experience in the more up-to-date browsers. That’s a cross-browser goal that is definitely worth striving for.

Alternative content