[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Не отображается несколько свойств CSS
Форум PHP программистов > Дизайн и верстка
AlmazDelDiablo
7.12.2010 - 19:01
Такая загадочная ситуация — если прописать в php echo '<font size="11">ПРИВЕТ</font>';, то все свойства CSS на сайте отображаются нормально. Но если эту строку убрать, то перестают отображаться height у input и text-shadow у h2. Вот код CSS:
.logo {
	width: 120px;
	font-size: 15pt;
	padding-top: 12px;
	padding-left: 40px;
	float: left;
	text-shadow: #0f3c6a 0 0 6;
	color: #78b0e9
}
И инпуты:
<input style="height: 15px; border: #787878 1px solid; width: 70px;" type="text" name="login" value="Логин" onfocus="javascript:if(this.value=valueLogin)this.value='';" />
<input style="height: 15px; border: #787878 1px solid; width: 70px;" type="password" name="password" value="Пароль" onfocus="javascript:if(this.value=valuePass)this.value='';" />
<input style="height: 15px; border: #787878 1px solid; width: 15px;"  type="checkbox" name="doCheck" title="Запомнить" />




Спустя 23 минуты, 56 секунд (7.12.2010 - 18:25) inpost написал(а):
text-shadow - не поддерживается старыми браузерами!

Спустя 5 минут, 15 секунд (7.12.2010 - 18:30) AlmazDelDiablo написал(а):
Ты не понял. Если строчка echo '<font size="11">ПРИВЕТ</font>'; есть, то это свойство отображается (браузер опера 10.62). А если нет — то этого свойства словно и нет (в исходном коде даже не показывается). Вот в чем загадка. А то, что тень не отображается в старых барузерах — я знаю.

Спустя 18 минут, 47 секунд (7.12.2010 - 18:49) inpost написал(а):
Причём тут font ? Если свойство применяется к class="logo" ???

Спустя 1 минута, 59 секунд (7.12.2010 - 18:51) AlmazDelDiablo написал(а):
Вот и я о том же. Описываю свои действия, чтобы ты понял, что тут не «кривые руки названия класса перепутали».
У меня шаблон сайта вызывается через echo <<<HTML в самом конце скрипта. А в самом его начале есть строчка echo '<font size="11">ПРИВЕТ</font>';. Так вот. Когда эта строчка в самом верху есть (она была для отладки скрипта) — все ок. Сайт отображается правльно, со всеми свойствами CSS и т.д. Но если я эту строчку убираю (echo '<font size="11">ПРИВЕТ</font>';), то нескоторые свойства отображаться перестают.

Спустя 7 минут, 22 секунды (7.12.2010 - 18:59) inpost написал(а):
весь код сюда,

Спустя 2 минуты, 30 секунд (7.12.2010 - 19:01) AlmazDelDiablo написал(а):
index.php
<?php
/*
==========================
by AlmazDelDiablo 
==========================
http://almazdeldiablo.ru/
==========================
*/
error_reporting( E_ALL | E_STRICT );
session_start();

define( 'nb_key', TRUE );
define( 'ROOT_DIR', dirname( __FILE__ ) );

include ROOT_DIR .'/engine/engine.php';

echo <<<HTML
<!DOCTYPE html>
<html>
<head>
	{$headers}
	<script language="javascript">
		valuePass = 'Пароль';
		valueLogin = 'Логин';
		document.getElementById('footer').innerHTML = '   <a href="http://almazdeldiablo.ru">by AlmazDelDiablo</a>';
		document.getElementById('innerBlock').innerHTML = '<td>Время: <span id="time"></span></td>';
	</script>
</head>
<body>
<div id="header">
	<div class="logo">
		nBans
	</div>
	<div align="right" class="menu">
		<a href="#">Бан-лист</a> |
		<a href="#">Админы</a> |
		<a href="#">Сервер</a> |
		<a href="#">Поиск</a>     
		<input style="height: 15px; border: #787878 1px solid; width: 70px;" type="text" name="login" value="Логин" onfocus="javascript:if(this.value=valueLogin)this.value='';" />
		<input style="height: 15px; border: #787878 1px solid; width: 70px;" type="password" name="password" value="Пароль" onfocus="javascript:if(this.value=valuePass)this.value='';" />
		<input style="height: 15px; border: #787878 1px solid; width: 15px;"  type="checkbox" name="doCheck" title="Запомнить" />
		<input type="submit" value="вход" />
	</div>
</div>
<div id="main">
	{$content}
</div>
<div id="footer">3</div>
</body>
</html>
HTML;
?>

style.css
/* GENERAL */
body {
	margin: 0px;
	font-family: Arial;
	font-size: 9pt;
	color: #3e3e3e;
	background: #ffffff;
}
img {
	border: 0;
}
ul {
	list-style: none;
	padding: 0px;
}

/* CLASS & ID */
#header {
	margin: 0 auto;
	width: 950px;
	height: 72px;
	background: url(../images/header_back.png) 50% 0% no-repeat;
}
.logo {
	width: 120px;
	font-size: 15pt;
	padding-top: 12px;
	padding-left: 40px;
	float: left;
	text-shadow: #0f3c6a 0 0 6;
	color: #78b0e9
}		
.menu {
	width: 600px;
	font-size: 10pt;
	padding-top: 13px;
	padding-right: 40px;
	float: right;
	font-weight: bold;
}
	.menu a {
		text-decoration: none;
		color: #000000;
	}
		.menu a:hover {
			text-decoration: underline;
			color: #003164;
		}

#main {
	margin: 0px auto;
	width: 900px;
}
.ip_notbanned {
	padding: 2px;
	font-size: 10pt;
	border: #c6d880 1px solid;
	background: #e6efc2;
	color: #354300;
}
.ip_banned {
	padding: 2px;
	font-size: 10pt;
	border: #fbc2c4 1px solid;
	background: #fbe3e4;
	color: #4d0003;
}
#content {
	margin: 10px auto;
	width: 900px;
	font-size: 10pt;
	text-align: left;
}
.list_top {
	background: #e5edf3;
	height: 22px;
	font-weight: bold;
}
.td_lp_l {
	border-top: #78a0be 1px solid; 
	border-left: #78a0be 1px solid;
	border-bottom: #d6dee5 1px solid;
}
.td_lp_c { 
	border-top: #78a0be 1px solid;
	border-bottom: #d6dee5 1px solid;
}
.td_lp_r {
	border-top: #78a0be 1px solid; 
	border-right: #78a0be 1px solid;
	border-bottom: #d6dee5 1px solid;
}
.td_lc {
	border-bottom: #d6dee5 1px solid;
}
#footer {
	margin: 0 auto;
	margin-top: 20px;
	width: 740px;
	height: 15px;
}
	#footer a {
		color: #747474;
		text-decoration: none;
		border-bottom: #747474 1px dotted;
	}

/* Tooltip */
#tooltip {
	background: #fff;
	-moz-opacity:0.7;
	opacity: 0.7;
	filter: alpha(opacity=700);
	border-top: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	border-left: 4px solid #94A3C4;
	color: #000;
	margin: 0px;
	padding: 3px 5px;
	position: absolute;
	visibility: hidden;
	z-index: 100;
	font: normal 11px Tahoma,  "Myriad Pro",  "Lucida Sans Unicode",  Verdana,  sans-serif;
}

Спустя 16 часов, 54 минуты, 24 секунды (8.12.2010 - 11:56) glock18 написал(а):
1. где приходится прописать <font size, чтобы свойства применились?
2. не применяются все свойства или только какие-то определенные (какие тогда)?

Спустя 1 час, 2 минуты, 2 секунды (8.12.2010 - 12:58) AlmazDelDiablo написал(а):
1. Над выводом самого шaблона делаю echo '<font...'; и тогда все ок.
2. Не применяется только тень и высота для инпута. Все остальное ок.

Теория о кривой верстке тоже откладывается, так как сделал просто пустую страницу и вывел на нее надпись с тенью. Тень не отобразилась. Добавь echo в верх страницы — тень отобразилась. huh.gif

Спустя 10 минут, 35 секунд (8.12.2010 - 13:08) Slays написал(а):
я ваще не вижу, где style.css подключается и куда ты вставляешь свою магическую проверку echo '<font size="11">ПРИВЕТ</font>';

Спустя 51 минута, 12 секунд (8.12.2010 - 13:59) AlmazDelDiablo написал(а):
Прошу прощения, engine.php не выложил.
<?php
/*
==========================
by AlmazDelDiablo 
==========================
http://almazdeldiablo.ru/
==========================
*/
if( !defined( 'nb_key' ) ) { exit; }

include ROOT_DIR .'/engine/core/config.php';
include ROOT_DIR .'/engine/core/dbconfig.php';
include ROOT_DIR .'/engine/core/db.class.php';

$title = $cfg['site_name'];
$headers = '<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
	<title>'.$title.'</title>
	<link rel="stylesheet" href="/css/style.css" type="text/css" />
	<script type="text/javascript" src="/js/tooltip.js"></script>
	<script language="javascript">
		valuePass = \'Пароль\';
		valueLogin = \'Логин\';
	</script>';	
$content = '';
$do = isset($_GET['do']);

switch( $do ) {
	case 'admins':
		include ROOT_DIR .'/engine/pages/admins.php';
		break;
		
	default: 
		include ROOT_DIR .'/engine/pages/ban_list.php';
}		

?>

Спустя 26 минут, 41 секунда (8.12.2010 - 14:26) glock18 написал(а):
Лично мне вот пыхепе не нужен тут smile.gif открой исходный код с фонтом и без, и выложи сюда его. наверняка, проблема в невалидности получившегося хтмл/цсс.

Спустя 1 час, 2 минуты, 48 секунд (8.12.2010 - 15:29) AlmazDelDiablo написал(а):
С фонтом:
Свернутый текст
<font size="11">ПРИВЕТ</font><!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
	<title>nBans</title>
	<link rel="stylesheet" href="/css/style2.css" type="text/css" />
	<script type="text/javascript" src="/js/tooltip.js"></script>
	<script language="javascript">
		valuePass = 'Пароль';
		valueLogin = 'Логин';
		document.getElementById('footer').innerHTML = '   <a href="http://almazdeldiablo.ru">by AlmazDelDiablo</a>';
	</script>
</head>
<body>
<table id="main_tbl" cellspacing="0" cellpadding="0">
	<tr>
		<td width="950" height="12" colspan="4"></td>
	</tr>
	<tr>
		<td width="40"></td>
		<td width="100" class="logo">nBans</td>
		<td width="770" align="right">
			<a href="#">Бан-лист</a> |
			<a href="#">Админы</a> |
			<a href="#">Сервер</a> |
			<a href="#">Поиск</a>     
			<input style="height: 15px; border: #787878 1px solid; width: 70px;" type="text" name="login" value="Логин" onfocus="javascript:if(this.value=valueLogin)this.value='';" />
			<input style="height: 15px; border: #787878 1px solid; width: 70px;" type="password" name="password" value="Пароль" onfocus="javascript:if(this.value=valuePass)this.value='';" />
			<input style="height: 15px; border: #787878 1px solid; width: 15px;"  type="checkbox" name="doCheck" title="Запомнить" />
			<input type="submit" value="вход" />
		</td>
		<td width="40"></td>
	</tr>
	<tr>
		<td colspan="4" width="950" height="30"></td>
	</tr>
</table>
</body>
</html>

Без фонта:
Свернутый текст
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
	<title>nBans</title>
	<link rel="stylesheet" href="/css/style2.css" type="text/css" />
	<script type="text/javascript" src="/js/tooltip.js"></script>
	<script language="javascript">
		valuePass = 'Пароль';
		valueLogin = 'Логин';
		document.getElementById('footer').innerHTML = '   <a href="http://almazdeldiablo.ru">by AlmazDelDiablo</a>';
	</script>
</head>
<body>
<table id="main_tbl" cellspacing="0" cellpadding="0">
	<tr>
		<td width="950" height="12" colspan="4"></td>
	</tr>
	<tr>
		<td width="40"></td>
		<td width="100" class="logo">nBans</td>
		<td width="770" align="right">
			<a href="#">Бан-лист</a> |
			<a href="#">Админы</a> |
			<a href="#">Сервер</a> |
			<a href="#">Поиск</a>     
			<input style="height: 15px; border: #787878 1px solid; width: 70px;" type="text" name="login" value="Логин" onfocus="javascript:if(this.value=valueLogin)this.value='';" />
			<input style="height: 15px; border: #787878 1px solid; width: 70px;" type="password" name="password" value="Пароль" onfocus="javascript:if(this.value=valuePass)this.value='';" />
			<input style="height: 15px; border: #787878 1px solid; width: 15px;"  type="checkbox" name="doCheck" title="Запомнить" />
			<input type="submit" value="вход" />
		</td>
		<td width="40"></td>
	</tr>
	<tr>
		<td colspan="4" width="950" height="30"></td>
	</tr>
</table>
</body>
</html>

Спустя 2 часа, 3 минуты, 11 секунд (8.12.2010 - 17:32) glock18 написал(а):
ну, во-первых, перед доктайпом ничего не должно быть. тегов, которые в body должны быть, тем более. во-вторых doctype не указан вовсе.

1й пример можно оценить только как баг ореги и как своеобразное исправление кривой верстки.
2й пример скорее всего не применяет тени из-за того, что применяется какой-то doctype, который не поддерживает их. как вариант для этого доктайпа используется другой способ высоты инпутов, и поэтому высота получается другой.

собственно, вывод такой - фонта там не должно быть, а указать доктайп надо.

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

Спустя 2 минуты, 22 секунды (8.12.2010 - 17:34) AlmazDelDiablo написал(а):
Во всех браузерах не применяется тень (от ИЕ7 и ФФ до Хрома и Оперы). Доктайп такой ставлю на всех своих сайтах (это доктайп ХТМЛ5) — везде все ок.

Спустя 3 минуты, 59 секунд (8.12.2010 - 17:38) Basili4 написал(а):
Цитата (AlmazDelDiablo @ 8.12.2010 - 18:34)
(это доктайп ХТМЛ5

а что хтмл5 уже работает ???

Спустя 14 минут, 45 секунд (8.12.2010 - 17:53) AlmazDelDiablo написал(а):
Около месяца уже. Может чуть больше.
И, кстати, дактайп я пробовал ставить другой, но ни какого эффекта.

Спустя 1 час, 35 минут, 3 секунды (8.12.2010 - 19:28) inpost написал(а):
Basili4
Во многих браузерах будет некорректно отображаться такой сайт, который использует этот док-тайп, если он работает около месяца, то на всех ранее созданных браузерах может возникнуть каша с сайтом =(

Я, вот, пока 50% браузеров не перейдут на хтмл5, не буду даже смотреть в его сторону.

Спустя 11 минут, 29 секунд (8.12.2010 - 19:40) DySprozin написал(а):
inpost
+1) да и потом без крайней нужды им лучше не пользоваться еще столько же (; это ж за...мучаешься с кроссбраузерностью blink.gif

Спустя 12 часов, 57 минут, 48 секунд (9.12.2010 - 08:37) glock18 написал(а):
AlmazDelDiablo
ну раз ты все знаешь, то даже не знаю что могу еще сказать.

не понимаю как такой знаток html/css вообще догадался выводить font перед доктайпом, с чего решил что все браузеры поймут твой html5, в котором ты умудряешься использовать теги из html3 - font вообще не используется уже.


Спустя 5 часов, 29 минут (9.12.2010 - 14:06) AlmazDelDiablo написал(а):
О Боже... Глок, ты только себя слышишь. Сказано же, что я пробовал ставить докайп хтмл4 — тот же самый кривой результат. При выводе тэга Фонт до доктайпа — все отображается ХОРОШО. А вот если этого тэга до доктайпа нет — то тень НЕ отображается. Ей Богу, закройте тему. Буду сам разбираться.


_____________
Блог | VK | GitHub | Twitch
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2025 Invision Power Services, Inc.