Неправильное отображение цвета текста в блоке <div>

Mintaya · June 6, 2010

Пожалуйста помогите, срочно, пишу дипломную работу на тему разработки сайта. Времени осталось очень мало. Столкнулась с такой проблемой FF и IE инвертируют текст в блоке div, а в Chrome все нормально. Что только не пробовала...

Вот в Хроме

А это в FF и IE

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head> <LINK REL="stylesheet" TYPE="text/css" HREF="MyStyle.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" charset="utf-8">
<meta name="description" content="NOVA • COM - Спутниковое ТВ у Вас дома (г.Лозовая).">
<meta name="keywords" http-equiv="keywords" content="спутниковое телевидение, г. Лозовая, установка, настройка, перепрошивка, продажа, nova, com, тарелка, антенна, спутниковые каналы">
<meta http-equiv="expires" content="Mon, 01 Jan 1990 00:00:00 GMT">
<title>NOVA • COM - Спутниковое ТВ у Вас дома (г.Лозовая)</title>

<script type="text/javascript" src="drop_down.js"></script>

<style type="text/css"> 
@import "style3.css";
</style>

<style type="text/css"><!--
body{margin:0px;padding:0px;}
--></style>

</head>

<body>

<table cellpadding=20 cellspacing=1>

<tr>
<td colspan="2" class="Head">
<a href="index.html" title="На главную страницу сайта">
<img src="Head_Site.jpg" alt="На главную страницу сайта"></a>
</td></tr>

<tr><td class="Menu">
<ul id="nav"> 
	<li><a href="Vibor.html">Как выбрать пакет каналов</a></li> 
	<li><a href="Shiski_kanalov.jpg" target="_blank">Списки каналов</a></li> 
	<li><a href="#">Полезная информация</a> 
	  <ul> 
		<li><a href="Info_preim.html">Преимущества спутникового ТВ</a></li>
		<li><a href="Info_vibor_resiver.html">Выбираем ресивер</a></li>
		<li><a href="Info_HDTV.html">HD TV</a></li>
		<li><a href="Info_vopros.html">Частые вопросы</a></li>		
		</ul> 
	</li>
	<li><a href="#">Услуги</a> 
	  <ul> 
		<li><a href="Uslugi_ustanovka.html">Установка</a></li>
		<li><a href="Uslugi_ustanovka_podar.html">Подарочный сертификат</a></li>
		<li><a href="Uslugi_nastroyka.html">Настройка</a></li> 
		<li><a href="Uslugi_proshivka.html">Перепрошивка</a></li> 
		<li><a href="Uslugi_dekor.html">Декор антенны</a></li> 
	  </ul> 
	</li>
	<li><a href="Zakaz.html">Сделать заказ</a></li>
	<li><a href="#">ТВ программа</a></li>   
	<li><a href="O_nas.html">О нас</a></li>
   </ul>
</td>

<tr><td colspan="2" class="tab"><div class="brd"><span class="letter">Н</span>овости в мире спутникового телевидения</div><br>

<div class="data">26 апреля 2010г.</div>
<div class="zagol">Компания Samsung объявила о начале производства 3D LED-телевизоров на российском заводе в Калуге.</div>
<p>Завод Samsung в Калуге будет производить две модели серии 7000 с диагональю экрана 40 и 46 дюймов. Модели серии 7000 выполнены в фирменном стиле Crystal Design, и заключены в тонкий корпус толщиной 2,65 см. Телевизоры дают возможность записывать и воспроизводить видео непосредственно с USB-носителя, поддерживают популярный VoIP-сервис Skype, а также службу контент-сервиса, которая позволяет работать с такими веб-сервисами, как YouTube, Twitter, AccuWearher, FaceBook и другими. Кроме того, новые LED-телевизоры отличаются развитыми возможностями соединения благодаря поддержке DLNA и четырем HDMI-портам.</p>
<p>LED-телевизоры серии 7000 появятся в розничной продаже в апреле по цене 84 990 и 99 990 рублей соответственно. Одновременно с телевизорами в продажу поступят активные 3D-очки, в том числе разные по дизайну модификации для взрослых и детей. Среди них будут представлены как модели, работающие на батарейках, так и те, которые можно подзаряжать через USB. Стоимость очков составит от 2 990 руб. При этом комплект из двух пар очков в подарок смогут получить покупатели, которые приобретут 3D LED-телевизор Samsung в течение месяца после начала продаж.</p>
<p>По информации портала <a href="http://cnews.ru/news/top/index.shtml?2010/04/23/387980" target="_blank" title="Портал CNews">CNews.</a></p>
</td></tr>

<tr>
<td colspan="2" class="tab"><div class="brd"><span class="letter">Н</span>аши контакты и местонахождение:</div><br>

<img src="Karta.jpg" border="0" class="rightimg"  usemap="#karta1"> 
<map name="karta1"> 
<area href="Full_Karta.jpg"  target="_blank"  shape="rect" coords="10,187,115,230" title="Посмотреть полную карту" alt="Посмотреть полную карту"> 
</map>

Тел.: 27-8-27, 099-488-42-44, 067-719-88-99<br><br>
Офис: г.Лозовая, м-н 2, д.15 (4)<br>
Остановка: мебельный магазин "Фаворит"<br><br>
E-mail: mintay@mail.ru, <a href="mailto:mintay@mail.ru" title="Написать письмо"> написать на e-mail</a><br>
ICQ: 272-618-015<br>
</td></tr>

</table>

</body>

</html>

Css

/*удалим отступы и маркеры в ненумерованном списке,  зададим ширину пунктов меню */
ul {
	margin: 0;
	padding: 0;
	list-style: none;
			  list-style-position: inside;
	width: 146px;
	border-bottom: 2px solid #FFFFFF;
								}
/* задать положение элементов списка */
ul li {
	position: relative;
	}
/* подменю появлялось справа от пункта родительского меню когда над этим пунктом курсор */
li ul {
	position: absolute;
	left: 144px; 
	top: 0;
	display: none;
	}
/* стили для списка меню*/
ul li a {
	display: block;
	text-decoration: none;
	color: #000000;
	background: #CCCCCC;
	padding: 10px;
	border: 2px solid #FFFFFF;
	border-bottom: 0;

	}

/*стили для ссылок пунктов меню при наведении на них курсора мыши*/
   a:hover {
	background: #FFCCCC; /* Цвет фона под ссылкой */ 
	color: #3366CC; /* Цвет ссылки */ 
		   }

/*чтобы подменю появлялись в тот момент, когда курсор находится над элементом списка*/
li:hover ul, li.over ul { 
	display: block; 
	}

a img {
 border: none; /* Убираем границу изображения-ссылки*/
  }

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

.letter {
	color: #FF6699; /* Цвет первого символа*/
	font-size: 140%; /* Размер шрифта */
   } 

/* Линия для выделения*/
DIV.brd {
	border-bottom: 2px solid #99CCFF; /* Параметры границы */
	background: #FFFFFF; /* Цвет фона */
	padding: 0px; /* Поля вокруг текста */
   }

BODY {
 background: #999999; /* Цвет фона сайта*/
 font-family: Arial, sans-serif; /* Гарнитура шрифта */ 
 font-size: 10pt; /* Размер текста */ 

  }

td {
 background: #FFFFFF; /* Цвет фона ячеек*/
 border: 3px solid #CCCCCC; /* Параметры границы ячеек*/
 vertical-align: top; /* Выравнивание по верхнему краю ячеек */
 line-height: 150%; /*Межстрочный интервал */
  }

TABLE {
 width: 800px; /* Ширина таблицы */
 border: 0px; /* Рамка вокруг таблицы */
 margin: 0 auto; /* Выравниваем таблицу по центру окна */
 position: relative; /* Позиция элемента смещается относительно его исходного положения */
 top: -3px; /* Положение от верхнего края окна браузера (использовано для удаления отступа над шапкой сайта) */
   }

.Menu {
  padding: 0px; /* Расстояние от содержимого ячейки  до их границы */
  height: 100%; /* Высота блока */
  line-height: 100%; /*Межстрочный интервал*/
  background: #999999; /* Цвет фона*/
  border-top: 3px solid #CCCCCC; /* Линия сверху*/
  border-bottom: 3px solid #CCCCCC; /* Линия снизу */
  border-left: 0px; /* Линия слева */
  border-right: 0px; /* Линия справа */
}

 .tab {
	text-indent: 15px; /*Отступ первой строки*/
		} 

.data {
 color: #FF6699; /* Цвет текста */
 font-size: 9pt; /* Размер текста */
 }

.zagol {
	color: #3366CC; /* Цвет текста */
	font-weight: bold;
	   }

 p {
	margin: 0px 0px 0px 0px; /* Отступы вокруг */
	line-height: 150%; /*Межстрочный интервал*/
		}

Mintaya · June 7, 2010

Оказывается надо в свойствах экрана --> оформление --> кнопка эффекты, в пункте "применять следующий метод сглаживания экранных шрифтов" сменить "Обычный" на "Clear type".

Тогда такой вопрос возникает: на других мониторах будет всё в порядке? или надо что-то прописать?

Помогите, пожалуйста.

Edited June 7, 2010 by Mintaya

mini · June 7, 2010

Оказывается надо в свойствах экрана --> оформление --> кнопка эффекты, в пункте "применять следующий метод сглаживания экранных шрифтов" сменить "Обычный" на "Clear type".
Тогда такой вопрос возникает: на других мониторах будет всё в порядке? или надо что-то прописать?
Помогите, пожалуйста.

честно оворя так и не понял что Вам надо...

Mintaya · June 7, 2010

Теперь окончательный вопрос

Ситуация такая:

Если код css в таком виде:

.news {

color: #3366CC; /* Цвет текста */

font-size: 12pt; /* Размер текста */

}

Тогда во всех браузерах отображается правильный цвет текста.

Стоит только добавить font-weight: bold

.news {

color: #3366CC; /* Цвет текста */

font-size: 12pt; /* Размер текста */

font-weight: bold;

}

И цвет текста инвертируется (темно синий становится коричневым) в IE и FF, а Chrome отображает правильно.

Тут как-то замешано сглаживание шрифтов...наверно...

Sign In

Неправильное отображение цвета текста в блоке <div>

Question

Mintaya

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Mintaya

Link to comment

Share on other sites

mini

Link to comment

Share on other sites

Mintaya

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information