Tag: CSS

W

Wrap text through CSS

Wrapping text through CSS is quite a necessary evil when your Analyst come up with jargons that stretches 15-20 charactors... 😉 So here's the deal. If you need to wrap text through CSS, you can use the CSS selector defined below: Wrap words through CSS /* In CSS */ .wrapword{  white-space: -moz-pre-wrap !important;  /* Mozilla, ...

L

Large CSS background moves on resize, in IE 8

This post is in continuation to the a solution given by webdesignerWall, regarding the use of large CSS backgrounds in your website. You can check the site below: http://www.webdesignerwall.com/tutorials/how-to-css-large-background/ The solution he states is that of using display:table; for body tag wherein you are specifying your large background. The solution works quite fine! But when ...

C

Concept of cascading in CSS

Most of us know that Cascaded Style Sheet abbreviates to CSS . But why is it called so? What is the cascading happening out in the stylesheet. Well the concept is pretty simple, but powerful. You might come across scenarios wherein, you want to override a css class of a third party add-in, but still ...

C

CSS shortcuts

Using shortcuts in css, makes your CSS look neat, clean and compressed. It should be always taken into account that, you cannot simply play around with shortcuts. Different browsers, behave differently to the shortcuts. Following are some of the simple and effective shortcuts that i use in my css: Using Zeros :You need not mention ...

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 ...

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 ...

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 ...

H

How to apply width to IE and not Firefox

Well the solution is simple. All you need is the knowledge of some keyword that IE recognises while setting the property value, while Mozilla ignores it. Few solutions: 1. Using Expressions: div#maincontainer{ width:300px; /* IE and mozilla will take the width as 300px */ width:expression('100%'); /* But now mozilla will ignore this statement, but IE ...

A

Avoid Resizing of textarea in Safari

Safari has its own amazing styles with it. Most of them are pretty cool and makes the browser stand out. But some of them can affect the screen structure. One of them would be the resizing of the multiline textboxes or textarea in Safari. But the solution is quite simple css fix. In the css ...