X
=
Tobto Logo

CrossBrowser Overflow(x)

Googling around to find crossbrowser overflow(x) decision brought to me a simple and elegant way to make nice page. I've checked it in IE6, IE7, FF2. It looks like overflow(x) really works. Big thanks to the author! Please, note this crossbrowser overflow(x) method is not valid, gives mistakes, in case if you are a CSS Purist.

Comments (0) 26-12-2007

CSS Optimization

In my everyday CSS coding practice I found a good way of CSS code optimization - in case you have a LOT of stylings in page.

I prepare a small pieces of code, which form big classes, as morphemes for high level CSS grammar.

My CSS grammar consist of elements, for example:

.tal {text-align:left}
.tac {text-align:center}
.tar {text-align:right}

.f10 {font-size:10px}
.f11 {font-size:11px}
.f12 {font-size:12px}

.cwhite {color:#fff}
.cred {color:red}
.cblack {color:#000}

.fb {font-weight:bold}

.pabs {position:absolute;}
.prel {position:relative;}

Using this approach you can easily create different combinations without using of big classes:

<p class="f10">text <span class="cwhite f12 fb">text text</span></p>

<p class="f12 cred">text <span class="cwhite f10 fb">text text</span></p>

Of course, there are another methods of CSS Optimization, but this one is good for page elements with a rich nuances.

Comments (2) 29-08-2007

IE7 CSS Filters

IE7 CSS Filters:

*+html

element [attribute] { property:rule; }

element { property /**/:rule; }

#test1 { color /**/:green; }

IE 7 and below
*:first-child+html {} * html {}

IE 7 only
*:first-child+html {}

IE 7 and modern browsers only
html>body {}

Modern browsers only (not IE 7)
html>/**/body {}

Comments (0) 27-06-2007

Modern Separators In Lists Menu

Some time ago using of pseudo-class as :first and :first-child was impossible due to browsers that didn't support CSS enough. Nowadays we have almost ideal browsers, which allows us to make really interesting CSS pirouettes.

For example, horizontal list menu with separators (pipes) in ancient CSS days was handcoded:

Item1 | Item2 | Item3 | Item4

Now we will use modern smart browsers. We will take a simple list without separators:

<ul>
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>

and add separators BY CSS itself with this style:

CSS

  1. li {
  2. display:inline;
    list-style-type:none;
    padding-left:1em;
    margin-left:1em;
    border-left:1px solid #ccc
  3. }
  1. li:first-child {
  2. border-left:none
  3. }

Now we have:

Thats all! The latest line deletes left border of first element in simple and elegant way. Here you are - so called piped list.

Well, there is more sophisticated way: li:after {content:" | "}, but you can try it yourself.

Here is an another interesting approach:

  1. #nav{
  2. overflow:hidden;
  3. width:100%;
  4. }
  5. #nav li{
  6. margin-left:-1px;/* all elements go on left*/
  7. }

Comments (12) 20-03-2007