CSS Tips

In CSS tips I would like to discuss and post the solved issues in project works which I did and is really helpful for succeeding in solving issues.

Writing CSS in a systematic or thematic way

If we are working on a project first of all, have a good paper work or pencil art/graphical work as how we wanted the site.  Few good points for a smooth working with a project.

1. Plan what all are dynamic and what all will be static fields.
2. Concentrate to produce a good, flexible and rigid framework. 
3. Write all the globally required element CSS on top and then optionalCSS next, finally general page element CSS. 
4. Will be good if we maintain the CSS page wise, it will be easier to understand and implement even though; we work on the project later after few days or years it will be well framed in our mind. 
5. To make it much easier to understand or manipulate the web-page in later stage of project, one should name pre-letters of the page to the CSS and use shortcut which should maintain or remind the page elements without any confusion, hope it will save a lot of time to work on modification(s) in future.

IE6 and IE7  Hack

If we set padding for a box or an image and its showing properly and validated in w3c, but not showing properly in IE then we need to write IE fix code in the style sheet

for ex: 

.banner-img {width:976px; margin:0; padding:4px 0 0 10px;}

(Showing properly in Firefox and IE8 and other modern browsers)

then we have to write like this

To fix in IE6

* html .banner-img {width:976px; margin:0; padding:4px 0 0 10px;}

(This will solve the issue in IE6, in the padding we can set the values according to the browser, which will effect in only IE6 and will not disturb in Firefox and other

modern browsers)

To fix in IE7

* + HTML .banner-img {width:976px; margin:0; padding:4px 0 0 10px;}

(in the padding line we can change the values according to the IE7 browser which will effect in only IE7 and will not disturb in any other browsers) 

====================================================================

Most of the times we find the flash animated file will be floating on top of all i.e the top menu will be showing back or going back of flash menu (In a row top menu and after that immediately if we have a flash banner in the bottom). It will show fine in Firefox but where as in IE the menu will be pushed back. In this case we have to set the flash animating file parameter as "wmode=transparent;" the problem will be solved if we pass the parameter to the flash file.