Warning: Creating default object from empty value in /home/expressionz/developer.expressionz.in/blogs/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156

Warning: Creating default object from empty value in /home/expressionz/developer.expressionz.in/blogs/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156

Warning: Creating default object from empty value in /home/expressionz/developer.expressionz.in/blogs/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156
CSS | Expressing IT

Archive for the ‘ CSS ’ Category

The question of CSS hack

Thursday, July 7th, 2011 By Nik

I had read this in some blog. Thought it was nice to catalog this for future ref. and also could be an important interview question that you would be asked some day.

Write a snippet of CSS that will display a paragraph in blue in older browsers, red in newer browsers, green in IE6 and black in IE7

#content p{color:blue} /* New Browsers */
html>body #content p {color:red} /* Older Browsers */
* html #content p{color:green} /* IE 6  only Hack */
html>body #content p {*color:black;} /* IE 7 only Hack*/

PS. Sorry! I haven’t tested it!!!


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


Re-Cycling CSS : A Look At CSS Frameworks

Thursday, May 20th, 2010 By Nikhil

Re-Cycling is Buzzword and In Web Development it means no different.  It conserves energy, in terms of effort!

Over years of writing CSS and creating HTML from designs,  I have followed a few best practices, in pursuit of saving time and energy in what we commonly term as “Re-Inventing the Wheel”.  Time and time again, I have told myself, that I must create a few templates , some standard re-usable CSS  that I would use  OUT OF THE BOX in my future work. Though not completely but  I did manage to achieve some of goals.

In furthering, Re-Use of CSS , I had a  look at the few CSS frameworks that are commonly available to us and  decided to put them to use,  as these are tried and tested  and created by much experienced developers , than myself . More importantly “AVOID RE-INVENTING”.

Though common knowledge  to veterans,  I have tried to pen some key concepts/best-practices/thoughts that has gone into creating these frameworks, to make RE-CYCLING of CSS possible. Hope this will help some CSS developers who are just about to and recently boarded the CSS bandwagon!

Keys Re-cycling of CSS :

Use Naming  Conventions

This has to be the most important factor in making the CSS/HTML re-usable. Giving consistent names to page elements enables re-use of page components and their styles with little or modifications. In line with this argument,  Even HTML5 , in a major change change over its predecessors ,  is to introduce some structural tags  viz.  <article>, <section>, <header>, <aside>, and <nav> [What will HTML5 bring?].  Even with HTML 4(or lower),  it is best to name standard sections of your page consistanly like in the simple example below…

Remember,  Most pages on your project , end up having the same core structural elements. Identify these common core page elements ….

<div id="container">
   <div id="header">...</div>
   <div id="nav">...</div>
   <div id="sidebar">...</div>
   <div id="footer">...</div>
  </div>

Reset Default Styles ( CSS Resets) : Whether you use a framework or write your own , you must provide CSS Resets  [What are CSS Resets?], as they reduce or sometimes  eliminate  visual inconsistencies that  occur between various browsers.  In simple words the CSS Reset Mechanism  sets the styles of HTML Element  to  zero or null values, thus overriding any  browser default values they may poses.  This provides a clean slate to set the   properties of  these elements void of any User-Agent Defaults [CSS2.1 User Agent Style Sheet Defaults]. All the CSS  frameworks do have of reset mechanism. If you are writing you own CSS Resets, a word of caution is that if you happen to forget to reset a key property,  It could lead to cross-browser issues, that are very difficult to debug. Remember,  Keep a copy of the reset styles and drop them into each new project you create.

 body, div, dl, dt, dd, ul, ol, li,
 h1, h2, h3, h4, h5, h6,
 pre, form, fieldset, input, select, textarea,
 p,blockquote, table, th, td
 {
   border:0px;
   margin:0;
   padding:0;
 }

Set Defaults (Baseline Styles) to Elements :

After you have set ( to zero or null)  the default Values of certain attributes  of certain HTML Elements, It is necessary to apply some styles across every instance of these elements. These default setting could vary as per the design or according the best practices you follow.

Most CSS frameworks, always introduces some new defaults,  in addition to resetting default browser styles.
These defaults being void of the User-Agent Defaults(  stripped away by the CSS Reset), these will be consistent across browsers .

Remember, Baseline styles are used to  set  styles that are going be used design-wide. eg .

html { font-size: 77%; font-family: Arial, sans-serif; }
strong, h1, h2, h3, h4, h5, h6 { font-weight: bold; }

Abstract Styles for Common HTML Components and Common Classes :

Most project consisting of several pages will have common HTML elements used across the site, for e.g.  Some sort of forms, alerts and errors ,  Custom Popups, LightBoxes etc.  Since such components are used over again across projects, It will be useful  to  provide a set of classes associated with predefined styles for these components  and  you can save yourself a lot of time.

Apart from defining reusable styles definitions for the common HTML Components , we could abstract styles classes  pertaining to typography, color or even  layout.  I myself tend you use … common classes like Clearfix, Font08, FontGrey, AlignL, DisplayB etc.

form input{ border:0px;   background:#ffffff; padding:0px 10px; _padding:0px 0px; height:26px; color:#000000; line-height:30px;  font-size:1.1em; }
form textarea{  border:0px;   background:#ffffff; color:#000000; font-size: .9em; line-height:1.5em; overflow:visible; }

.fbold{font-weight:bold; color:#cccccc;}
.fgrey{ color:#666666;}
.flightgrey{ color:#bbbbbb;}
.clearfix {clear:both;}
.divider{border-top:1px solid #647B06; border-bottom:1px solid #9CC00A; height:0px; }
.displayb{display:block;} .displayn{display:none;}
.alignr{text-align:right} .alignc{text-align:center}
.floatr{float:right; } .floatl{float:left;}

Fixes to common browser quirks

Various browsers implement CSS code and provide varying level of  support for the CSS specifications.  The result of this  …. “Browser Quirks”, that we developers are left to tackle.    Especially, IE6  haunts most CSS coders with a deadline to meet. The good news is experience has  brought  together  possible REUSABLE fixes to these issues  ( Often termed as CSS Hacks) .

Remember ,  Keep these hacks/fixes handy

  /* The following zoom:1 rule is specifically for IE6 + IE7.  */
   * html .clearfix,
   *:first-child+html .clearfix {
          zoom: 1;
     }

Keep Refining Your  CSS

  • The habit of re-cycling will not come to you in day. It has to developed. So plan your Re-Cycling . Bear this in mind that you could abstract defaults styles,  typography definitions, Layouts , HTML Element Styles etc.  Try to think ahead.
  • Also look back at your past projects, it will help identify styles that you tend  to use often across porjects. Abstract it.
  • Remove any unused styles.  This practice will keep your CSS framework from a common symptom called “Bloating” -
  • Remove repetitive styles .
  • Build a set of styles that are flexible enough to port it across projects.

A Look At CSS Frameworks

Finally.  If you are inspired and intend to use one or more of the CSS frameworks, Heres is quick list of a few popular ones ….

  • 960 Grid System : The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are three variants: 12, 16 and 24  columns, which can be used separately or in tandem.  Thought nothing that you cannot create one for your own easily enough,  The framework provides grid templates for print in PDF format, that one can use to sketch your page designs.Bet ,  It would make a professional impression , if you carry a few sheets  when you go to a client for UI requirements gathering. It also provides basic grid templates for popular design software like Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio,  etc. providing a “starter for ten”  to begin your design work.
  • Blueprint :  Blueprint provides distinctly classified CSS files for Resets, Grids, Forms, Print, Typography , Plugins for buttons, tabs and sprites etc. It also provides support for IE as a separate include.
  • SenCSs : Unlike  the above two, SenCSs ( pronounced Sense) , doesnt have CSS definitions for Layout. It does include  fonts, paddings, margins, tables, lists, headers, blockquotes, forms and more.
  • BlueTrip : Its original claim to fame was that , it was  a combination of the best features provided by other others frameworks like Blueprint, Tripoli … from where it gets its name.  Its feature set includes 24-column grid, typography styles , orm styles, print, buttons etc.
  • YUI Grids : Brought to you by the Yahooo Developer Network ,  supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number. As you can see , Its technically just the layout Components. YUI also provided  HTML/CSS  sets for other page elements
  • YAML (Yet Another Multicolumn Layout)
  • Emastic

Remember , using CSS frameworks  doesn’t imply that you are  lazy  to create one of your own … It implies that you are smart to learn from others experience & mistakes , SAVE TIME and INCREASE PRODUCTIVITY!!!!


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


@fontface : Expressing it with a font of your choice; Using WebFonts

Saturday, March 13th, 2010 By Nikhil

CSS completed 10 years existence this year! Those who have been around for a while , earning their bread (or not) using CSS, then you might aware how we have been starving for  a good selection of fonts.  Even with the lack of fonts designers like those at  CSS Zen Garden have made use of CSS background images to replace fonts  in the pursuit of doing some justice to their designs .  We have also tried Flash/JavaScript® hacks to achieve our design goals.  By no means this is  a wrong way to get the fonts we desire into our web designs, but definitely, it is not the most desirable way.  and over years web designer, like me ,  have fully relied  on ten or so  fonts for their designs.

Recent developments in web standards and font formats make it possible to render HTML text in typefaces other than the same old default fonts.   Comes in  the “@fontface” CSS decleration.

@fontface provids a solution to link  to the actual font file and retrieve it from the web.  Using @fontface , designers can use  fonts without having to freeze the text as background images.  The implementation is very straight forward, as shown below but  as all good things have a CON part to it , NOT ALL browsers support a single “font type “.  If you are planning to use @fontface in site with requiring cross browser support, then you will have to provide sources to various font-types of the same.

  1. TrueType – A format designed to look good on-screen. Recommended particularly for Windows browsers (Chrome).
  2. OpenType (CFF) – This format is better for print work and does not always look good on Windows.
  3. EOT – You need this format if you want to target Internet Explorer. IE will not use any other format. Our EOT’s would be considered “Lite,” since they are neither compressed nor domain-restricted.
  4. SVG – This is an XML format supported by some browsers including the iPhone.
  5. WOFF – This cross-browser, web-only font format is lightweight (font data is zip compressed) and can be compiled with either TrueType or PostScript (CFF) outlines. It is currently supported by FireFox 3.6+.

Using @fontface

@font-face {
font-family: 'CalligraphyFLFRegular';
src: url('CalligraphyFLF.eot');
src: local('CalligraphyFLF'), local('CalligraphyFLF'), url('CalligraphyFLF.woff') format('woff'), url('CalligraphyFLF.ttf')        format('truetype'), url('CalligraphyFLF.svg#CalligraphyFLF') format('svg');
}

@font-face {
  font-family: "Your typeface";
  src: url("fonts/font_filename.eot");
  src: local("Alternate name"), local("Alternatename"),
    url("fonts/font_filename.woff") format("woff"),
    url("fonts/font_filename.otf") format("opentype"),
    url("fonts/font_filename.svg#font_filename") format("svg");
  }
h2 { font-family: "Your typeface", Georgia, serif; }

As you can see from the above example, to include the chosen font typeface, one has to link to a set of fonttypes for the same typeface. Hence people refer to it as “Font Kit”.
There are Font Kits available that explicitly allows linking with the CSS @font-face property to it under End User License Agreement (EULA).

Useful WebFont Resources :

  • Fonts available for @font-face embedding wiki page at http://webfonts.info/wiki/index.php?title=Main_Page
  • Ray Larabie .  He is a renowned font designer who has made hundreds of interesting TrueType fonts freely available for use on the web. His fonts are elegant, decorative, and playful.
  • Dieter Steffmann is another great font designer. He, too, has made many beautiful fonts available for anyone to use.
  • Font shop : offers fonts designed specifically for web use.  More than 30 of the most successful FontFont families are now available as Web FontFonts.   FontShop  also has  a detailed WebFont user guide  http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  • Font Squirrel :  Showcases all the fonts that Font Squirrel offers for use with @font-face CSS embedding. Font Squirrel offers an impressive quantity of type, makes it dead simple to pick one out, and handily offers “kits” – the typeface of your choice, in several formats, packaged with demo HTML & CSS that uses very current @font-face syntax. They also offer a way to make your own @font-face kits.  If the typeface you want to use has been licensed appropriately (the ones that come with your computer are not necessarily okay), the generator produces EOT, SVG, and hey! WOFF files.

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


CSS ZOOM – Yet Another IE quirk; The 3 pixel shift

Saturday, November 7th, 2009 By Nikhil

Time and over again, When all the other browsers seen to behave as told by the w3c rules , IE spirals you out of the development spirit by throwing a tantrum,  that doesn’t seem to have a fix . Just such a one is this issue in IE7.

Problem Statement:
I  and  so might many of the other  serious web developers have  noticed more than many a times , that when there nested floats in the layout, on hover over some links ( anchor tags) , the containing container seems to shift a few pixels to the right.   I have tried to google solutions for this issue , but have  hardly found any reasonable answer to why and when it occurs ( that might help to prevent this issue from happening)  , hence  I  have never found a clear solution to the problem either…

Possible Solution :
Out of experience , I have notice 90% percent of the times  i.e. ,  that this issue is fixed by adding a zoom property in the CSS definition of the mis-behaving container …


#somediv {
      zoom: 1 ;
}

again the reasons are ambiguous … try this …
Some elements in IE have a “hasLayout” property , which is “true” by default. Many visual CSS behaviors ; for example, an alpha filter only works on an element that hasLayout. and the {Zoom:1} seems to give the target elements the hasLayout property…. USeful? I dont think so…

The zoom property is also seems to supported by Chrome , but  its use  dint seem to make much adverse effect on my layout… try it, If it works for you … if it doesn’t,  bookmark this page under “CSS craps”


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


CSS2.1 User Agent Style Sheet Defaults

Tuesday, July 28th, 2009 By Nikhil

Yesterday,  after the issue I encountered with the CSS Resets in Google Chrome… I thought of digging a bit deeper into the area of  User Agent Style Sheets …
Found this table on default values of CSS2.1 User Agent Style Sheets … ( for those unaware of what “User Agent Style Sheets” is follow What is User Agent Style Sheets (Specification) .

For a full list of CSS 2.1 User Agent Style Sheets defaults click here


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


User Agent Style Sheets : Mystery Margins in Google Chrome

Monday, July 27th, 2009 By Nikhil

Yesterday,  like every other “Ground Hog  Day” ,  I was working on some CSS/tableless  layouts. All was going well in IE 7, FF 3 and Chrome, untill suddenly,   I saw some un-ignorable margins seen only in Google Chrome.   Though very strange and worring, It  was some new bug/issue that I had come accross, there was  finally some spice in my mundane work . Sad (but nice) it got fixed within a few minutes of the probe…

Basically ,  It looked like  Google Chrome ignored my CSS Resets  ( margin:0px).  It actually was  caused by the user agent stylesheet (-webkit-padding-start:40px).  So the solution was to reset this style by setting padding:0 the misbehaving elements .
A  good way to prevent this problem from happening to any element is use a global CSS Rest as follows

*{ margin:0; padding:0; }

What is User Agent Style Sheets (Specification) ?
The following  excerpt is taken  from http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , follow link to read more on User Agent Style Sheets

CSS 1 introduces the idea by stating that each User Agent (UA, often a ‘web browser’ or ‘web client’) will have a default style sheet that presents documents in a reasonable – but arguably mundane – manner. CSS 2 says that conforming user agents must apply a default style sheet (or behave as if they did) and that a user agent’s default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language; CSS 3 is likely to be of the same mind.

Since the CSS specifications leave it up to implementations whether to use a “real” style sheet for default display or not, it’s not astonishing that you don’t find a default style sheet in every browser’s installation folder. Unlike Microsoft’s Internet Explorer as well as Opera, for example (and as far as I know), Gecko browsers like Firefox and Netscape Navigator (look for “html.css”) but also Konqueror make it rather simple to comprehend their default styling.


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


Adding DropShadow To Images Using CSS

Wednesday, February 18th, 2009 By Nikhil

Another quick tut. Here is something simple and nice using the POWER of CSS… but was difficult concieve( and it surely wasn’t me) to begin with . Adding Dropshadow, might be a peice of cake for many of us, using some image editing tools like Photoshop anf Fireworks etc.
The reason why , I opted for drop shadow using CSS is that , usually while creating a page design/html of an application , the requirements keep iterating. What I mean is , In a existing web site with many images, like the ones displaying freinds list or an image gallery, it will be difficult to reprocess the entire load of images that had been already unloaded to add or remove the shadows, for that matter.
So If you have done a little forward thinking while creating the HTMLS to add these extra divisions or usually the situation is that you have a Loop Logic generating these icons/thumbnails in XSL, PHP. JAVA or any other programming /scripting language, you can add it anytime, then is just the matter of show and hiding these shadows using the CSS Display property,as per the clients ever changing requirements … I havn’t done this sort of forward thinking before this … but ahev started now!

In the example below, the original image is shadow free and the dropshadows are applied as required! ALSO, I have gone a little extra, by using the tricks of my earlier Tut ( Well! these probably are shortest variety of Tutorials , so it is only justified calling them “Tut”‘s ) about Using CSS Clip Property for show off only

Original Image

 original_image 

CSS DropShadow Results
css_dropshadow_results
View Demo  | Download sourcefiles


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


Understandng The CSS Clip Property

Tuesday, February 17th, 2009 By Nikhil

Why do I want to understand this??? … Humm!!!!

Most of CSS writers would agree that CSS Clip property is probably one of most un-used CSS properties. It was so true for me too and was most happy to neglect it , until I started modifying the MOOTOOLS TWO Knob (Pin) Slider Component(with Range Indicator).

There was a good suggestion from one of the component users to modify the Slider Component using clipped backgroud images( against a variable width division) to indicate the slider range. Thus came my time to enter the fun but un-chartered (for me ofcourse) waters of the CSS Clip property.

Well! how difficult it can be? Not much at all …YES and NO. The syntax to use the CSS Clip property is pretty upright but the meaning/usuage is a bit croocked. With a memory like mine, everytime I sit to rework on my Slider Script… I have tokeep referring back to usage of this CLIP property , to remind myself the logic that I have created in my script …. HENCE! thought to pen it down, with a hope to remember it the future ( and also for the benefit of those who seem boggled by the CSS Clip Property)

What does CSS Clip do?

Clip is part of the visual effects module of CSS 2.1 . Simply put, its job is to place a visible window on top of an object that is being clipped , hence clipping images and creating thumbnails without having to create additional files( I have already put this feature to better use in the Slider Component :) )

Using the CSS Clip property, you can create a clipping using the rect shape. Like many other CSS Properties (like margin, padding etc),using rect requires four coordinates Top, Right, Bottom, Left (TRBL). The croocked nature of this property reflects when you take a closer look at how clip calculates the clipping region , using these four coordinates (sends brain into a toss for a while). Now to confuse you the bottom starts from the top, and the right starts from the left. :). You see what i said? …. Hence this post …

This little confusion can easily disappear , with this visual explanation of the CSS Clip/rect property as below!!!!

CSS Clip Requirements

The task we have started is to clip the following Thumbnail image into a squarer looking image (and also a wide-angle image)

original_image  clip_demo
Original Thumbnal/Image Clip Requirements for Sqaure Thumbmail

 

CSS Clip Results

clip_results

View Demo  |  Download sourcefiles


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


Vertically (and horizontally) Center Aligning Content in a DIV using CSS

Sunday, October 12th, 2008 By Nikhil

Before we had to deal with CSS to create our page layouts, aligning some content inside a table cell seemed just child’s play. Simply set the “align” or “valign” property of the table to have the alignment of your choice, piece of cake!
With CSS layouts, though we have “vertical-align” property for the elements, it doesn’t seem to be as simple as the “align” or “valign” properties. To be more specifiic the “vertical-align” never seems to solve any of your problems, especially if are write a piece of cross-browser CSS.

Without the use of HTML Tables, THE PROBLEM of centering on object, be it an image or some text within a containing division, has probably been every UI/CSS developers nightmare at some point. This problem further extrapolates your worries of aligning, if the object to be centered is dynamic in nature, i.e. when its height is variable(unknown height).

Though there is no known straight forward solution that would work across the range of browsers we have to deal with, the solution that I have tried to arrive at does seem to work in the few browsers that I have tried it in ( IE6, IE 7, FF).

SOLUTION:
In browsers like Mozilla, Opera and Safari, The strange behaving “vertical-align” property can be brought to its senses, simply by setting the “display” property of the containing division to “table-cell” (display: table-cell).

The problem still remains with IE family of browsers, who, yet do not seem to understand what to with the “table-cell” property and ignorant as they are, they just ignore it. The solution given below, though simple, ads a few more DOM elements to your HTML to make things happen.

The CSS and HTML looks like this
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class=”outer_container” >
<div class=”obj_container” >
<div class=”obj”> <img src=”image1.jpg”/><br/> views :3456 </div>
</div>
</div>

The result looks like this:-

HTML_CSS_vertical_align_vertical_middle_aligned_images

view the demo here | Download Source Files (Downloaded 697 times)


Understanding the solution:
For the browsers that understand display: table and display:table-cell properties, it seldom needs any explanation. For IE, with the use an IE specific hack (hash hack), we absolutely position the object container (obj_container) in half of the available height. Then object(obj) within is position relatively and is moved up by half of its height … Well! I seem to understand the look the on your face, but It works. Try it!
The above techniques are combined to give us the above cross browser solution.


The CSS can be easily modified as below to achieve, vertical-align:top or vertical-align:bottom

TOP Align CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class=”outer_container” >
<div class=”obj_container_top” >
<div class=”obj_top” > <img src=”image1.jpg”/><br/> views :1234 </div>
</div>
</div>

The result looks like this:-

HTML_CSS_vertical_align_vertical_top_aligned_images

BOTTOM Align CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}

HTML: -
<div class=”outer_container” >
<div class=”obj_container_bottom” >
<div class=”obj_bottom” > <img src=”image1.jpg”/><br/>views :1234 </div>
</div>
</div>

The result looks like this:-

HTML_CSS_vertical_align_vertical_bottom_aligned_images

view the demo here | Download here


Horizontal centering of the object simply achieved with the margin property , by setting the margin-left and the margin-right to auto

Seems like ages, since I was trying to find a reasonable solution to this alignment problem. But now with this solution, I feel at little peace.

With a hope that someday

  • vertical-alignment property in CSS will work like it does inside a table cell, WITHOUT having to beat much around the bush
  • At least, setting margin –top:auto and margin-bottom:auto, will give as the same result as with margin-left and the margin-right set to auto
  • The Browser wars will be over some day.
  • There will just ONE Browser for ALL.

Download the CSS and HTML of the above solution here (Downloaded 697 times) ..for understandability, the CSS is not been optimized

PS: And by the way, those are thumbnails of some pictures I have clicked… :)


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


NOT For IE Only – CSS Child Selectors don’t work in IE

Friday, October 10th, 2008 By Nikhil

CSS for Non-IE Browsers : Its no news to CSS developers that , CSS Child Selectors like the example below, doesnt seem to work in IE. 

e.g. div > span { some css } , that means “when a span element is a child ( and NOT  a grandchild or great grand child etc.) of a division element” .

But we used this CON to our advantage. Historically, the child selector has been used to hide CSS commands from IE. Simply by placing html>body in front of any CSS command IE will ignore it:

html>body .foo {CSS commands go here;}

This works because <body> is always a child of <html> – it can of course never be a grandchild or great-grandchild of <html>.

Now that IE7 understands the child selector, you have to insert an empty comment tag in directly after the greater than sign. IE7 will then not understand this selector (who knows why!?) and will therefore totally ignore this CSS command:

html>/**/body .foo {CSS commands go here;}

If haven’t already seen these before, have a read through the following as well


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter