Category: CSS

A

Applying multiple css selectors to the same element

There can be scenarios wherein, you have a selector defining the width style like (w05,w30,w500 etc) and there is another set of selector that gives a border style like (b01, b02 etc...). You want to apply a full 2px border to an element and give it a width of 500px. In this case you can ...

R

Relative positioning to control absolute positioned elements

Trust me! Initially I  had a big time, figuring out what's with this positioning of relative and absolute.  Before i move into the details of this article, let me take a quick tour through the positioning css offers us. CSS Position types: Absolute : To position the elements absolutely or perfectly, with respect to a ...

H

How to disable text selection in a table

When the user drags the mouse over the rows, the row text gets selected, looking a bit awkward. Check the image below: In order to prevent the user from doing these selections and to keep the rows integrity, we can use the following options: CSS Fix -  works with all browsers except IE Controlling KeyEvents ...

j

jQuery to check the row count of a table

To get the row count of the table, in jQuery, all you need to do is use any of the following approaches: $("#mytable tr").length $("#mytable tr").size() //But the size method calls the length property internally One thing to be noted here is that the indexing is 1-based and not 0-based. For ex.: <html> <head> <script ...

C

CSS Menu Stepdown Issue

Normally when floating objects you can count on them lining up vertically until they break. That is, you could if you weren’t using IE 6. IE 6 appends a line break effect after each floated block element which will cause “stepdown”. The fix here is to make sure the line-height in the parent element is ...

h

how to change the default text selection color in Browser

One of those cool CSS3 declarations that you can use today is ::selection, which overrides your browser-level or system-level text highlight color with a color of your choosing. The biggest hit is in the fact that only Safari and Firefox are supporting this, and both in slightly different ways. IE totally ignores them. Fortunately, this ...

W

WYSIWYM Editors – Time to bid adieu to WYSIWYG Editors

WYSIWYG (What You See Is What You Get) editors have been booming up in the market lately. Often people get confused,as to use which one. Quite frequently, they end up using expensive third party editors, with cool features and UI. Fair enough to fool your clients. One important thing that we miss out here is ...

S

Styling a file upload control or input type = “file”

FileUpload control has weird styles, especially when you view them across browsers. The normal look and feel of the control, would look like something below: The Safari one looks really worth a bug for the testers. This solution to style fileupload controls is a concise and verified version of the solution by Michael McGrady. Step ...

S

Setting screen width for Web sites to be viewed on iPhone

Fixing the width of the page in iPhone to a certain value is not direct. Safari is assuming an 800px width. The best solution to this is just by using the meta tags. Check the snippet below: To set the width to the screen width based on the mode he is in, be it landscape ...

F

FileUpload width property not working

This issue normally comes in Firefox. In IE, setting the css width will take care of the width of the file upload control. In Firefox, you need to use the size property to set the width of the fileupload, as Firefox rendering engine does not set the width on the width property of the control. ...