Saturday, good mood is a weekend feature.

Little CSS Tips & Tricks (from a beginner to beginners)

November 24, 2011by Adelina Maximin DevelopmentNo Comments
CSS-tips&tricks

As a newbie in front-end development I’ve crossed some particular issues for whose solution I needed to research more. Every time I had the opportunity to learn new tricks in CSS I wrote them down so in the future they would be on my disposal.

Bellow you can find some of them along with a brief explanation.

1. CSS text-transform property

Avoid writing text with capitalized letters and use instead the text-transform property to do that. The default writing should be “Lorem ipsum” and the result would be: “LOREM IPSUM”.

text-transform: uppercase/lowercase/none/capitalize

2. Use block and inline elements correctly

There is a big difference between inline and block elements.  The characteristics of block elements include:

  • Always begin on a new line (they stack up underneath each other);
  • Height, line-height and top and bottom margins can be manipulated;
  • Width defaults to 100% of their containing element, unless a width is specified.

Examples of block elements include <div>, <p>, <h1>, <form>, <ul> and <li>.

Inline elements on the other hand have the opposite characteristics:

  • Begin on the same line (they stack up next to each other);
  • Height, line-height and top and bottom margins can’t be changed;
  • Width is as long as the text/image and can’t be manipulated.

Examples of inline elements include <span>, <a>, <label>, <input>, <img>, <strong> and <em>.

To change an element’s status you can use display: inline or display: block. This is not good practice, unless it is absolutely necessary. This means it’s recommended for you as (front-end) developer to use the block elements like “div” when you need a block element and not use a “span” element for example with “display: block” style. This is available also for the inline elements like “b” or “i”, they must be used as inline elements when possible.

3. Font property in one declaration

Instead having these four lines declaration block:

font-family: Arial;
font-size: 12px;
font-weight: bold;
line-height: 20px;

you can use this single line declaration:

font: bold 12px/20px Arial;

4. Center horizontally

If you need to center horizontally an inline element, you can use the property

text-align:center;

To center horizontally a block element you must set the width for it and also auto for the left and right margins:

margin: 0 auto;

Lets presume that you want to horizontally center your website. You can do that by setting the big container’s margins (left and right) to auto as shown above.

But, in IE7 this will not be enough. You still need to add to the <body> tag the property

text-align:center;

5. Negative margin & text outside of an block element

You may need to put some text or an image outside your div (for example). This is easily done by setting the margin to a negative value. But in IE the text/image will not be full displayed, the outside content will be cropped. To avoid this, you must use the property position: relative.

img {
  margin: -n px;
  position: relative;
}

6. Background does not extend under the border in IE7

Background does not extend under the borders in IE7 and IE6. You may need this when you used a semi-transparent border or a dotted (etc) border.
To extend the background, you must consider the following properties depending if the tag has the hasLayout property set to true or false (more info about hasLayout here):

  • Without hasLayout the background-position uses the border edge as reference, as with background-origin: border-box (so the background will extend)
  • With hasLayout the background is limited to the padding area, as with background-clip: padding-box (the background will not extend)

If you want to find out more, go to this website.

7. It’s not a good practice to put style on a <tr> tag

When you want to add custom style on a table, even if you could do this by setting properties of an <tr>, this is not a good practice because it can cause different problems e.g. in IE6/7 the style is not visible. The best practice is to add style on the <td> elements of the table.

8. Lists in IE7 are wrong displayed

When you want to horizontally display a list (ul, ol with li), to avoid bugs in IE7 (the <li>s are displayed as a scale) you need to add the following property:

li {
  display:inline;
}

9. How to put an icon-image in front of a text

In most of the cases when you are displaying e.g. a social-media link you may what to display in front of it the icon-image of the website. You could add an <img> tag with the source of the icon, but that’s not the best practice.
One of the best practices is to add the icon as background and forcing its position to left:

#social-media-link {
  padding-left: n px; /* (n should the at least the width of the icon to avoid overlapping) */
  background: url(path) left center no-repeat;
}

10. Disappearing text or images in IE

IE has a very strange bug where text or background images sometimes disappears from sight. These items are still actually there, and if you highlight everything on screen or hit refresh they’ll often re-appear, but not necessary.

To repair this all you have to do is to add the following property

position: relative;

to the element that causes problems.

11. Align text in a select box

Most of the time you will want to align the text from the select box in a special way. To do that you need to remove the height of the select (if it has one defined) and add padding instead.

Unfortunately, this is not working in all browser. In Safari and IE7 we cannot add padding on a select-box.

12. IE and width & height issues

IE has a rather strange way of doing things. It doesn’t understand the min-width and min-height properties, but instead interprets width and height as min-width and min-height.

If we only use the width and height properties on a box then non-IE browsers won’t allow the box to resize. If we only use the min-width and min-height properites though then we can’t control the width or height in IE.

This can be especially problematic when using background images. If you’re using a background image that’s 80px wide and 35px high, then you’ll want to make sure that the default size for a box using this image is exactly 80 x 35px. However, if users resize the text then the box size will need to expand gracefully.
To resolve this problem, you can use the following code for a box:

.box {
  width: 80px;
  height: 35px;
}

html > body .box{
  width: auto;
  height: auto;
  min-width: 80px;
  min-height: 35px;
}

All browsers will read through the first CSS rule but IE will ignore the second rule because it makes use of the child selector command. Non-IE browsers will read through the second one and will override the values from the first rule because this CSS rule is more specific, and CSS rules that are more specific always override those that are less specific.

13. Box-shadow at hover in IE

Creating a box-shadow on IE that appears only at hover it only works with JavaScript, not with PIE.

14. Fieldset and legend

The fieldset-legend tag is a legendary problem for web-designers. They don’t behave like normal block/inline elements so all the normal tricks to whip it into shape is useless. The <legend> tag has the ability to totally ignore whatever you want it to do. The biggest problem is that  <legend> simply wont accept a width value. It needs to get a little helper, there’s no way around it. The help comes from the <span> tag:

<fieldset>
  <legend><span>Legend link</span></legend>
  <label>Label</label>
  <input type="text" name="foo" value="" />
</fieldset>

15. Remove Dotted Link Borders

Dotted borders around links are an accessibility feature most browsers have by default. It’s for users who must or choose to navigate by keyboard, there is a visual style applied to those links when “tabbed” to. These borders also show up when the link is clicked (in it’s “active” state), and can be an eyesore depending on the design (especially when using something like CSS image replacement, the borders span the length of the screen). You can remove them with this:

a:focus, a:active {
  outline: none;
}

16. Reset your CSS

You need to reset CSS because as you’ve seen, browsers assign different styles to some elements and the best approach is to clear(reset) all styles from the beginning. In this way you’ll be sure you made a good start.

The best method I know is the Eric Mayer’s Css Reset method.

Tags:

Adelina Maxim

She loves Christmas so much that she doesn't enjoy winters without snow. Adelina is an avid sweets eater and she hates bitter taste and messy spaces.

Being a romantic girl, Adelina loves all colours and reading books that portray the action of the Victorian period.

Her own mistakes are the engine that motivates her and the routine makes her find creative ways of doing things. The team support and professional development makes her push the limits and raise the quality of her work.

What do you think?

*