Перейти из форума на сайт.

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в on-line?
Вход • Забыли пароль? • Первый раз на этом сайте? • Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Разное отображение при HOVER в <TD>

Модерирует : Cheery

 Версия для печати • Подписаться • Добавить в закладки

Открыть новую тему     Написать ответ в эту тему

Maxer



Gold Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
дела идут на сайте
http://mxr.h12.ru
когда наводишь - в Firefox или Opera на меню (справа) или новость она стаёт другого цвета (444444 меняется на 666666). MSIE этого не делает. Почему?
 
просмотреть css файл:
http://mxr.h12.ru/t/ms2.css
 
там есть класс

Код:
td.menu {background-color:#444444;}

и

Код:
td.menu:hover {background-color:#666666;}

а выводится это так:

Код:
<td align="left" bgcolor="#444444" valign="top" width="100%" class="menu">


----------
красный феррари
Всего записей: 5225 | Зарегистр. 04-05-2004 | Отправлено: 00:35 23-04-2005
Advanced_Guest



Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Maxer
IE просто не обрабатывает псевдокласс :hover для всех элементов кроме A
 


----------
The Abyss - UO, LA2, Ботва, BSFG
Всего записей: 2446 | Зарегистр. 14-04-2002 | Отправлено: 06:08 23-04-2005
bredonosec



Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Для ячейки что-то подобное пробовал

Код:
<td class=mi1 onMouseover="this.style.backgroundColor='#000080'" onMouseout="this.style.backgroundColor='#c8cde0'" bgcolor="#c8cde0" height="20" align="left" valign="middle" onclick="location.href='index5.html'" style="cursor:pointer; cursor:hand">&nbsp;&nbsp;<a class="b" href="index5.html">Books and Items</a><br /></td>

Код:
.mi1  {
    PADDING-LEFT: 2px; FONT-SIZE: 9pt; COLOR: #000080; FONT-FAMILY: Arial, Helvetica, Sans serif; FONT-WEIGHT: bold; background-color: C8CDE0; TEXT-DECORATION: none; DECORATION: none; HORISONTAL-ALIGN: center; VERTICAL-ALIGN: center; BORDER: 0px
}
.mi1 A:link {
    PADDING-LEFT: 2px; FONT-SIZE: 9pt; COLOR: #000080; FONT-FAMILY: Arial, Helvetica, Sans serif; FONT-WEIGHT: bold; background-color: C8CDE0; TEXT-DECORATION: none; HORISONTAL-ALIGN: center; VERTICAL-ALIGN: center; BORDER: 0px
}
.mi1 A:active {
    PADDING-LEFT: 2px; FONT-SIZE: 9pt; COLOR: #FFFFFF; FONT-FAMILY: Arial, Helvetica, Sans serif; FONT-WEIGHT: bold; background-color: 000080; TEXT-DECORATION: none; HORISONTAL-ALIGN: center; VERTICAL-ALIGN: center; BORDER: 0px
}
.mi1 A:hover {
    PADDING-LEFT: 2px; FONT-SIZE: 9pt; COLOR: #FFFFFF; FONT-FAMILY: Arial, Helvetica, Sans serif; FONT-WEIGHT: bold; background-color: 000080; TEXT-DECORATION: none; HORISONTAL-ALIGN: center; BORDER: 0px
}
, только до ума так и не довел.. Всё равно не давало нормального результата: чтоб в неактивном состоянии синий текст на сером фоне, а в активном - белый на синем, при этом работала вся ячейка - без отдельных блоков текста и поля.
Всего записей: 16305 | Зарегистр. 13-02-2003 | Отправлено: 07:01 23-04-2005
Maxer



Gold Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Advanced_Guest

Цитата:
IE просто не обрабатывает псевдокласс :hover для всех элементов кроме A  

html v3.0 ?
bredonosec

Цитата:
Для ячейки что-то подобное пробовал, только до ума так и не довел

попробую довести.

----------
красный феррари
Всего записей: 5225 | Зарегистр. 04-05-2004 | Отправлено: 16:03 23-04-2005
Swappp

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Maxer

Цитата:
html v3.0 ?

CSS... HTML тут не причем
 
Если в ячейки есть <a> то можно сделать "a {display: block;}" и растянут во всю ячейку.
Всего записей: 1716 | Зарегистр. 02-11-2001 | Отправлено: 16:34 23-04-2005
bredonosec



Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
попробую довести.
Ежели получится - вывесь, ок?  
Всего записей: 16305 | Зарегистр. 13-02-2003 | Отправлено: 05:14 24-04-2005
KADABRA



Великий покусатель		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
bredonosec

Цитата:
Ежели получится - вывесь, ок?  


Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>  
 <title>TEST</title>
</head>
 
<body style="text-align: center;">
<!-- asdf -->
 
<table style="margin:   0 auto 0 auto;">
 <tr>
  <td style="background-color: #eeeeee; color: #0000ff;" onmouseover="this.style.backgroundColor='#0000ff'; this.style.color='#ffffff';" onmouseout="this.style.backgroundColor='#eeeeee'; this.style.color='#0000ff'" >
    111<br>222
  </td>
 
  <td style="background-color: #eeeeee; color: #0000ff;" onmouseover="this.style.backgroundColor='#0000ff'; this.style.color='#ffffff';" onmouseout="this.style.backgroundColor='#eeeeee'; this.style.color='#0000ff'">
    333<br>444
  </td>
 </tr>
</table>
 
</body>
</html>
 


----------
Это не подпись.
Всего записей: 1718 | Зарегистр. 14-07-2003 | Отправлено: 10:22 24-04-2005 | Исправлено: KADABRA, 10:41 24-04-2005
bredonosec



Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
KADABRA - Это просто маусовер, в этом ничего сложного.  
А мне нужно, чтоб ячейка была ссылкой (это из менюшки кусок). А текст под ссылкой не желает подчиняться требованиям прописанного для ячейки - у него собственные классы, которые или по дефолту в броузере, или прописаны в прицепленной к странице тебличке стилей.  
 Даже если стили совпадают, всё равно реакция отдельная, что неприемлемо.
 
 имено это и есть трабла, которую не решил.
Всего записей: 16305 | Зарегистр. 13-02-2003 | Отправлено: 10:33 24-04-2005
KADABRA



Великий покусатель		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
bredonosec

Код:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>  
 <title>TEST</title>
</head>
 
<body style="text-align: center;">
<!-- asdf -->
 
<table style="margin:   0 auto 0 auto;">
 <tr>
  <td style="background-color: #eeeeee; color: #0000ff;" onmouseover="this.style.backgroundColor='#0000ff'; this.style.color='#ffffff';" onmouseout="this.style.backgroundColor='#eeeeee'; this.style.color='#0000ff'" onclick="location='http://forum.ru-board.com'" >
    111<br>222
  </td>
 
  <td style="background-color: #eeeeee; color: #0000ff;" onmouseover="this.style.backgroundColor='#0000ff'; this.style.color='#ffffff';" onmouseout="this.style.backgroundColor='#eeeeee'; this.style.color='#0000ff'" onclick="location='http://kadabra.iatp.org.ua'">
    333<br>444
  </td>
 </tr>
</table>
 
</body>
</html>
 


----------
Это не подпись.
Всего записей: 1718 | Зарегистр. 14-07-2003 | Отправлено: 10:43 24-04-2005 | Исправлено: KADABRA, 10:44 24-04-2005
Mamay



Advanced Member		Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
html

Код:
<table width="100%" cellpadding="1" cellspacing="0" id="btable">
<tr>
    <td><a href="...." ><span class="spanalign"><img border="0" src="i/image.gif"></span>&nbsp;link1&nbsp;</a></td>
<tr>
</td>

css

Код:
#btable td a
{
   cursor:pointer;
   background-color:#B6CDEC;
   display: block;
   width:100%;
   padding-top:2px;  
   padding-bottom:8px;  
}
#btable td a:hover
{
   cursor:pointer;
   background-color:#216BB5;
   color:#ffffff;
}
.spanalign{
  width:20px;  
  height:100%;
  float:left;  
  padding:0px 2px 0px 2px;
}

помоему забавно получилось....

----------
Даже самый дурацкий замысел можно выполнить мастерски
Всего записей: 1352 | Зарегистр. 03-09-2002 | Отправлено: 10:45 24-04-2005 | Исправлено: Mamay, 10:45 24-04-2005
bredonosec



Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
KADABRA
Это, конечно, ничего, но параметры всё-таки насколько можно лучше убрать в цсс, бо засоряют. Кроме того, так редактить/видоизменять легче. Особо, ежели много их.
 Mamay

Цитата:
><span class="spanalign">
- Это, как понял, чтоб картинка выравнивалась с текстом? Спасибо, полезная штука  
В остальном пока играюсь, ищу забавное.  
Всего записей: 16305 | Зарегистр. 13-02-2003 | Отправлено: 12:13 24-04-2005 | Исправлено: bredonosec, 12:14 24-04-2005
KADABRA



Великий покусатель		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
bredonosec
Убрать можно, но мне лень было ещё один файл открывать
Главное: работает

----------
Это не подпись.
Всего записей: 1718 | Зарегистр. 14-07-2003 | Отправлено: 12:26 24-04-2005 | Исправлено: KADABRA, 12:26 24-04-2005
8AleX8



Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
IE whatever:hover
http://www.xs4all.nl/~peterned/csshover.html
Всего записей: 1813 | Зарегистр. 11-12-2001 | Отправлено: 15:47 24-04-2005 | Исправлено: 8AleX8, 17:31 24-04-2005
vladmir

Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
bredonosec
А зачем меню запихивать в ячейки таблицы?
Сделай через <p> или <ul> или <div> плюс CSS.
Всего записей: 2232 | Зарегистр. 22-01-2003 | Отправлено: 21:06 24-04-2005
bredonosec



Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
- Через дивы как-то глюкаво получалось, в ul разделители (линии) точно позиционировать трудно, также, как и <P>..
 табличная верстка как-то самая легкая. В смысле, легко контролировать все параметры и достаточно мало подводных камней.  
KADABRA

Цитата:
Главное: работает  
- от этого варианта я отталкивался изначально.  
Именно потому, что очень уж много всего надо в тд загонять. Пытался по возможности в цсс выгнать мусор.
Всего записей: 16305 | Зарегистр. 13-02-2003 | Отправлено: 14:18 25-04-2005
vladmir

Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
bredonosec
 
И что именно глюкаво? Вот давай бартер я тебе - скелет меню, а ты мне - перечисление глюков. Это примерно меню с моего сайта, только слегка усреднённое. div id=me необязателен.
 
Работает одинаково в Мозилле, ИЕ6, ИЕ5.01, Опере7.5. И со строгими доктайпами нормально и в обратной совместимости нормально.
 

Код:
 
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
.nu,.nu a:link,.nu a:visited,.nu a:hover{
font:13px verdana,arial,helvetica,sans-serif;
display:block;
text-decoration:none;
}
#me{margin:2px 2px 2px 2px;padding:2px 2px 2px 2px}
.nu{margin:2px 2px 2px 2px;border:1px solid #999;width:120px}
.nu a:link{background:#ebebeb;color:#444;padding:1px 5px 2px 5px;margin:0;}
.nu a:visited{background:#dadada;color:#222;padding:1px 5px 2px 5px;margin:0;}
.nu a:hover{background:#444;color:#ebebeb;padding:1px 5px 2px 5px;margin:0;}
</style>
<title>menu</title></head><body>
 
<div id=me>
<p class=nu><a href="index.html" title="настрой">Монитор</a></p>
<p class=nu><a href="inde.html" title="настройк">Монитор</a></p>
<p class=nu><a href="ind.html" title="настройка">Монитор</a></p>
<p class=nu><a href="in.html" title="настройка м">Монитор</a></p>
<p class=nu><a href="i.html" title="настройка мо">Монитор</a></p>
</div>
 
</body></html>
 

 
Пы Сы: твой трюк про <br>&nbsp;<br> при letter-spacing я таки применил в неск местах, спасибо.
Всего записей: 2232 | Зарегистр. 22-01-2003 | Отправлено: 08:12 26-04-2005
Swappp

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vladmir

Цитата:
<p class=nu><a href="index.html" title="настрой">Монитор</a></p>  

p лучше заменить на li, а div на ul, все тоже самое, только если отключить стили выглядит симпатичнее
Ну и в XHTML надо все значения атрибутов заключать в кавычки.
Всего записей: 1716 | Зарегистр. 02-11-2001 | Отправлено: 20:08 26-04-2005
vladmir

Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Swappp

Цитата:
выглядит симпатичнее

Это субъективно - только точки слева добавятся - не принципиально.
 

Цитата:
Ну и в XHTML надо все значения атрибутов заключать в кавычки

А у меня не "X" , а 4.01 стрикт и вообще не вижу в "X" практического смысла. Одни понты.
 
Вообще-то я надеялся на перечисление глюков, похоже что их нет.
Всего записей: 2232 | Зарегистр. 22-01-2003 | Отправлено: 23:24 27-04-2005
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » Разное отображение при HOVER в <TD>


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2025

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru