STARIKOVS

Archive for the ‘css’ Category

In this article you can find an example of how to set the cellspacing and cellpadding values with help of CSS styles.

First let’s declare a table with cellspacing and cellpadding attributes and see how it looks:

<table cellpadding="3" cellspacing="3" border="1">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

In your browser this table has the following presentation:

Now, let’s override the values of cellspacing and cellpadding attributes with help of CSS style:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

If we apply these styles to our table the cellspacing and cellpadding values of the table will be changed:

These styles work in all the mordern browsers. If you want these attributes get working in IE 6 and IE 7 you still should use HTML attributes. By the way, cellpadding and cellspacing HTML attributes ARE NOT deprecated so you can fearlessly use them.

What if cellspacing is zero?

If you need to set cellspacing to zero with help of CSS you should use these styles:

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

So, applying these styles to the table above we will get:

These styles work OK in IE6+.

Browsers

I’ve just tested this example in different browsers:

Need help on CSS properties? Check these links

border-collapse

border-spacing

padding

Sometimes, I need to make unselectable the content of a html page for some time while some operations are performed, for example, drag and drop. Unfortunally, not all the browsers support the styles to make the content unselectable. For these browsers, you might create a layer (DIV) to disable selecting. This layer should be positioned absolutely and should have the viewport size. The other way to implement the unselectable behaviour is to create special event handlers with help of javascript. For example, in Internet Explorer, you can use javascript to set a handler for an event onselectstart to cancel the action.

element.onselectstart = function() { return false; }

CSS styles:

.unselectable {
    -webkit-user-select: none; /* Safari, Chrome */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    user-select: none; /* CSS3 */
}

Hope in the nearest future, we will use only CSS3 property for this need

Example of use:

#("#testdiv").bind("mousedown", function (event) {
    $(document.body).addClass("unselectable");
    ...                                 
});
#(document.body).bind("mousemove", function (event) {
    /* some code */
});
#("#testdiv").bind("mouseup", function (event) {
    $(document.body).removeClass("unselectable");
    ...                                 
});

Hi everybody! Today I will share some workaround depending with margin-top bug in IE 7. I’ve just created a container DIV that has two child elements. The first child element has an absolute position and the second one has a relative position. Also, the second child element has top margin but this margin is ignored by IE7. The top margin for the relative positioned element is ignored because the previous sibling is an element with an absolute position.

<div id="container">
  <div id="absolute-element"></div>
  <div id="relative-element">some content</div>
</div>

#container {
  position: relative; 
  width: 500px; 
  margin: 0;
}
 
#absolute-element {
  position: absolute; 
  width: 100%; 
  height:100px; 
  margin: 0; 
  left: 0; 
  top: 50px;
}
 
#relative-element {
  position: relative; 
  width: 100%; 
  margin-top: 100px; /* THIS MARGIN IS IGNORED! */
}

Workaround

My css hack is in adding a auxiliary DIV that clears floats etc. It helps!

<div id="container">
  <div id="absolute-element"></div>
  <div id="help"></div>
  <div id="relative-element">some content</div>
</div>

#help {
  margin: 0; 
  border: 0; 
  padding: 0; 
  clear: both; 
  float: none; 
  font-size: 1px;
}

As you know, when you make an editable node by setting an appropriate attribute, WebKit selects an editable area using outline. This outline is a border that surrounds the editable content. The editable area is selected only when you set focus on it, in other words, when contentEditable attribute has been set to true. To change styles of this outline we have to use CSS rules. There are limited amount of styles that can be changed for the outline of the editable area. They are:

• Color (the same as border color)
• Width (the same as border width)
• Style (the same as border style)

Ok, let’s test!

Read the rest of this entry »

In this article, I am going to test CSS 3 rounded corners. I do want to know can I use them in practice in different browsers. Here are some examples of CSS3 rounded corners and if you can see some rounded corners – congratulations your browser supports them!

Read the rest of this entry »

It’s a real headache to center a fluid block element horizontally with help of CSS. Some time ago I figured out how to center CodeCharge Studio’s CSS Menu because it doesn’t provide this functionality. In general, any block element without the fixed width can be centered with help of this method.

By the way, if You have a fixed width block then You have to set its left and right margins to auto and You get the block centered.

In this article I’m going to explain the method I use to center a fluid block element. Here is the Demo.

Read the rest of this entry »

Recently, i had a problem with YUI AutoComplete layout. I wanted it being inline, fixed width and working with different browsers like IE6/7/8, Opera, FF etc. There were some problems that i solved primarily in CSS. More precisely, i needed an inline YUI AutoComplete layout in such a way that i can place autocomplete next to the without a line break. I just set my styles in CSS and override some existing styles and it works ok!

So, problems i had to solve for my needs:

• an outer container is a DIV so INPUT always goes on the next line
• inline-block for DIV doesn’t work in IE6/7
• an outer container has width of 100%
• INPUT is absolutely positioned so an outer DIV is collapsed
• width of 100% makes INPUT 6px larger then outer DIV in IE6
• using inline-block, INPUT aligns vertically on the bottom in IE6

Read the rest of this entry »