Jump to content
  • 0

Внутренние элементы растягивают блок в IE6

d0ublezer0

Asked by d0ublezer0,

 Share

Question

d0ublezer0 Explorer

d0ublezer0

Posted
Posted (edited)

CSS:

a.sbt {
	background:url("/templates/sinclair/images/sml_btn_bg.png") repeat-x;
	display:inline-block;
	height:22px;
	line-height: 22px;
	white-space: nowrap;
	color:#fff;
	text-decoration: none;
	cursor: hand;
}
a.sbt b, a.sbt i{	 
	display: block;
	height:22px;
	font-style: normal;
	font-weight: normal;
	cursor: hand;
}
a.sbt b{
	background:url("/templates/sinclair/images/sml_btn_l.png") no-repeat left top;
}
a.sbt i{
	background:url("/templates/sinclair/images/sml_btn_r.png") no-repeat right top;
	padding-left:10px;
	padding-right:10px;
}

HTML:

<a class="sbt" href="ss"><b><i>Добавить в корзину</i></b></a>

Должна получиться кнопка,растянутая по размеру надписи на ней, а в IE6 она растягивается до 100% родительского элемента.

применение для IE6 стиля

a.sbt {
display:inline-block !important;
}

положительного результата не дает - внутренние <B> и <I> растягивают её.

Как его обмануть?

Ширина кнопки заранее не известна

Edited by d0ublezer0
Link to comment
Share on other sites

18 answers to this question

Recommended Posts

  • 0
Searcher Explorer

Searcher

Posted
Posted

IE6 не понимает inline-block, воспользуйтесь лучше плавающими блоками.

Зачем это: cursor: hand; ?

Ну и остальное коряво, конечно...

хотя есть замечательное свойство zoom:1; может оно поможет в данной ситуации ))

Link to comment
Share on other sites
  • 0
Scrum Explorer

Scrum

Posted
Posted

вы этого хотели добиться ?

<!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" lang="en">

<head>
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/
  #menu {
	border: 1px solid red;
	padding: 10px;
  }


 a.sbt {
	background:url("/templates/sinclair/images/sml_btn_bg.png") repeat-x;
	padding: 5px;
	border: 1px solid red;
}

  /*]]>*/
  </style>
</head>

<body>
<div id="menu">
	<a class="sbt" href="ss">Добавить в корзину</a>
	<a class="sbt" href="ss">Добавить в корзину</a>
	<a class="sbt" href="ss">Добавить в корзину</a>
</div>
</body>

</html>

Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted
ZOOM + Inline не помогли - та же песня.

Searcher

А что именно коряво, как улучшить?

Если нет принципиальной необходимости использовать inline-block, то как я сказал, попробуйте плавающие блоки (float:left; например)

Ну а улучшить... Возьмите за основу как Scrum написал, только добавьте еще элемент для закрывания фона. И не множте бесполезных свойств и элементов. Не ставьте у всех элементов размеры, внешние растянутся по внутренним, ну и т.п. Самим потом легче будет разобрать лаконичный код.

Еще добавлю, что все-таки понятнее было бы делать меню списком <ul><li>... Но там уж смотрите сами.

Link to comment
Share on other sites
  • 0
d0ublezer0 Explorer

d0ublezer0

Posted
  • Author
Posted
вот это опасно!

И используй условные комментарии для ИЕ6

Почему опасно?

Этот код вызывается только для IE6:

<!--[if lte IE 6]>
<link href="/templates/sinclair/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->

Зачем это: cursor: hand; ?

Потому что в IE8 на кнопке (ссылке) почему-то не показывается курсор с рукой, вместо него - тектовый курсор. Подозреваю, что из-за вложенности элементов.

Всем спасибо за участие, но мне нужно не меню, а именно кнопка.

Вот как должно быть (так в Firefox и IE8):

btn-normal.png

А вот как получается в IE6:

btn-abnormal.png

Также по размерам - установлена только высота, чтобы целиком показать background кнопки. А inline-table и inline-block я использовал, чтобы кнопка не растягивалась на ширину родительского элемента.

Да, кстати, в O'REILLY CSS Reference указано, что display:inline-block появился в IE5.5

Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted
Потому что в IE8 на кнопке (ссылке) почему-то не показывается курсор с рукой, вместо него - тектовый курсор. Подозреваю, что из-за вложенности элементов.
Глюк какой-то... А зачем в каждом вложенном элементе курсор устанавливать, в одном не достаточно?
Всем спасибо за участие, но мне нужно не меню, а именно кнопка.
Никто не настаивает на списке. :)
Также по размерам - установлена только высота, чтобы целиком показать background кнопки. А inline-table и inline-block я использовал, чтобы кнопка не растягивалась на ширину родительского элемента.
Еще раз говорю, а чем тут float:left; не угодил? Всем браузерам одинаково понятно будет. Вы попробуйте плавающие блоки, вам понравится! :)
Да, кстати, в O'REILLY CSS Reference указано, что display:inline-block появился в IE5.5

Ну это приснилось чуваку, наверно :)

Link to comment
Share on other sites
  • 0
d0ublezer0 Explorer

d0ublezer0

Posted
  • Author
Posted (edited)

Эхх..

Плавающие блоки не спасли картину, если присвоить ссылке float - она также растягивается. Или вы имели ввиду, что её нужно еще в отдельный контейнер вложить?

Кстати, метод, предложенный Scrum, мне известен - но он не позволяет сделать обрамление слева и справа у элемента ссылки (посмотрите на картинку).

Для чего, собственно и затевались пляски с вложенными B и I

Так, ладно, вот вам демонстрация

Edited by d0ublezer0
Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted

Спасибо! :)

Ну вот стили как-то так:

#menu {
	border: 1px solid red;
	padding: 10px;
	overflow:hidden;
	zoom:1; /* это лучше поместить в условные комментарии для ИЕ */
}

a.sbt {
	background:url("sml_btn_bg.png") repeat-x;
	float:left;
	text-decoration: none;
}

a.sbt b, a.sbt i {
	float:left;
}
a.sbt b {
	background:url("sml_btn_l.png") no-repeat left top;

}
a.sbt i {
	background:url("sml_btn_r.png") no-repeat right top;
	padding-left:10px;
	padding-right:10px;
	height:22px;
	font-style: normal;
	font-weight: normal;
	line-height: 22px;
	font-family:Arial;
	font-size:12px;
	white-space: nowrap;
	color:#fff;
}

Да, покушать люблю и ухожу довольно далеко для того, чтобы насладиться этим процессом :)

Link to comment
Share on other sites
  • 0
d0ublezer0 Explorer

d0ublezer0

Posted
  • Author
Posted

Searcher

Да, всё прекрасно. Zoom оказался в принципе не нужен, и без него всё хорошо работает.

Только из-за float:left в основном элементе (А) он теперь сползает куда не следует.

Вложу еще в один контейнер.

Спасибо!

Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted
Searcher

Да, всё прекрасно. Zoom оказался в принципе не нужен, и без него всё хорошо работает.

Только из-за float:left в основном элементе (А) он теперь сползает куда не следует.

Вложу еще в один контейнер.

Спасибо!

Так zoom от этого и избавлял... Хотя я не совсем понял куда и в каком броузере там <a> сползает...

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
Так zoom от этого и избавлял... Хотя я не совсем понял куда и в каком броузере там <a> сползает...

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept