Пустой span c min-width в таблице. Проблемы с ИЕ7.

F315 · August 17, 2011

Добрый день!

Задача такая: сверстать пустые поля для вывода информации. В дальнейшем они должны растягиваться по содержимому (по ширине). Верстка табличная.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>min-width</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<!--[if lte IE 7]> 
	</style>
	<![endif]-->
	<style type="text/css">
	.minWidth{
	display: inline-block;		
	min-width:100px;
	height:100px;
	background-color:red;
	}
	table{
	width:100%;
	border: 1px solid green;
	}

	</style>
</head>

<body>	
<table>
	<tr>
		<td style="border: 2px solid green;">
			<span class="minWidth"></span>
		</td>
		<td style="border: 2px solid blue;">
			<span class="">Браузеры и стандарты. Вечная погоня. Из-за несоответствий стандартам, из-за разных способов рендеринга страниц большая часть времени веб-дизайнера уходит на то, чтобы загладить эти несоответствия (использовать хаки). В итоге, вместо эффективной работы, дизайнер вступает в противоестественные отношения с браузерами, теряя драгоценное время.  </span>
		</td>
	</tr>		
</body>
</html>

Проблемав том, что в ИЕ7 на пустой span c min-width наезжает соседняя ячейка.

Вот как выглядит в мозиле:

http://savepic.ru/2985594.jpg

Это в ИЕ7:

http://savepic.ru/2987642.jpg

Помогите решить задачку, плиз.

Edited August 17, 2011 by F315

psywalker · August 17, 2011

А есть возможность задать ячейке width: 100px; ?

F315 · August 17, 2011

On 8/17/2011 at 11:09 AM, psywalker said:
А есть возможность задать ячейке width: 100px; ?

той в которой резиновый спан, нельзя

перестает тянуться

Radiocity · August 17, 2011

Quote
Internet Explorer до версии 7 включительно:
значение inline-block применяется только для встроенных элементов, с блочными элементами работает некорректно.
Источник

ИМХО, стоит убрать display и height. Для одной из ячеек задать длину в 1%.

Span применяется для форматирования текста. Для оформления блоков лучше использовать div.

В код стилизацию советую не вставлять, а выносить в <style/>


Удалил бред

Edited August 17, 2011 by Radiocity

psywalker · August 17, 2011

On 8/17/2011 at 11:40 AM, F315 said:

On 8/17/2011 at 11:09 AM, psywalker said:
А есть возможность задать ячейке width: 100px; ?
той в которой резиновый спан, нельзя
перестает тянуться

Уверен?

F315 · August 17, 2011

Quote
Уверен?

эмм, да

может не то делаю

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>min-width</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<!--[if lte IE 7]> 
	</style>
	<![endif]-->
	<style type="text/css">
	.minWidth{
	display: inline-block;		
	min-width:100px;
	height:100px;
	background-color:red;
	}
	table{
	width:100%;
	border: 1px solid green;
	}

	</style>
</head>

<body>	
<table>
	<tr>
		<td style="border: 2px solid green; width:100px;">
			<span class="minWidth">Браузеры и стандарты. Вечная погоня. Из-за несоответствий стандартам, из-за разных способов рендеринга страниц большая часть времени веб-дизайнера уходит на то, чтобы загладить эти несоответствия (использовать хаки). В итоге, вместо эффективной работы, дизайнер вступает в противоестественные отношения с браузерами, теряя драгоценное время.</span>
		</td>
		<td style="border: 2px solid blue;">
			<span class="">Браузеры и стандарты. Вечная погоня. Из-за несоответствий стандартам, из-за разных способов рендеринга страниц большая часть времени веб-дизайнера уходит на то, чтобы загладить эти несоответствия (использовать хаки). В итоге, вместо эффективной работы, дизайнер вступает в противоестественные отношения с браузерами, теряя драгоценное время.  </span>
		</td>
	</tr>		
</body>
</html>

вот скрин в ИЕ7:

http://savepic.ru/3002995.jpg

Edited August 17, 2011 by F315

F315 · August 17, 2011

Quote
значение inline-block применяется только для встроенных элементов, с блочными элементами работает некорректно.

так span же инлайн элемент

Quote
ИМХО, стоит убрать display и height.

если убрать высоту, то поле вывода (сделанное span) в пустом виде не будет отображаться

попробовала заменить span на div и прописать ширину td 1% - результат тот же

http://savepic.net/1880926.jpg

<table>
	<tr>
		<td style="border: 2px solid green; width:1%;">
			<div class="minWidth"></div>
		</td>
		<td style="border: 2px solid blue;">
			<div class="">Браузеры и стандарты. Вечная погоня. Из-за несоответствий стандартам, из-за разных способов рендеринга страниц большая часть времени веб-дизайнера уходит на то, чтобы загладить эти несоответствия (использовать хаки). В итоге, вместо эффективной работы, дизайнер вступает в противоестественные отношения с браузерами, теряя драгоценное время.  </div>
		</td>
	</tr>
</table>

Quote
В код стилизацию советую не вставлять, а выносить в <style/>

я так для быстроты и наглядности пишу :-)

в реальном проекте все стили выносятся в отдельные файлы

Edited August 17, 2011 by F315

psywalker · August 17, 2011

F315,

Вот скрины из ФФ и ИЕ7 http://screencast.com/t/088m7pl9Ng

Сделай экраны одинаковые

Radiocity · August 17, 2011


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>min-width</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" type="text/css" href="css/reset.css"/>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        <style type="text/css">
        .a{
          border: 2px solid green;
          background-color:red;
          width:200px;
        }

        .b{
          border: 2px solid blue;
        }

        table{
          width:100%;
          border: 1px solid green;
        }

        </style>
</head>

<body>  
<table cellspacing="0" cellpadding="4" border="0">
        <tr>
                <td class="a">
                        <span>
                        Ширина не меняется взависимости от контента<br/>толькоеслиестьпробелывтексте______
                        </span>
                </td>
                <td class="b">
                        <span>
                        Браузеры и стандарты. Вечная погоня. Из-за несоответствий стандартам, из-за разных способов рендеринга страниц большая часть времени веб-дизайнера уходит на то, чтобы загладить эти несоответствия (использовать хаки). В итоге, вместо эффективной работы, дизайнер вступает в противоестественные отношения с браузерами, теряя драгоценное время.  
                        </span>
                </td>
        </tr>           
</body>
</table>
</html>

Идея с 1% себя не оправдала =(

Edited August 17, 2011 by Radiocity

F315 · August 17, 2011

Quote
Вот скрины из ФФ и ИЕ7 http://screencast.com/t/088m7pl9Ng
Сделай экраны одинаковые

так красный span у тебя не растягивается по содержимому, как и у меня впрочем, если ячейке установить фиксированную ширину

Edited August 17, 2011 by F315

Radiocity · August 17, 2011

On 8/17/2011 at 12:57 PM, F315 said:

Quote
Вот скрины из ФФ и ИЕ7 http://screencast.com/t/088m7pl9Ng
Сделай экраны одинаковые
так красный span у тебя не растягивается по содержимому, как и у меня впрочем, если ячейке установить фиксированную ширину

Чтобы он по ширине растягивался нужно применить display:block. Однако и это не привидет к желаемому результату, так как ie7 все равно отобразит его некорректно.

psywalker · August 17, 2011

On 8/17/2011 at 12:57 PM, F315 said:

Quote
Вот скрины из ФФ и ИЕ7 http://screencast.com/t/088m7pl9Ng
Сделай экраны одинаковые
так красный span у тебя не растягивается по содержимому, как и у меня впрочем, если ячейке установить фиксированную ширину

Как это не растягивается? http://screencast.com/t/2jvApHXel

F315 · August 17, 2011

Quote
Как это не растягивается? http://screencast.com/t/2jvApHXel

выложи, пожалуйста, свой код

не могу у себя найти ошибку

psywalker · August 17, 2011

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>min-width</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" type="text/css" href="css/reset.css"/>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        <!--[if lte IE 7]> 
        </style>
        <![endif]-->
        <style type="text/css">
        .minWidth{
        display: inline-block;          
       min-width:100px;
        height:100px;
        background-color:red;

        }
        table{
        width:100%;
        border: 1px solid green;

        }

        </style>
</head>

<body>  
<table>
        <tr>
                <td style="border: 2px solid green; width: 100px;">

                        <span class="minWidth">fssggddddddddddddddddddddddddddgggggggggggggggdfss sdfssdsd sfsdf sdfsddssdsdfsdsdds dsd sdssd sdd s d</span>
                </td>
                <td style="border: 2px solid blue;">
                        <span class="">Браузеры и стандарты. Вечная погоня. Из-за несоответствий стандартам, из-за разных способов рендеринга страниц большая часть времени веб-дизайнера уходит на то, чтобы загладить эти несоответствия (использовать хаки). В итоге, вместо эффективной работы, дизайнер вступает в противоестественные отношения с браузерами, теряя драгоценное время.  </span>
                </td>
        </tr>           
</body>
</html>

F315 · August 17, 2011

Psywalker , спасибо!!!

Я поняла, в чем фишка.

Такой спан растягивается по ширине максимального слова, т.е. до первого пробела. Поэтому у меня и умещалась строка, шириною 100px, а дальше переносилась на пробеле.

А у тебя есть очень длинное слово "fssggddddddddddddddddddddddddddgggggggggggggggdfss"

Добавила свойство white-space: nowrap

Все заработало

.minWidth{
        display: inline-block;          
       min-width:100px;
        height:100px;
        background-color:red;
        white-space: nowrap;       
        }

psywalker · August 17, 2011

On 8/17/2011 at 3:10 PM, F315 said:
Psywalker , спасибо!!!
Я поняла, в чем фишка.
Такой спан растягивается по ширине максимального слова, т.е. до первого пробела. Поэтому у меня и умещалась строка, шириною 100px, а дальше переносилась на пробеле.
А у тебя есть очень длинное слово "fssggddddddddddddddddddddddddddgggggggggggggggdfss"
Добавила свойство white-space: nowrap
Все заработало
.minWidth{
        display: inline-block;          
       min-width:100px;
        height:100px;
        background-color:red;
        white-space: nowrap;       
        }

Ну вот и отлично, наконец-то

Sign In

Пустой span c min-width в таблице. Проблемы с ИЕ7.

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information