Some nice CSS3 snippets for every day work …

rounded corners:  border-radius

-moz-border-radius: 5px;
border-radius: 5px;

prefix is only necessary for mozilla!

reference:

border-radius
-moz-border-radius
border-top-left-radius
-moz-border-radius-topleft
border-top-right-radius
-moz-border-radius-topright
border-bottom-right-radius
-moz-border-radius-bottomright
border-bottom-left-radius
-moz-border-radius-bottomleft

more border-radius

linear gradients

/* Firefox 3.6 */
-moz-linear-gradient(top, #ddd, #fff);
/* Safari & Chrome */
-webkit-gradient(linear,left bottom,left top,color-stop(0, #fff),color-stop(1, #ddd));
/* IE6 & IE7 */
filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ddd',
endColorstr='#fff');
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ddd',
endColorstr='#fff')";

more gradients 1
more gradients 2
more gradients 3 (generator)

box-shadow:

/*Schlagschatten*/
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;

/*inner shadow */
-moz-box-shadow: inset 0 0 5px #888;
-webkit-box-shadow: inset 0 0 5px#888;
box-shadow: inner 0 0 5px #888;

more box-shadow

text-shadow:

text-shadow: 2px 2px 2px #000;

and for our best friend -> internet explorer some nice workarounds

Related posts:

1. CSS border-bottom for IE 6
2. mixed TypoScript Snippets Vol. 2
3. How to … style the dotted link border in Firefox

One more snippet …

I hab trouble with transparency backgrounds and the different Browser interpretation, ahhrgh. But finally i found a cool summary.

take this:

div .test {
   background: rgb(255, 255, 255); /* fallback for all old guys */
   background: rgba(2255, 255, 255, 0.5);
}

Internet Explorer need a special treatment, via conditional comment

<!--[if lt IE 9]>
div .test {background:#fff; filter:alpha(opacity=50);}
<![endif]-->

Thats all. Enjoy it.

Related posts:

1. jQuery badBrowser Update Version 1.4
2. CSS: center background image in Firefox & Co.
3. CSS border-bottom for IE 6

To center a background image vertical and horizontal especially Mozilla Firefox need the attribute “fixed”:

body {
background-image: url(....);
background-position: center center;
background-attachment: fixed;
height: 100%;
}

Tested with: IE 6 – 8, Firefox 3.6, Safari 4

With this little trick, my day will be fine! Ole.

Related posts:

1. How to … center a YAML Layout
2. How to … style the dotted link border in Firefox
3. How to add german Amazon.de OpenSearch Plugin to Firefox 3.5 on Ubuntu 9.1

I had the problem, that the 2nd div-container (which is a fold-out CSS-menu) is larger than the sorrounding div. In IE 7 the CSS-menu lays, in the part outside the sorrounding container, behind those elements. But for a menu you aspect to be the first element in the hierarchy.

Those layer positions can be set using z-index in CSS. The higher the index, the higher the position of the element to users-view. So I set the z-index to a high value but in IE 7 nothing happened.

After trying a while I worked out a very easy solution. If you use for an element the position-absolute attribute it will be set out of the normal element-flow of the website and be positioned absolute to the given position. But IE 7 inherits the value from the parent-element (here the sorrounding div-container) which had no z-index.

So my solution is to give both, the surrounding and the inner div-container a z-index. The surrounding container gets (in my case) a higher z-index than the surrounding one and the problem is fixed!

The surrounding element is the YAML #topnav-element and the inner one is a div-container with list-items which are styled as a JS-free fully CSS-menu.

#topnav {
  overflow:visible;
  z-index:5;
  position:absolute;
  [...]
}

#inner_container {
  position:absolute;
  z-index:2;
  [...]
}

Related posts:

1. overflow:auto – Internet Explorer 6 Bug
2. How to code a jQuery slider menu
3. How to … center a YAML Layout

I show you a nice jQuery snippet for a smoothy slider menu.

This was my first jQuery experience – if you find some tuning options, tell me please!

Here you can see my script in Action: http://www.gyn-endoskopie.de/

/**
 * @author team noir GbR
 * simple slide-out Menu
 * www.gyn-endoskopie.de
 * Version 1.5 - 11.01.2010
 */
$(document).ready(function() {
 //on first loading, hide the submenu
 $(".subul li").hide();
 //show active sub element, after paging
 $(".active").parent().parent(".subul").css('margin-top', -4).children("li").show(".subul li");

 //Actionhandling
 //click on menu
 $(".slide").click(function(){

 //only one submenu is allowed to show
 $(".angeklickt li").slideUp("fast");
 $(".angeklickt").removeClass("angeklickt");
 //close other open submenus
 $(".active").parent().parent(".subul").children("li").slideUp(".subul li");

 //mark heading ul
 $(this).next("ul").addClass('angeklickt');

 //show marked submenu
 if ($(".angeklickt li").is(":hidden")) {
 $(".angeklickt li").slideDown("slow");
 $("ul.angeklickt").css('margin-top', -4);
 return false;
 }
 //close/slide submenu
 else {
 $(".angeklickt li").slideUp("slow");
 $("ul.angeklickt").css('margin-top', 0);
 $(this).next("ul").removeClass("angeklickt");
 return false;
 }
 });

});

this is the menu source code:

<div>
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Zur Person</a></li>
<li><a href="#l">Operationen</a>
 <ul class="subul>
   <li><a href="#" title="Operationsspektrum">Operationsspektrum</a></li>
   <li><a href="#" title="OP-Aufklärung">OP-Aufklärung</a></li>
   <li><a href="#" title="OP-Patienteninfos">OP-Patienteninfos</a></li>
   <li><a href="#" title="Anmeldung">Anmeldung</a></li>
 <li><a href="#" title="Novasure/Goldnetz">Novasure/Goldnetz</a></li>
 </ul>
</li>
<li><a href="#" title="Tagesklinik">Tagesklinik</a></li>
<li><a href="#">Kontakt</a>
 <ul class="subul>
   <li><a href="#" title="Schreiben Sie uns">Schreiben Sie uns</a></li>
   <li><a href="#" title="Anfahrt mit dem Auto">Anfahrt mit dem Auto</a></li>
   <li><a href="#" title="Wegbeschreibung">Wegbeschreibung</a></li>
 </ul>
</li>
</ul>
</div>

System information:

• TYPO3 4 CMS
• YAML 3.1
• CSS 2/3
• XHTML 1.0
• http://www.gyn-endoskopie.de/

greetz!

Related posts:

1. How to … integrate a YAML Menu to TYPO3
2. How to use position-absolute and z-index with Internet Explorer 7 and nested containers
3. How to build a YAML fullscreen layout

Yaml provides a nice solution for column layout, center layout and fullscreen layout.

The last team-noir project was a fullscreen-design for our customer. I show you how easy it is to code such a template:

Dirk Jesse wrote a very good documentation:

Variations of the Markup

As demonstrated, the two CSS classes  .page_margins and .page control the basic appearance of the layout, by setting the total width as well as margins, borders, or backgrounds if necessary.

In the source code described above, the outermost DIV container .page_margins surrounds all the other elements of the webpage. This results in a layout which in its simplest form is a rectangular box against the background of the <body> element. This effect is not always desirable.

So the main ascpect is to order your source by:

<div id="header / col1 / ...">
    <div class="page_margins">
      <div class="page">
         ...
      </div>
    </div>
</div> 

modify the basemod.css:

/* (en) Centering layout in old IE-versions */
 body { text-align:center; }
 .page_margins { text-align:left; margin:0 auto; }

 /* (en) Layout:width, background, borders */
 .page_margins { width: 100%; background: transparent; }

Example on Yaml.de, and here

So as you can see – really easy coding -> thank’s to Dirk Jesse!

Related posts:

1. How to … center a YAML Layout
2. Using YAML and be fully variable
3. CSS: center background image in Firefox & Co.

But sometimes, maybe when you are at work, it is not that easy. Sometimes you need a little work around or a special CSS only for IE 6. Today it was one of those days. At work I made a site were articles are shown in a list, only one little overview-snippet for each article. Now I want, to made it more clearly arranged a solid line between each div-container. Thought and done in CSS, it worked fine – in Firefox. But not for Internet Explorer 6.

But after a little internet search I found a very easy to use solution: you have to put a margin-bottom also in your CSS-class and than IE 6 let the line appear.

This is my class.

.my_class {
   padding: 10px;
   border-bottom: 1px solid #999;
   margin-bottom: 1px; /* needed to show the border also in IE 6 */
   min-height: 190px;
}

Related posts:

1. css3 snippets for every day: border-radius, gradient, shadow, …
2. Floating problems with IE 6
3. CSS floating problems

The solution of this problem, just set the floating boxes with inline-attribute, works also for this right-floating problem. Just set for the CSS-id the following:

display: inline;

See the pictures below. The left one is with bug, the right one without. Hope this helps some others.

Related posts:

1. CSS floating problems

Today a short but usefull snippet.
On our website i discoverd a ugly, dotted corner on active and focus links in our menu (see picture)

With one little line css code, the problem is solved!

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

You can check our site – nothing to see

… greetz, ole!

Related posts:

1. CSS border-bottom for IE 6
2. CSS: center background image in Firefox & Co.
3. CSS floating problems

.element_a {float: left;}
.element_b {float: right;}
.element_c {clear: both;}

Today I had this problem. I was using within a YAML Layout (middle column) some elements, two were floated like shown above. Now I do a css clear for the hr-tag (horizontal dashed line) to stop floating. What I got was the stopped floating, but also a big gap above the line (see first picture below). I was now trying with Firebug and other tools to eliminate this gap for one or two hours and it doesn´t work.
I just wanted to put a negative margin-top to slide the element above. But this doesn´t work at all!

Then I had an idea: I tried out, if this problem also occur when I set a other element (instead of the hr-line) after the floated elements and clear this one. So I put an empty div-container after the floated elements, but I get the same problem.
I remembered the idea with the negative margin and test a little bit around with Firebug and then I see the solution. I can´t minimize the gap itself above the line. But I can set a negative margin for the bottom of the empty div-container, which will pull the elements a few pixels nearer to the top.

I tried it out and it worked! So if you have a similar problem you don´t have to clear the hr-element. Set just a div-element after the floated container and clear this one. Then set a negativ margin-bottm to close the gap above! Now I´m happy and can let the day end … in freedom.

PS:
Sorry that there will be no example available. I can´t put the HTML and CSS code here. But I can show you a little picture to illustrate the problem.

Problem with clearing

Solution of the clearing problem

Related posts:

1. Floating problems with IE 6
2. How to use position-absolute and z-index with Internet Explorer 7 and nested containers