I think many people often ask themselves with the question “What to Watch”. There are many movies and some of them you already watched and some not, so to choose movie that you want to watch can be really hard and take much time.

I was one of this people, and i’m sick of this, so i created service that helps you to choose right movie faster then you can imagine. Checked it on myself and must say it can really save much time.

So check it now:  What to Watch?

Я думаю, многие люди часто задают себе вопрос ”Что посмотреть вечером”. Есть много фильмов и некоторые из них вы уже видели, а некоторые нет, так что выбрать фильм  может быть достаточно трудно и займет немало времени.

Я был одним из этих людей, и я устал от того что порой тратил пару часов на выбор фильма, так что я создал сервис, который поможет выбрать фильм быстрее, чем вы можете себе представить. Проверено на себе и должен сказать, это действительно экономит много время и нервы.

What to Watch?

допустим есть запись:

#body ul li {
    display:-moz-inline-stack;  /*Needed Firefox*/
    display:inline-block;       /*Don't used in IE and Firefox*/
    _overflow:hidden;           /*Fix for IE6*/
    zoom:1;                     /*Turn on hasLayout*/
    *display:inline;            /*With hasLayout true display:inline behave like display:inline-block*/
}
 
#menu ul li {
    display:-moz-inline-stack;  /*Needed Firefox*/
    display:inline-block;       /*Don't used in IE and Firefox*/
    _overflow:hidden;           /*Fix for IE6*/
    zoom:1;                     /*Turn on hasLayout*/
    *display:inline;            /*With hasLayout true display:inline behave like display:inline-block*/
}

Как видим код дублируется и это крайне непритно и не функционально. А так хочется иметь что то типа:

@display_inline {
    display:-moz-inline-stack;  /*Needed Firefox*/
    display:inline-block;       /*Don't used in IE and Firefox*/
    _overflow:hidden;           /*Fix for IE6*/
    zoom:1;                     /*Turn on hasLayout*/
    *display:inline;            /*With hasLayout true display:inline behave like display:inline-block*/
}
 
#body ul li {
     @inherit(display_inline)
}
 
#menu ul li {
     @inherit(display_inline)
}

Довольно удобно. По крайней мере искать стили нужных блоков стало куда легче.

Вот приблезительно как это выглядит:

/* Layouts (Placed within template order and incapsulation)
****************************************************************/
body {
height:100%;
line-height: 1;
color:#383838;
text-align:left;
background: url(img/bg.png) repeat;
}
	#container {
	background: url(img/bgTop2.png) repeat-x;
	height:100%;
	}
		#page {
		height:100%;
		margin: 0 auto;
		width:970px;
		}
			#head {
			height:140px;
			margin: 0 9px;
			background: transparent url(img/endoscope.jpg) no-repeat top left;
			}
				#top-menu {
				height:55px;
				text-align:right;
				padding-right:25px;
				}
				/*top-menu content**********************************/
						#top-menu a {
						text-decoration:none;
						font-family:Verdana, Arial;
						font-size:12px;
						color:#fff;
						overflow:hidden;
						cursor:pointer;
						display:block;
						}
						#top-menu div{
						width:116px;
						height:22px;
						background: transparent url(img/topBut.png) no-repeat 0px -25px;
						text-align:center;
						padding-top:7px;
						margin-right:5px;
						float:right;
						cursor:default;
						}
						#top-menu div:hover, #top-menu div.active {
						width:116px;
						height:22px;
						background: transparent url(img/topButActive.png) no-repeat 0px 0px;
						text-align:center;
						padding-top:32px;
						margin-right:5px;
						float:right;
						cursor:default;
						}
				/***********************************/
				#logo {
				margin-top:40px;
				width:600px;
				float:left;
				height:26px;
				overflow:hidden;
				}
				/*logo content**********************************/
						#logo a {
						text-decoration:none;
						}
						#logo img {
						border:0px;
						}
						#logo h1 {
						text-indent:-9999px;
						}
				/***********************************/
				#searchTop {
				margin-top:40px;
				margin-right:6px;
				float:right;
				width:300px;
				}
				/*searchTop content**********************************/
						#searchTop .field {
						float:left;
						background: url(img/searchField.jpg) no-repeat;
						}
						#searchTop input.hiddenField{
						background-color: transparent;
						border: solid 0px #FFF;
						padding:3px 5px 0 5px;
						height:23px;
						width:210px;
						color:#fff;
						}
						#searchTop input.hiddenField:focus{
						border: solid 0px #FFF;
						}
						#searchTop .button {
						float:right;
						}
				/***********************************/
			#shadow {
			background: transparent url(img/sh.png) repeat-y top left;
			height:100%;
			}
				#body {
				margin: 0 9px;
				background: #fff;
				padding:6px;
				float:left;
				height:100%;
				}
					#topBar  {
					width:940px;
					height:29px;
					background: transparent url(img/topBar.png) no-repeat top left;
					}
						/*topBar content**********************************/
								#topBarActions {
								float:right;
								color:#fff;
								margin: 10px 15px 0px 0px;
								font-size:10px;
								font-family:Verdana, Arial;
								}
								#topBarActions a{
								color:#ffffff;
								text-decoration:none;
								}
								#topBarActions a:hover{
								color:#ffffff;
								border-bottom:#fff 1px solid;
								}
								#topBarLocation {
								float:left;
								color:#fff;
								margin: 8px 0px 0px 35px;
								font-size:12px;
								font-family:Verdana, Arial;
								cursor:default;
								}
						/***********************************/
					#wrap {
					width:100%;
					height:100%;
					/*float:left;*/
					}
					#menuLeft {
					margin-top: 6px;
					width:246px;
					clear:none;
					float:left;
					height:100%;
					}
					#content {
					margin: 6px 0px 0px 6px;
					clear:none;
					float:left;
					width:688px;
					height:100%;
					background:#ccc;
					}
					#articleBg {
					background:transparent url(img/articleBodyBg.png) repeat-y;
					height:100%;
					}
						#articleTop{
						background:transparent url(img/articleTopBg.png) no-repeat;
						height:100%;
						}
							#articleTop #article{
							font-family:Times New Roman;
							font-size:16px;
							padding:30px 40px 30px 50px;
							text-align:justify;
							line-height:18px;
							/*height:600px;
							display:list-item;*/
							width:588px;
							height:100%;
							}

					#articleOnlyTop {
					background:transparent url(img/articleOnlyTopBg.png) no-repeat;
					height:100%;
					width:940px;
					}
						#articleOnlyTop #article{
						font-family:Times New Roman;
						font-size:16px;
						padding:30px 50px 30px 50px;
						text-align:justify;
						line-height:18px;
						width:840px;
						height:100%;
						}

Так как нам нужна красивая кнопочка, то одним слоем картинки никак не обойтись. Нужно как минимум 4 слоя. Три для картинок и один для текста.
Суть всего этого такова:
1-й слой – это повторяющийся бекграунд.
2-й слой – это прозрачная картинка которая привязывается к верхушке кнопки.
3-й слой – это прозрачная картинка которая привязывается к низу кнопки.
4-й слой – это собственно текст кнопки.
Проблемы:

Проблема первая
Все как всегда упирается в IE. Так уж вышло что псевдокласс :hover (который кстати присутствует с CSS 1.0) работает только на элементе <a> и на другие не распространяется. По этому, что бы оживить кнопку при наведении мышки мы оборачиваем ее в елемент <a>.

Когда наша кнопочка не выбрана она имеет класс “none” иначе “active”.

Проблема вторая
И снова IE. В отличии от Firefox и Chrome, в IE padding не увеличивает размер div’a.  По этому в CSS добавил reference-хак который для Firefox и Chrome сжимает длинну кнопки на 30px, которые мы добавили используя padding, а для IE оставляет все как есть.

Посути все очень просто) Главное не забывать, что где-то там во тьме всегда существует злой IE, который так и наровит выкинуть что-то эдакое.

P.S. Не забываем подгружать картинки для кнопочек до их инициализации.

Код кнопочки:

Пример работы