Помогите с CSS в IE!!!

alximik · 20.07.2007, 18:39

Здравствуйте. Не могу понять как в ИЕ убрать текст из списка, который является меню... В Опере и МозиллаФайерФокс все ОК... никаких проблем. Вообще мысль такая что сделать меню как на www.apple.com. Там все показывает без проблем, а у меня не получается. Если пытаюсь включить текст <a>текст</a> в <span> например и потом span display:none, то исчезает все изображение. Как этого избежать?

KidsKilla · 20.07.2007, 18:48

A{background:red url();display:block;}
A SPAN{display:none;}
<a><span>текст</span></a>

а вообще учись выражаться по русски. ничерта не понял.

alximik · 23.07.2007, 00:47

Большое спасибо за ответ. Попробую щас. И очень очень извиняюсь за то что так написал, торопился на поезд поэтому вот так - кое как и выложил... Сорри...

alximik · 23.07.2007, 01:31

Ну... сделал. При этом изображение вообще пропадает.
В Мозилла ничего не меняется и отображается все как надо. Но в ИЕ пункт заключенный в SPAN вообще пропадает. Остальные пункты в ИЕ отображаются так что под кнопкой видна надпись в <a>text</a> и видна часть изображения, которое должно появиться при наведении мыши. При ее наведении изображение меняется, все ок, и надпись под изображением тоже остается.
Ребята, посмотрите, и если кто то может - подскажите как это безобразие исправить. Уже если честно замучился в поисках и пробах, а результата никакого. Пробовал кстати сделать

Код:

#nav li a { 
float: left; width: 98px; height: 40px; padding-top: 40px;
overflow: hidden; display:block; background-image: url(img/menu.png); background-repeat: no-repeat;}

При этом в ИЕ все работает отлично, но в Мозилла эти 40 пикселей прибавляются к высоте меню и в итоге и надписи видно и ту картинку которая должна быть при наведении мыши... вообще бардак короче. Очень надеюсь на вашу помощь!

Сейчас сделано так:

Код:

<div id="menu" class="png_img">
	<ul id="nav">
		<li id="n-main"><a href="/"><span>main</span></a></li>
		<li id="n-about"><a href="/about/">About</a></li>
		<li id="n-port"><a href="/portfolio/">Portfolio</a></li>
		<li id="n-guest"><a href="/guestbook/">Guestbook</a></li>
		<li id="n-forum"><a href="/forum/">Forum</a></li>
		<li id="n-wip"><a href="/wip/">WIP</a></li>
	</ul>
  </div>

/* Navbar */
#nav { margin: 0; padding: 0; }
#nav li { display: inline; }
#nav li a { 
float: left; width: 98px; height: 0px; padding-top: 40px;
overflow: hidden; display:block; background-image: url(img/menu.png); background-repeat: no-repeat;}
#nav li a span{display:none;}
/* BUTTONS */
#nav li#n-main a { background-position: 0px 0px;}
#nav li#n-about a { background-position: -98px 0; }
#nav li#n-port a { background-position: -196px 0; }
#nav li#n-guest a { background-position: -294px 0; }
#nav li#n-forum a { background-position: -392px 0; }
#nav li#n-wip a { background-position: -490px 0; }

/* OVER STATES */
#nav li#n-main a:hover { background-position: 0px -41px; }
#nav li#n-about a:hover { background-position: -98px -41px; }
#nav li#n-port a:hover { background-position: -196px -41px; }
#nav li#n-guest a:hover { background-position: -294px -41px; }
#nav li#n-forum a:hover { background-position: -392px -41px; }
#nav li#n-wip a:hover { background-position: -490px -41px; }

KidsKilla · 23.07.2007, 15:38

Цитата:

Сообщение от alximik

Ну... сделал. ...

.лять

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
UL{list-style:none;margin:0;}
LI{float:left;margin:0 10px 0 0;}
A{width:100px;height:40px;display:block;background:red;}
A:hover{background:#000;}
SPAN{display:none;}
.active A{background:blue;}
</style>
</head>
<body><script type="text/javascript"></script>
<ul>
<li><a href="1"><span>Текст</span></a></li>
<li><a href="2"><span>Текст</span></a></li>
<li class="active"><a title="3"><span>Текст</span></a></li>
<li><a href="4"><span>Текст</span></a></li>
<li><a href="5"><span>Текст</span></a></li>
</ul>
</body>
</html>

так, надеюсь, понятнее?

etc · 23.07.2007, 15:46

alximik, отредактируйте свой пост и оформите код тегами [code][/code].

alximik · 23.07.2007, 18:22

Ок... так нормально будет?
Большое ПАСИБА мастерам! Сделал так как написал злой

KidsKilla и все начало работать нормально. Небольшой глюк в Мозилла был но там уже просто иправляется при помощи:

Код:

UL 
{
  padding: 0px;
}

А так все ОК! Если б не "матерились" так вообще бы молодцы были бы

А вобщем главное что все работает! Еще раз пасибки. Думаю вопрос закрыт.

KidsKilla · 23.07.2007, 21:10

никто не "матерился".
по поводу паддингов стоит вспомнить что схема работы с паддингом+ширина/высота правильная по w3c (ffox) и у та что у ие различается.
т.е. если у эл-та задана ширина 20 пх и паддинг по бокам по 10 пх, то
в ие элемент будет шириной 20 пх, а места под контент не останется вообще,
а по правилам блок станет занимать 20+10+10 итого 40 пикселей.

решается это несколькими способами. самый простой — не задавать у одного эл-та ширину и паддинг.а разносить их на 2 элемента.

alximik · 24.07.2007, 00:43

Цитата:

Сообщение от KidsKilla

никто не "матерился".

Да ладно те... Чо ты паришься насчет этого "матерился"... Нормально все... Прикидываю как всякие чудики вроде меня достали с подобными вопросами...

Ну... ничо... такие как мы тож нужны и без нас пока никак... И блин, откуда вы тут такие умные собрались.. а? (сказано с чувством глубокого уважения к вашим знаниям и с чувством такого же сожаления к нашим...

) А вообще пасиб те на самом деле большое! Над этим вопросом я парился дня 3 - 4 где то... а ты тут так все это дело просто и лаконично взял и разрулил... А еще я теперь знаю к кому, если чО, обраЩЧаться...

Пока все... удачи!!

Mnilionic · 29.07.2007, 16:40

Цитата:

Сообщение от KidsKilla

никто не "матерился".
по поводу паддингов стоит вспомнить что схема работы с паддингом+ширина/высота правильная по w3c (ffox) и у та что у ие различается.
т.е. если у эл-та задана ширина 20 пх и паддинг по бокам по 10 пх, то
в ие элемент будет шириной 20 пх, а места под контент не останется вообще,
а по правилам блок станет занимать 20+10+10 итого 40 пикселей.

решается это несколькими способами. самый простой — не задавать у одного эл-та ширину и паддинг.а разносить их на 2 элемента.

Если ставить правильный докТайп то никаких проблем с педдингом в броузерах нет (не считая float в ие)

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид