html и css, артефакты при изменении масштаба - Public forum of MSU united student networks

code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=7" />
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>Template site</title>
	<link rel="stylesheet" type="text/css" href="css/html.css" media="all" />
	<link rel="stylesheet" type="text/css" href="css/main.css" media="all" />
	<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
	<!--[if IE]>
		<link rel="stylesheet" type="text/css" href="css/fix-ie.css" media="all" />
	<![endif]-->
	<!--[if lte IE 6]>
		<link rel="stylesheet" type="text/css" href="css/fix-ie6.css" media="all" />
		<script type="text/javascript" src="js/ie6-fix.js"></script>
	<![endif]-->
</head>
<body>
	<div id="measurer"></div>
	<div id="outer">
		<div id="page">
			<div id="content">
				<div id="user_info" class="frame c8">
					<div class="content">
						<b class="person">
							<img class="picsfoto" src="i/user_pic.png" alt="Александр&nbsp;Константинопольский"/>
							<span>Александр&nbsp;Константинопольский</span>
						</b>
						<ul class="user-navigation no-list">
							<li><a href="#">Мои идеи</a></li>
							<li><a href="#">Моя статистика</a></li>
							<li class="exit"><a href="#">Выход</a></li>
						</ul>
					</div>
					<ins class="cn tl"></ins>
					<ins class="cn tr"></ins>
					<ins class="cn bl"></ins>
					<ins class="cn br"></ins>
				</div>
				<div id="breadcrumbs">
					<a href="#">Idea manager</a>&nbsp;/
					<span>Статистика</span>
				</div>
				<div id="header">
					<div class="logo">
						<a href="#"><img src="i/logo.png" width="109" height="63" /></a>
					</div>
					<ul class="main-navigation no-list">
						<li class="home">
							<a href="#"><ins class="icon"><ins></ins></ins>Главная</a>
						</li>
						<li class="discussions">
							<a href="#"><ins class="icon"><ins></ins></ins>Темы</a>
						</li>
						<li class="statistics selected">
							<b><ins class="icon"><ins></ins></ins>Статистика</b>
						</li>
						<li class="help">
							<a href="#"><ins class="icon"><ins></ins></ins>Помощь</a>
						</li>
					</ul>
					<div class="clear"></div>
				</div>
				<div id="extra_content">
					<h1>Статистика</h1>
					<p>Пятница, 5 февраля; новых идей нет</p>
				</div>
				<div class="clear"></div>
				<div id="main_column">
					<div id="main_content">
						
						
						
						<div class="width50">
							<div class="wrapper">
								<h2>Лучшие пользователи</h2>
								<div class="person-list">
									<div class="person">
										<span class="position">отдел создания</span>
										<p>Кирилл Хромовой</p>
										<div class="rating top-level" style="width: 100%"><span>135</span></div>
									</div>
									<div class="person">
										<span class="position">отдел создания</span>
										<p>Александр Протопопов</p>
										<div class="rating second-level" style="width: 75%"><span>98</span></div>
									</div>
									<div class="person">
										<span class="position">отдел информации и поддержки</span>
										<p>Николай Анкрончифаев</p>
										<div class="rating second-level" style="width: 68%"><span>79</span></div>
									</div>
									<div class="person">
										<span class="position">отдел отделов</span>
										<p>Гоша Куценко</p>
										<div class="rating third-level" style="width: 60%"><span>66</span></div>
									</div>
									<div class="person">
										<span class="position">отдел "Что где когда"</span>
										<p>Максим Поташев</p>
										<div class="rating third-level" style="width: 57%"><span>60</span></div>
									</div>
									<div class="person">
										<span class="position">отдел создания</span>
										<p>Иван Лошадев</p>
										<div class="rating fourth-level" style="width: 24%"><span>26</span></div>
									</div>
									<div class="person">
										<span class="position">отдел внутренних дел</span>
										<p>Лейтенант Пронин</p>
										<div class="rating fourth-level" style="width: 18%"><span>18</span></div>
									</div>
									<div class="person">
										<span class="position">отдел накопительства</span>
										<p>Скрудж Макдак</p>
										<div class="rating fifth-level" style="width: 13%"><span>12</span></div>
									</div>
								</div>
							</div>
						</div>
						
						
						<div class="user-info-content width50 width50_fix">
							<div class="wrapper">
								
								
								<h2>Лучшие идеи</h2>
								<div class="person-list">
									
									<div class="discussion-item">
										<span class="date">12&nbsp;декабря&nbsp;в&nbsp;теме&nbsp;&laquo;<a href="#">Средиземноморский климат</a>&raquo;</span>
										<a href="#">Рабочая группа: плюсы и&nbsp;минусы коллектива</a>										
										<div class="rating top-level" style="width: 100%"><span>135</span></div>
									</div>
									<div class="discussion-item">
										<span class="date">10&nbsp;декабря&nbsp;в&nbsp;теме&nbsp;&laquo;<a href="#">Ещеваывфа</a>&raquo;</span>
										<a href="#">Рабочие встречи по&nbsp;выходным</a>										
										<div class="rating second-level" style="width: 75%"><span>98</span></div>
									</div>
									<div class="discussion-item">
										<span class="date">28&nbsp;ноября&nbsp;в&nbsp;теме&nbsp;&laquo;<a href="#">Ввапукуыпукуке</a>&raquo;</span>
										<a href="#">Эффективная и&nbsp;продуктивная работа</a>										
										<div class="rating second-level" style="width: 68%"><span>79</span></div>
									</div>
									<div class="discussion-item">
										<span class="date">3&nbsp;марта&nbsp;в&nbsp;теме&nbsp;&laquo;<a href="#">Тема про</a>&raquo;</span>
										<a href="#">Внедрение преимуществ вселенского разума в&nbsp;разработку интерфейсов программы жизнедеятельности</a>										
										<div class="rating third-level" style="width: 60%"><span>66</span></div>
									</div>
									
								</div>																
							</div>
						</div>
						
						

						
						
						
					</div>
				</div>
				
				
				<div id="side_column2short">
					<div class="wrapper">
					<h2>Cамые популярные темы</h2>
								<div class="person-list">
									
									
									<div class="discussion-item">
										<span class="date">12&nbsp;декабря&nbsp;&mdash; 5&nbsp;марта</span>										
										<a href="#">Рабочая группа: плюсы и&nbsp;минусы коллектива</a>
										<div class="rating top-level" style="width: 100%"><span>135</span></div>
									</div>
									<div class="discussion-item">
										<span class="date">10&nbsp;декабря&nbsp;&mdash; 1&nbsp;февраля</span>										
										<a href="#">Рабочие встречи по&nbsp;выходным</a>
										<div class="rating second-level" style="width: 75%"><span>98</span></div>
									</div>
									<div class="discussion-item">
										<span class="date">28&nbsp;ноября&nbsp;&mdash; 12&nbsp;декабря</span>										
										<a href="#">Эффективная и&nbsp;продуктивная работа</a>
										<div class="rating third-level" style="width: 57%"><span>60</span></div>
									</div>
									<div class="discussion-item">
										<span class="date">3&nbsp;марта&nbsp;&mdash; 9&nbsp;мая</span>										
										<a href="#">Внедрение преимуществ вселенского разума в&nbsp;разработку интерфейсов программы жизнедеятельности</a>
										<div class="rating fourth-level" style="width: 18%"><span>18</span></div>
									</div>
										
								</div>
					
					</div>
				</div>		
				
				
				<div class="clear"></div>
			</div>
		</div>
	</div>
	<div id="footer">
		<div class="copyright">&copy;&nbsp;2009&nbsp;<a href="#">Collective Intelligence Systems</a></div>
		<div class="search">
			<input type="search" placeholder="поиск" value="" size="20" name="text" id="searchField" class="emptySearch">
		</div>
	</div>
</body>
</html>

code: body {
	background: #ffffff;
	color: #000;
	font-family: Trebuchet MS, Helvetica, sans-serif;
	font-size: 94%;
}

#measurer {
    position: absolute;
    top: -1em;
    left: 0;
    visibility: hidden;
    width: 100%;
    height: 1em;
    line-height: 1em;
}

#outer,
#footer {
	margin: 0 auto;
	min-width: 950px;
	max-width: 1600px;
	text-align: left;
}

#outer {
    min-height: 100%;
    position: relative;
    overflow-x: hidden;
}

#content {
	position: relative;
	margin: 0 2%;
	padding-bottom: 5em;
}

#content2 {
	position: relative;
	margin: 0 2%;
	padding-bottom: 5em;	
}

#footer {
    position: relative;
    height: 5em;
    margin-top: -5em;
}

.navigation li:before {
	content: '';
	float: none;
	margin-left: 0;
}

ul.navigation > li > *:first-child:-moz-first-node,
.navigation ul > li > *:first-child:-moz-first-node {
	margin-top: 0;
}

a:link,
.pseudo {
	color: #0055CC;
}

.pseudo {
	border-bottom: 1px dashed;
	cursor: pointer;
	text-decoration: none;
}

a:visited {
	color: #f9d710;
}

a:hover,
.pseudo:hover {
	color: #cc0000 !important;
	border-color: #cc0000 !important;
}

p {
	margin-bottom: 0.85em;
}

.clear {
	clear: both;
	font-size: 0;
	line-height: 0;
}

.black {
	color: #000000 !important;
}

h1 {
	font-weight: bold;
	font-size: 2em;
	color: #ffd302;
	margin-bottom: 0.4em;
}

h2 {
	font-weight: bold;
	font-size: 1.46em;
	color: #ffd302;
	margin-bottom: 0.4em;
}

h3 {
	font-weight: bold;
	font-size: 1.125em;
	color: #ffd302;
	margin-bottom: 0.4em;
}

h4 {	
	font-size: 1em;
	color: #000000;
	margin-bottom: 0em;
}

.with-placeholder {
	color: #969696;
}

.date,
.description {
	display: block;
	font-size: 0.725em;
	color: #969696;
	margin-bottom: 0.2em;
}

.date a,
.description a {
	color: #969696;
}

#main_column {
	position: relative;
	float: left;
	width: 60%;
	margin: 0 -100% 5em 0;
}

.width50 {
	position: relative;
	float: left;
	width: 50%;
	margin-right: -100%;
}

.width50_fix {
	left: 50%;
}

.width50 .wrapper {
	padding-right: 1em;
}

/*
 * Side column
 */

#side_column {
	position: relative;
	float: none;
	width: 40%;
	left: 60%;
	clear:none;
}

#side_column2 {
	position: relative;
	float: none;
	width: 40%;
	left: 63%;
	clear:none;
}

#side_column2short {
	position: relative;
	float: left;
	width: 35%;
	left: 63%;
	clear:none;
}

#side_column .content {
	padding-left: 3.5em;
}

#main_content.discussion-list {
	padding-left: 3.5em;
}

.helpers {
	font-size: 0.875em;
}

/*
 * polls
 */

#polls {
	align : left;
}

/*
 * Discussion list
 */

.discussion-list {

}

.discussion-list .all a {
	color: #000000;
}

.discussion-item {
	position: relative;
	margin: 0 0 1.3em 0;
}

.discussion-item .number {
	position: absolute;
	left: -40px;
	top: 0.8em;
	width: 33px;
	height: 33px;
	text-align: center;
	line-height: 33px;
}

.discussion-item .number .icon ins {
	left: -132px;
}

.discussion-info {
	color: #969696;
	font-size: 0.725em;
	margin: 0.8em 0 0 0;
}

.discussion-info a {
	color: #969696;
}

.discussion-where {
	margin-right: 0.5em;
}

.right-numbers .number {
	left: auto;
	right: -40px;
}

/*
 * Icons
 */

.icon {
	position: absolute;
	left: 0;
	top: 0;
	width: 33px;
	height: 33px;
	overflow: hidden;
}

.icon ins {
	position: absolute;
	top: 0;
	left: 0;
	width: 165px;
	height: 66px;
	background: transparent url(../i/icons.png) left top no-repeat;
}

.picsfoto {
	display: block;
	position: absolute;
	left: -20px;
	top: -70px;
	width: 40px;
	height: 40px;
}

/*
 * Breadcrumbs
 */

#breadcrumbs {
	position: absolute;
	top: 0.5em;
	font-size: 0.875em;
	z-index: 20;
}

#breadcrumbs a {
	color: #000000;
}

/*
 * Header
 */

#header {
	position: relative;
	margin: 0 0 1em 0;
	padding: 2.5em 0 0 0;
}

.logo {
	float: left;
	margin: 0 2em 0 0;
}

.main-navigation {
	position: relative;
	top: 0.7em;
}

.main-navigation li {
	position: relative;
	display: inline-block;
	margin: 0 0.8em 0 0;
	padding: 0 0 0 37px;
}

.main-navigation li b,
.main-navigation li a {
	color: #000000;
}

.main-navigation li.selected b {
	color: #ffd302;
}

.main-navigation li .icon {
	top: -5px;
}

.main-navigation li.selected .icon ins {
	top: -33px;
}

.main-navigation li.discussions .icon ins {
	left: -33px;
}

.main-navigation li.statistics .icon ins {
	left: -66px;
}

.main-navigation li.help .icon ins {
	left: -99px;
}

/*
 * News list block
 */

.news-block {

}

.news-item {
	margin: 0 0 1em 0;
}

/*
 * Person in text
 */

.person {
	position: relative;
	padding: 0 0 0 10px;	
	
}

.person2 {
	position: relative;
	padding: 0 0 0 10px;	
	font-size: 0.725em;
	color: #ffd302;
}

.person .icon {
	width: 7px;
	height: 9px;
	top: 50%;
	margin-top: -4px;
}

.person .icon ins {
	left: -132px;
	top: -33px;
}

/*
 * Person List
 */

.person-list {

}

.person-list .person {
	padding: 0;
	margin-bottom: 1em;
}

.person p {
	margin: 0;	
}

.person .position {
	font-size: 0.725em;
	color: #969696;
}

.person .rating {
	display: block;
	height: 1.2em;
	margin: 0.1em 0;
	text-align: right;
	color: #000000;
}

.person .rating span {
	padding: 0 0.3em 0 0;
}

.top-level {
	background-color: #ff5000;
}

.second-level {
	background-color: #ff7333;
}

.third-level {
	background-color: #ff9666;
}

.fourth-level {
	background-color: #ffb999;
}

.fifth-level {
	background-color: #ffcbb3;
}

/*
 * Pages
 */

.pages-num {
	position: absolute;
	left: 10%;
	bottom: -10%;
	font-size: 0.9em;	
}

/*
 * Corners
 */

.frame {
	position: relative;
}

.cn {
	position: absolute;
	width: 16px;
	height: 16px;
	font-size: 0;
	line-height: 0;
}

.c8 .cn {
	left: -8px;
	background-image: url(../i/crn_8.png);
}

.c8 .cn.tl,
.c8 .cn.tr {
	top: -8px;
}

.c8 .cn.tl {
	clip: rect(8px auto auto 8px);
}

.c8 .cn.tr {
	margin-left: 100%;
	clip: rect(8px 8px auto auto);
}

.c8 .cn.bl,
.c8 .cn.br {
	bottom: -8px;
}

.c8 .cn.bl {
	clip: rect(auto auto 8px 8px);
}

.c8 .cn.br {
	margin-left: 100%;
	clip: rect(auto 8px 8px auto);
}


/*
 * User info
 */

#user_info {
	position: absolute;
	top: 2.5em;
	left: 60%;
	width: 21em;
	color: #000000;
	background: #fff200 url(../i/yellow_bg.png) left bottom repeat-x;
	margin-left: 2.5em;
	z-index: 1;
}

#user_info a {
	color: #000000;
}

#user_info b,
#user_info a.selected {
	color: #ffffff;
}

#user_info .content {
	padding: 1em;
}

#user_info .person {
	position: relative;
	padding: 0 0 0 50px;
}

#user_info .person img {
	position: absolute;
	top: 0;
	left: 0;
}

#user_info .user-navigation {
	margin: 0.5em 0 0 50px;
	font-size: 0.875em;
}

#user_info .user-navigation li {
	display: inline;
	margin-right: 0.8em;
}

#user_info .exit a {
	color: #969696;
}

.user-info-content h1 {
	color: #000000
}

/*
 * Extra content
 */

#extra_content {
	width: 60%;
	margin-bottom: 1em;
}

.homepage #extra_content {
	margin-bottom: 2em;
}

/*
 * Discussion content
 */


/*
 * Sort block
 */

.sort-block {
	font-size: 0.875em;
	margin: 1em 0 1em 0;
}

.sort-block .pseudo {
	color: #000000;
	border-color: #000000;
}

.sort-block .active {
	color: #FFD302;
	border-color: #FFD302;
}

/*
 * Marks
 */

.marks {
	position: relative;
	overflow: hidden;
	margin: 5px 0;
}

.marks .plus {
	display: block;
	float: left;
	position: relative;
	width: 17px;
	height: 17px;
	margin-right: 2px;
}

.marks .plus .icon {
	width: 17px;
	height: 17px;
}

.marks .plus .icon ins {
	left: -139px;
	top: -33px;
}

/*
 * New idea
 */

.new-idea input {
	padding: 0 0.5em;
}

/*
 * Footer
 */

#footer {
	border-top: 1px solid #FFD302;
}

#footer a {
	color: #000000;
}

#footer .copyright {
	position: relative;
	margin: 1.5em 0 0 2%;
}

#footer .search {
	position: absolute;
	right: 2%;
	top: 1.5em;
}

/*
 * Form
 */

.comment_form {
	margin-top: 2em;
}

.new_form {
	margin-top: 0.5em;
}

form .row {
	position: relative;
	margin-bottom: 0.3em;
}

form .row label {
	display: block;
	margin-bottom: 0.5em;
}

form .submit {
	margin-top: 1em;
}

form .add-file {
	font-size: 0.875em;
	color: #000000 !important;
}

form .narrow label {
	float: left;
	width: 7em;
	margin-right: -100%;
}

form .narrow input {
	border: 1px solid #969696;
	margin-left: 8em;
}

form .narrow select {
	margin-left: 8em;
}

form .checkbox {
	margin: 1em 0;
}

form .checkbox label {
	display: inline;
}

form .checkbox input {
	margin-right: 0.5em;
}

form .submit-button {
	clear: both;
	font-size: 0.875em;
}

form .submit-button input {
	width: 14em;
}

/*
 * Change password
 */

.psswd-change {
	position: relative;
	top: 2em;
	font-size: 1em;
	color: #969696;
}

.psswd {
	position: relative;
	top: 2em;
	left: 1em;
	font-size: 1.1em;
	width : 40em;
}

.psswd2 {	
	position: relative;	
	left: 40%;
	font-size: 1em;
	width : 10em;
}

/*
 * Show block
 */

.show-block-link {
	position: relative;
	top: -0.5em;
	font-size: 0.75em;
	color: #969696;
}

.show-block {
	display: none;
	color: #969696;
	font-size: 0.875em;
	margin: 0.5em;
	padding: 0.5em;
}

.show-block p {
	font-size: 1em !important;
	margin-bottom: 0.85em !important;
}

/*
 * User edit
 */

.user-edit {
	font-size: 0.875em;
}

.user-pic {
	position: relative;
	margin: 0 0 2em 0;
}

.user-pic img {
	display: block;
	margin-bottom: 0.5em;
}

.user-pic input {
	margin-right: 0.1em;
}

.user-data {
	margin: 1em 0 0 0;
}

/*
 * Statistic
 */

.stat-side p {
	font-size: 0.875em;
	margin-bottom: 0.35em;
}

.stat-overall {
	margin-bottom: 2em;
}

.stat-graph p {
	font-size: 0.875em;
}

code:

<html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Все пользователи</title> <link rel="stylesheet" type="text/css" href="css/html.css" media="all" /> <link rel="stylesheet" type="text/css" href="css/main.css" media="all" /> <script type="text/javascript" src="js/jquery-1.4.min.js"></script> <script type="text/javascript" src="js/main.js"></script>   <script type="text/javascript"> function confirmAction(form, id, status, action) { var message = 'Пользователь ID=' + id + ' будет '; if (action == 'ban') message += 'забанен.'; if (action == 'delete') message += 'удален.'; if (action == 'manager') { if (status==3 || status==4) message += 'лишен прав менеджера.'; else message += 'наделен правами менеджера.'; } if (action == 'admin') { if (status==2 || status==4) message += 'лишен прав администратора.'; else message += 'наделен правами администратора.'; } message += ' Продолжить?'; if (confirm(message)) { var postAction = document.createElement("INPUT"); postAction.type = 'hidden'; postAction.name = 'action'; postAction.value = action; form.appendChild(postAction); form.submit(); } } </script> </head> <body> <div id="measurer"></div> <div id="outer"> <div id="page" class="homepage"> <div id="content"> <div id="user_info" class="frame c8"> <div class="content"> <a href="#" class="person"> <img src="i/user_pic.png" width="40" height="40" alt="Александр Константинопольский" /> <span>Александр Константинопольский</span> </a> <ul class="user-navigation no-list"> <li><a href="#">Мои идеи</a></li> <li><a href="#">Моя статистика</a></li> <li class="exit"><a href="#">Выход</a></li> </ul> </div> <ins class="cn tl"></ins> <ins class="cn tr"></ins> <ins class="cn bl"></ins> <ins class="cn br"></ins> </div> <div id="breadcrumbs"> <a href="#">Idea manager</a> / <a href="#">Управление</a> / <span>Все пользователи</span> </div> <div id="header"> <div class="logo"> <a href="#"><img src="i/logo.png" width="109" height="63" /></a> </div> <ul class="main-navigation no-list"> <li class="home"> <b><ins class="icon"><ins></ins></ins>Главная</b> </li> <li class="discussions"> <a href="#"><ins class="icon"><ins></ins></ins>Темы</a> </li> <li class="statistics"> <a href="#"><ins class="icon"><ins></ins></ins>Статистика</a> </li> <li class="help"> <a href="#"><ins class="icon"><ins></ins></ins>Помощь</a> </li> <li class="help selected"> <a href="#"><ins class="icon"><ins></ins></ins>Управление</a> </li> </ul> <div class="clear"></div> </div> <h2 align="center">Все пользователи</h2> <br> <div> <table align="center" border="2"> <form method="post"></form> <input name="id" value="544" type="hidden"> <input name="status" value="4" type="hidden"> <tbody> <tr> <td align="center">544 </td> <td align="center"><h4>sega@gmail.com </h4></td> <td align="center">Демьянов </td> <td align="center">Сергей </td> <td align="center">Владимирович </td> <td align="center"><h4>Администраторы </h4></td> <td align="center" class="date"> 2010-03-24 15:58:18 </td> <td align="center"> <input class="date" name="manager" value="Убрать из менеджеров" onclick="confirmAction(this.form,544,4,'manager')" type="button"></td> <td align="center"> <input class="date" name="admin" value="Убрать из администраторов" onclick="confirmAction(this.form,544,4,'admin')" type="button"></td> <td align="center"><input class="date" name="ban" value="Заблокировать" onclick="confirmAction(this.form,544,4,'ban')" type="button"></td> <td align="center"><input class="date" name="deluser" value="Удалить" onclick="confirmAction(this.form,544,4,'delete')" type="button"></td> </tr> </tbody> </table> <br><br> <p align="center">страницы <a href="#">1</a> <a href="#">2</a> <a href="#">3</a></p> </div> <br> <div class="clear"></div> </div> </div> </div> <div id="footer"> <div class="copyright">© 2009 <a href="#">Collective Intelligence Systems</a></div> <div class="search"> <input type="search" placeholder="поиск" value="" size="20" name="text" id="searchField" class="emptySearch"> </div> </div> </body></html>

code: