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, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 white-space: pre-wrap;       /* css-3 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* In HTML */
<td class=”wrapword”> … </td>

Hope this helps!

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 it comes to IE 8 – unfortunately, you end up in a mess.

I have a small work around for this issue. It works totally cool in almost all the browsers.

Solution:

All you need to do is load the same image twice – one for the body, and the other for a header div container. Difference being the body will be showing the full width of 100% but the header container will show only say 1000px, of center of the image.

Have a look at the CSS to get an idea:

body {
background:url(Images/bg.png) no-repeat center top;
background-color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
width:100%;
}
#ms-container
{
background:url(Images/bg.png) no-repeat center top;
margin:0 auto;
position:relative;
width:1000px;
}

Trick here is – during resizing to higher resolution, the background keeps showing, while the center section remains steady, you get a continuous image- actually overlapping, one with 1000px centered to your screen, while the other being the big image, 100% to the body, in its full glory.

And when you resize to smaller resolution, the 1000px guy comes into play, while the body background image keeps on moving in the behind (who cares 😉 all you see is the div container, which is stationary)

Worked successfully in almost all the browsers. But do verify it.

One note:Ensure that you play with paddings, borders, positioning and any css property that can shift the div container position by a pixel or two. You dont wanna show the end user that you are loading two images. Also, site performance wud be affected a bit. Can’t help it.

Hope this solves the problem!

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 not able to apply your styles. Well the reason is nothing but the concept of cascading coming into play. Let me get into a bit theoretical  here.

Stylesheets are divided into three types:

  1. Author StyleSheet – Stylesheet created by the author of the webpage
  2. User StyleSheet – StyleSheet are set by the user of the Web page. These allow the user to have more control over how the pages display.
  3. User Agent StyleSheet – StyleSheet defined by your browser.

The order of precedence is Author with the highest priority, User and then User Agent StyleSheet. Again, the exception would be the !important rule, wherein the StyleSheet  with selector carrying properties with !important will be given precedence over any other.

You might wonder, then a scenario can come with conflicts in using this property. Yes, such scenarios arise. In that case, the order of precedence is given to the Author Stylesheet, followed by User and then the User Agent one.

Cascade Conflict Resolution:

To resolve conflicts, Web browsers use the following sorting order to determine which style has precedence and will be used:

  • First, look for all declarations that apply to the element in question, and for the assigned mediatype.
  • Then look at what style sheet it’s coming from. As above, author style sheets come first, then user, then user agent. With !important user styles having higher precedence than author !important styles.
  • The more specific a selector is, the more precedence it will get.

For example, a style on “div.co p” will have a higher precedence than one just on the “p” tag.

  • Finally, sort the rules by the order they were defined. Rules that are defined later in the document tree have higher precedence than those defined earlier. And rules from an imported style sheet are considered before rules directly in the style sheet.

Hope this article was useful.

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 any units with zero’s, be it pt, px, em or any other measurement types.

Normal Method – #spcborder{ border:1px 0px 0px 2px;}

Shortcut Method – #spcborder{ border:1px 0 0 2px;}

Value Shortening : This is normally done with hex color codes.

Normal Method – h1{ color:#333333; border-color:#335577;}

Shortcut Method – h1{ color:#333;border-color:#357;}

One line coding : I would recommend this approach for selectors with atmost 3 properties and non lengthy.

Normal Method

h1{

color:#333333;

border-color:#335577;

font-size : 12px;

}

Shortcut Method – h1{ color:#333;border-color:#357; font-size : 12px;}

Property Grouping : This can be used mostly when you use the grouped properties in css, like border, background,margin, padding etc.

Normal method – div.main{padding-top:2px; padding-right:3px; padding-bottom:2px; padding-left:3px;}

Shortcut method – div.main{padding:2px 3px 2px 3px;}

Further compressing – div.main {padding:2px 3px;}

Another scenario

Normal method – div.main{padding-top:2px; padding-right:3px; padding-bottom:2px; padding-left:3px;}

Shortcut method – div.main{padding:2px 3px 2px 3px;}

Further compressing – div.main {padding:2px 3px;}

The trick here is to use:

  • TOP RIGHT BOTTOMLEFT approach on any such grouped properties, if there are 4 values grouped.
  • TOP & BOTTOMRIGHT & LEFT approach on any such grouped properties, if there are 2 values grouped.
  • In case of 3 valued groups, keep in mind the cyclic order of  TOP RIGHT BOTTOMLEFT . The one missing would take the value of the respective pair, in the grouping.

padding:2px 3px 5px; would imply a padding:2px 3px 5px 3px; The last value (left) is implicit and equals to the value of right.

These shortcuts work easily independent of any browser. It would be good if you use these css shortcuts in your stylesheet.

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 parent whose position can be anything other than static.

This would imply that you need some good parent who is positioned relatively or fixed or with inherited positioning. Top, right , bottom, left properties control the positioning here.

Relative : To position an element with respect to itself. Top, right , bottom, left properties control the positioning here, but they are with respect to the normal positioning of the element.

This would imply, you relatively position an element with itself. Kind of shifting the element, from its current position.

Fixed : To position an element absolutely, with respect to the browser window.

This would imply, you can position an element, with respect to your browser window. A simple scenario would be an always visible popup at the bottom right corner of your browser window.

Static : It is the default positioning property. This guy ignores any top, right, bottom, left property values.

Inherit : This guy blindly inherits the property of its own parent.

So now, let me come to the point here.

In most of the scenarios you might want to use an absolute positioned element inside a relative positioned element. Take a look at the scenario below:

Here the parent is relatively positioned. Look at the children. They are forced inside the parent, unless you give a negative value and forcefully move it out. But still, it will be under the control of the parent.

Lets see what would happen, in case you forget the relative positioning of the parent:

It might not look a big deal out here. But trust me, it can be catastrophic in various other scenarios. Here what happened was that, the children elements, skipped the parents boundary and decides to position with respect to the body of the page. So if the browser window grows, that one in the bottom left is going to stick with the browser window, not hang back inside like his well behaved brother from the first image.

Well once you get your head fixed to this concept (rim-shot), you will be able to find the application of this everywhere. Let me give you some good head start.

Examples:

A “close” button you always want positioned in the upper right of a box (to replicate an operating system window).
A “home” button placed in the upper left of the window so that your users never feel too lost
A reminder on a sign up form to remind users that if they are already members to sign in above.
“Back to top” links to be placed in the lower right of each big block of text.

Another example would be an always visible popup, like the one below:

Go ahead and explore to the widest of your imaginations. Hope you enjoyed this article.

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 (onselectstart and ondragstart)- works with IE

Check the sample code below to see the implementation of both the approaches:

<html>
<head>
<style type=”text/css”>
.selecting {
-moz-user-select: -moz-none;
-webkit-user-select: none;
user-select: none;

}
</style>
</head>
<body>
<table id=”x” onselectstart=”return false” ondragstart=”return false”>
<tr><td>1</td><td>Indy</td></tr>
<tr><td>1</td><td>Amy</td></tr>
<tr><td>1</td><td>John</td></tr>
<tr><td>1</td><td>Luke</td></tr>
<tr><td>1</td><td>Steve</td></tr>
</table>
</body>
</html>

Well now the user mouse drags won’t work and the page will look neat.

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 set to zero (0), or that the elements being floated are inline elements.

If you are familiar with the concepts of “floats”, you know that if you float a page element to the left, that the next page element will move up next to that element on the right, if possible. But have you ever seen your floated elements “stepdown”?

This is a fairly common problem you can run into when creating a horizontal menu. Like most menus, you create an unordered list:

<ul id=”menu“>
<li><a href=”#”>My</a></li>
<li><a href=”#”>Little</a></li>
<li><a href=”#”>Menu</a></li>
</ul>

You want the menu items to be large clickable blocks, so you write CSS like this:

ul#menu li a {
display: block;
width: 130px;
text-align: center;
font-weight: bold;
float: left;
color: white;
font-size: 1.2em;
text-decoration: none;
background: #600;
}

Those blocks are floated the left, so they should all line up in a row, right? Nope, that’s gonna get you some stepdown action. The problem is the list elements wrapping the anchor elements. These are also block-level elements but they are not floated. This confuses things, because block elements naturally have a break after them (like an invisible <br />). That pushes the next one down whatever the current line-height is, which is what causes the stepdown.

Here is the remedy:

ul#menu li {
display: inline; /* Prevents “stepdown” */
}

So the possible solutions for this problem are:

  • Setting those list elements as inline will take away those breaks and make sure your menu stays nice, happy, and straight!
  • Also, the problem is disappear if make line-height:0 to li elements
  • Another option would be to float the li elements instead of the links. This will also give you a little more control over the positioning/spacing of each li.

NB: This post is  simplified version of the post from http://css-tricks.com/prevent-menu-stepdown/?. Please refer the original site for more information.