It is a challenge among many CSS designers to get the CSS page works same as they expected in all and every browsers. Different browsers render some of the CSS tags in different ways and some are omitted completely. No one will forget the IE 6 as a big headache and a bug full browser ever. It’s behavior torches all CSS designers. Thanks Microsoft they upgraded themselves with IE7.

Centering a layer is not that much harder part. It is simple but it is the start of most web page. So it is worth knowing the right syntex that works with almost all browsers today. Following is a sample style that works in all browsers.

CSS Style

1
2
3
4
5
6
7
8
9
10
11
12

 
body {
    margin: 0px;
    padding: 0px;
    text-align:center;
}
 
#outerWrapper {
    width:900px;
    margin:0 auto;
    border:1px #999 solid;
}

The Body

1

<div id="outerWrapper"></div>

Cool ! It is working fine. By the way, I have a absolute positioned layer. Will this work with this idea. No problem buddy. There is nother technique using the negative margin.

1
2
3
4
5
6

#outerWrapper{
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

Check wheather is this work for you. Probably it should.

I am happy to share the Javascript Scroller which I created for one of my project. Javascript Scroller has been built up with combination of CSS and Javascript.

Scroller Preview 1

Scroller Preview 2

Examples :

1. Sample 1
2. Sample 2

Download Link

Link 1 – Link 2

Browser compatibility

Editing the width and height of Scroller

It is just simple to edit the size or any other style of Smooth Scroller.

CSS to change

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#encFilmMain
{
   width:160px; /* full width */
}
#encFilm
{
   height:300px; /* height */
   background-color:#999;
   padding:5px 5px 5px 5px;
}
#encFilmInner
{
   background-color:#efefef;
   padding:5px 5px 5px 5px;
   height:290px;  /* height */
   overflow:hidden;
}

Javascript to change

1
2

var scrollAmount=240;  // scroll amount
var barHeight=290;  //height

If you like or you have any doubts, please do not forget to leave your comment.