Weird flickering effect with HTML/CSS

Just found out that when using in-page popups, using this CSS breaks the page so that it starts flickering/strobing constantly sometimes :D

html {overflow: auto;}

So word of advice: don't use it :) Or use it with some other parameter than "auto".

How to disable the mystical 1px or 2px padding in table / tbody elements in Sharepoint 2010

Ever wonder, why tables get mystically some 1-2px padding around them? And any Developer console(F12) or Firebug won't show you why?
Well here's why. I guess Sharepoint(or Webkit) mystically adds a 1px invisible border around tables. Here is how to disable it with CSS:

table { border-collapse: collapse!important;}

@font-face definition for multiple browsers and devices using FontSquirrel

1) Download fonts to your server from FontSquirrel
2) Add these CSS definitions, change the path and font filenames if needed:

/*-- Font Definitions, free Roboto font from FontSquirrel - works with all major browsers--*/
@font-face {
    font-family: 'robotoregular';
    src: url('fonts/Roboto-Regular-webfont.eot');
    src: url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotolight';
    src: url('fonts/Roboto-Light-webfont.eot');
    src: url('fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Light-webfont.woff') format('woff'),
         url('fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotothin';
    src: url('fonts/Roboto-Thin-webfont.eot');
    src: url('fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Thin-webfont.woff') format('woff'),
         url('fonts/Roboto-Thin-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;
}

3) Done! It was so easy!

Here I have used 3 different weights of the same Roboto font. You can manage with only one and use the font-weight property, but I heard it's sometimes uglier method. This method ensures the best quality.

Btw I compared the same Roboto font from Google fonts and FontSquirrel:
Google Roboto is ~125kB
FontSquirrel Roboto is ~25kB

Centered fixed width design in SharePoint 2010 with CSS - The best way

Most of the tutorials available on the 'net don't respect the ribbon and stuff it into a design that has a fixed width. This is the fastest way to get a fixed width design and needs only the following CSS code and is flexible to be changed to any desired width.

div.s4-title.s4-lp,
body #s4-mainarea,
#s4-topheader2,
#s4-statusbarcontainer {
width: 960px;
margin: auto;
padding: 0px;
float: none;
background-image: none;
background-color: white;
}

To get the fixed width design working with the v4.master some classes needs to be added.

<div id="s4-workspace">

Needs to be changed to:

<div id="s4-workspace" class="s4-nosetwidth">

And the second html element needs to be altered:

<div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle">

This needs to be changed to:

<div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle s4-nosetwidth">

By adding the s4-nosetwidth style class SharePoint won’t assign the inline style property for width and the design will stay centered.

The size of the design could be changed to any size just by simply modifying the width property. Remember always respect the size of the ribbon and let it live outside your design for easy editing.

Original post here

Simple Menu with HTML, CSS & jQuery

Here we have a simple menu and CSS Sprite styling example. HTML:

• Info
• Updates
• Media
• Downloads
• Forums

CSS: /* Custom Menu */ ul { list-style-type: none; } ul#nav li, ul#nav li a { background: url('../images/oldmenuexamplesprite.png') no-repeat left top; height: 31px; } /* We give the and the sprite as the background and set the button dimensions */ ul#nav li { float: left; border: 0px solid #243e3b; border-left: none; } ul#nav li a { display: block; text-indent: -9999px; } ul#nav li.info a { width: 93px; } /* Here we set the button widths. */ ul#nav li.updates a { width: 111px; } ul#nav li.media a { width: 83px; } ul#nav li.downloads a { width: 138px; } ul#nav li.forums a { width: 140px; } ul#nav li.info a { background-position: 0px 0px; } /* Here we set the background/sprite position */ ul#nav li.updates a { background-position: -93px 0px; } ul#nav li.media a { background-position: -204px 0px; } ul#nav li.downloads a { background-position: -287px 0px; } ul#nav li.forums a { background-position: -425px 0px; } ul#nav li.info a:hover { background-position: 0px -34px; } /* And now the hover background-position position */ ul#nav li.updates a:hover { background-position: -93px -34px; } ul#nav li.media a:hover { background-position: -204px -34px; } ul#nav li.downloads a:hover { background-position: -287px -34px; } ul#nav li.forums a:hover { background-position: -425px -34px; } jQuery: (function ($) { /* Needed for Drupal 7 */ $(document).ready(function(){ //Set the anchor link opacity to 0 and begin hover function $("ul#nav li a").css({"opacity" : 0}).hover(function(){ //Fade to an opacity of 1 at a speed of 200ms $(this).stop().animate({"opacity" : 1}, 200); //On mouse-off }, function(){ //Fade to an opacity of 0 at a speed of 100ms $(this).stop().animate({"opacity" : 0}, 100); }); //Add more jQuery functionality here... }); })(jQuery); /* Needed for Drupal 7 */

How to center an image with CSS

How to center an image with CSS: img.center { display: block; margin-left: auto; margin-right: auto; }