html и css, артефакты при изменении масштаба

kazakova_777777

Подскажите плз, как с этим можно бороться (общие принципы).
1) при изменении масштаба на 1 сползают некоторые слова в элементе, при изменении дальше все ок, в начальном состоянии все ок тоже
2) при просмотре в мозилле под убунту, браузер переносит некоторые строки, под виндоус все ок.
3) не отображается позиционирование элемента, хотя масштаб (ширина и высота) работает.
Причем стиль прописанный в элементе работает, а такой же в css не пашет.
В чем может быть дело ?
элемент
<img class="picsfoto" style="left: -11px;top: -8px" src="i/user_pic.png" alt="Иван&nbsp;Петров"/>
стиль в css
.picsfoto {
left: -20px;
top: 30px;
width: 60px;
height: 60px;
}

Big_Den

1. При изменении масштаба форматирование будет неизбежно ползти. Не надо с этим бороться
2. Попробуй использовать reset.css и задавать все отступы самостоятельно
3. У img по умолчанию display:inline. Если хочешь задавать ему координаты,поставь display:block и ,возможно, position:absolute

kazakova_777777

проставил в пункте 3, не помогает, все равно на положение не реагирует

Big_Den

Position проставил?
Давай весь код в студию

stm6692945

3. У img по умолчанию display:inline. Если хочешь задавать ему координаты,поставь display:block и ,возможно, position:absolute
долбаеб, сам понял что сказал?
по теме: весь код кидай

kazakova_777777

там код гигантский, html+css файл
весь чтоли закопипастить ?

Big_Den

там код гигантский, html+css файл
весь чтоли закопипастить ?

Выкладывай
долбаеб, сам понял что сказал?

Долбоёб пишется через "о" и "ё",бестолочь.
И,да,я понял,что сказал

kazakova_777777

 <!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;&laqu

kazakova_777777

на этой странице как раз проблема с масштабом, при изменении масштаба первый раз на 1 сползает немного фото, при изменении дальше + или - все резиновое

kazakova_777777

 <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>

	<!--[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]-->

<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>&nbsp;/

					<a href="#">Управление</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">

							<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&nbsp;</td>

               <td align="center"><h4>gmail.com&nbsp;</h4></td>

               <td align="center">Демьянов&nbsp;</td>

               <td align="center">Сергей&nbsp;</td>

               <td align="center">Владимирович&nbsp;</td>

               <td align="center"><h4>Администраторы&nbsp;</h4></td>

               <td align="center" class="date">&nbsp;2010-03-24&nbsp;15:58:18&nbsp;</td>

               <td align="center">&nbsp;<input class="date" name="manager" value="Убрать из менеджеров" onclick="confirmAction(this.form,544,4,'manager')" type="button"></td>

               <td align="center">&nbsp;<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">&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>

kazakova_777777

а тут у таблицы не работает border + расположение и отступы тоже не пашут что-то.
также неразрывные пробелы перед кнопками приводят к переносам строк (нужно пробелы сделать)
наверное я что-то не так делаю в принципе.
подскажите плз в чем тут дело

Big_Den

У тебя этот стиль:
 #user_info .person img { 

position: absolute;

top: 0px;

left: 0px;

}

переопределяет вот этот:
 .picsfoto { 

display: block;

position: absolute;

left: -20px;

top: -70px;

width: 40px;

height: 40px;

}

Поэтому картинка и не двигается
На второй странице где доктайп?
А это вообще что такое?
 <table align="center" border="2">

           <form method="post"></form>

           <input name="id" value="544" type="hidden">

           <input name="status" value="4" type="hidden">

           <tbody>

Нельзя здесь эти тэги вставлять.Всё содержимое таблицы должно лежать внутри td,а td - внутри tr
И зачем там эта пустая форма?
Border у таблицы работает.
Где нужно сделать пробелы? Ты имеешь в виду отступы перед кнопками? Тогда попробуй задать padding той ячейке,в которой кнопка лежит
Вообще w3c validator выдаёт 22 Errors, 1 warning(sты хотя бы одиночные тэги закрой,если объявил XHTML

kazakova_777777

ок, отлично, спасибо.
подскажите плз еще, можно ли сделать переопределение стилей, чтобы внешний стиль не затрагивал внутренний, т.е. чтобы внутренний перекрывал внешний, как-то приоритеты задать можно ?
еще как правильно padding применить в таблице, напишите плз пример кода

Big_Den

подскажите плз еще, можно ли сделать переопределение стилей, чтобы внешний стиль не затрагивал внутренний, т.е. чтобы внутренний перекрывал внешний, как-то приоритеты задать можно ?

css рассчитывает приоритет правил по селекторам. Вкратце,самый важный стиль - тот,что задан в параметре style в хтмл,потом идут стили для id(чем больше id в селекторе,тем важнее правилопотом остальные(тоже в приоритетном порядке). Это называется selector's specificity,почитать можно тут
Про padding: задаёшь класс нужным ячейкам и пишешь правило для него,элементарно:
td.myclass{padding:0 20px}

PooH

еще если написать !important то это будет высшим приоритетом
по первому посту вопрос зачем переопределять стили - у тебя в тэге одно а в стиле другое
лучше заведи отдельный стиль, если хочется его переопределить
также советую почитать про display:inline, block чтобы понимать, что значат координаты
еще важно position:absolyte, relative

pitrik2

ообще w3c validator выдаёт 22 Errors, 1 warning(sты хотя бы одиночные тэги закрой,если объявил XHTML
просто хочу сказать автору, что это безобразие - не прогонять свой код на валидатор прежде чем спрашивать других что не работает...
Оставить комментарий
Имя или ник:
Комментарий: