Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Internet Explorer (https://javascript.ru/forum/css-html-internet-explorer/)
-   -   ie8 ie9 display:none troubles (https://javascript.ru/forum/css-html-internet-explorer/20551-ie8-ie9-display-none-troubles.html)

ksa 10.08.2011 13:36
Теоретически может сработать такой вариант...

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
img {
	border: 0;
}
.imgStyle {
	height:60px;
}
#data {
	width: 500px;
	word-spacing: 0;
}
</style>
<script type="text/javascript">
function filter(costType) {
var globalCost = costType;
var imgListTD = document.getElementById("image_list");
var images = imgListTD.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
var altText = images[i].getAttribute('alt');
if (globalCost != undefined) {
if (altText.indexOf(globalCost) != -1) {
images[i].style.display = 'inline';
totalVisible++;
}
else {
images[i].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
 <table id='data' border="1">
 <tr>
 <td id="image_list" style="text-align:center">
	<img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" />
	<img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" />
 </td>
 </tr>
 </table>
 <input type="button" value="costType0" onClick="filter('costType0')"/>
 <input type="button" value="costType1" onClick="filter('costType1')"/>
 <input type="button" value="costType2" onClick="filter('costType2')"/>
 <input type="button" value="costType3" onClick="filter('costType3')"/>
</body>
</html>


Но у меня ИЕ7 не желает такое поддерживать... :(

ksa 10.08.2011 13:39
Или вот так...

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
img {
	border: 0;
}
.imgStyle {
	height:60px;
}
#data {
	width: 500px;
	white-space: pre-line;
}
</style>

<script type="text/javascript">
function filter(costType) {
var globalCost = costType;
var imgListTD = document.getElementById("image_list");
var images = imgListTD.getElementsByTagName("img");

for (var i = 0; i < images.length; i++) {

var altText = images[i].getAttribute('alt');
if (globalCost != undefined) {
if (altText.indexOf(globalCost) != -1) {
images[i].style.display = 'inline';

totalVisible++;
}
else {
images[i].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
 <table id='data' border="1">
 <tr>
 <td id="image_list" style="text-align:center">
 <img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" />
 </td>
 </tr>
 </table>
 <input type="button" value="costType0" onClick="filter('costType0')"/>
 <input type="button" value="costType1" onClick="filter('costType1')"/>
 <input type="button" value="costType2" onClick="filter('costType2')"/>
 <input type="button" value="costType3" onClick="filter('costType3')"/>
</body>
</html>

aleha 10.08.2011 15:27
Класс, я их выстроил в одну большую строку. И на выходе получил одну большую строку, которую не ограничил даже стиль таблицы.
На вскидку приписал туже ширину <td> в котором лежат все картинки и о чудо, они стали переноситься на новую строку и теперь там нет дырок.
Наверно, то из-за чего это всё произошло останется в тайне.

ksa 10.08.2011 15:32
Цитата:
Сообщение от aleha
о чудо, они стали переноситься на новую строку и теперь там нет дырок
Вот что делает крест животворящий! (с)


Часовой пояс GMT +3, время: 10:35.
Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице