Не подгоняется изображение под ячейку

@Demon83ad · Регистрация: 10.09.2009

Author24 — интернет-сервис помощи студентам

суть такая имеется код...

HTML5

...
<style>.table_border{border:20px #B3C11B ridge;border-spacing:0px;table-layout:fixed;overflow:hidden;margin:auto;}
.left{background-color:#D4ABAB; border-right:1px solid #424242;background-image:url(img/Head.jpg);background-size:cover;}
body,p,td,img {padding:0px; margin:0px;}
</style>
...
<table width="800" bgcolor="#DCDCDC" class="table_border">
  <tr>
    <td><img src="img/Head.jpg" width="800" height="200" alt=""/></td>
  </tr>
  <tr>
    <td valign="top">
    <table width="100%">
      <tr>
        <td width="182" valign="top" >&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td bgcolor="#BD282B"><img src="img/down.jpg" width="800" height="50" alt=""/></td>
  </tr>
</table>

В стилях напихал всё что смог найти, изначально было только padding:0px; border-spacing:0px;, пробовал cellpadding="0" cellspacing="0" в таблицу добавлять... но... внизу картинки, между картинкой и таблицей, всё равно есть промежуток в несколько пикселов, в обоих случаях, в нём виден фоновый цвет, но почему он там? Как убрать этот промежуток?

@Demon83ad · 09.11.2013, 15:45 **[ТС]**

Да для пущей понятности результат работы кода... под нижней картинкой особенно видно, красную полосу фона, как подогнать ячейку под изображение?

@Игорь[Igor] · 09.11.2013, 16:11

Что-то у меня красной полосы не получилось

@Demon83ad · 09.11.2013, 17:30 **[ТС]**

мм... очень странно... так ну делаю я это в dreamweaver cc, его пред просмотр показывает эту полосу, то есть полосы, в верхнем изображении тоже, просто там фон общий и не так заметно, скрин который я прилепил это хром, та же фигня в опере, естественно всё проверяется на тестовом локальном сервере апач, так как я php учу, а встрял с html =))... если у вас полос нет то я даже не знаю что и думать... гм... попробую написать код в блокноте =)), мало ли что...

Добавлено через 38 минут
Так, сменил расширение файла на html, всё равно там php кода ещё нет, открыл на прямую браузером, та же фигня в опере, хром вообще показал только белый лист, закинул этот файл на укоз для проверки, всё ОК... блин, нет ну блин же... полосы пропали, но возник вопрос...
Между локальным сервером и хостингом есть разница в отображении кода????? да ладно сервером, просто браузером открыл тоже полосы видны, на хостинге нет о_О.

@Игорь[Igor] · 09.11.2013, 17:51

Значит какие то еще символы в коде присутствуют, а в хостинге повидимому редактируеш через панель не заливая страничку?

@Demon83ad · 09.11.2013, 18:31 **[ТС]**

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

Добавлено через 9 минут
Если интересно вот этот файл на хостинге, на локалхосте один в один, но отображается с полосками.

Добавлено через 9 минут
По поводу доп символов, скопировал код в блокнот, теоретически всё лишнее он должен был отсечь, однако эффект тот же, полосы как на локалхост так и на прямую, в этот раз пробовал в IE. Странно всё это...

@Игорь[Igor] · 09.11.2013, 18:40

Выложи сюда сам файл

@Demon83ad · 09.11.2013, 19:05 **[ТС]**

ну вот все файлы...

@Игорь[Igor] · 09.11.2013, 20:17

HTML5

1	<!--doctype html-->

@Demon83ad · 09.11.2013, 20:28 **[ТС]**

Сообщение от Игорь[Igor]

HTML5

1	<!--doctype html-->

Шайтанама... одного не понял как это влияет??? Ну то есть дримвьювер автоматом генерит этот код, как бы он теоретически должен знать что он делает =), я честно говоря не знаю как должна выглядеть конкретно эта строчка, блин надо погуглить...

@Игорь[Igor] · 09.11.2013, 20:38

Просто закомментированная строка

@Demon83ad · 09.11.2013, 21:27 **[ТС]**

То что вы закомментировали строку это я понял, я не понял почему это исправило проблему! Прочитал несколько статей на тему доктайп, в том виде в котором его пишет дрим

HTML5

1	<!DOCTYPE HTML>

. это стандарт, как я понял для html 5, для всех типов документов, других вариантов для 5 я не нашел. а вот для html4.01 есть несколько вариантов, строгий при котором отображаются полосы, и переходный который поддерживает устаревшие теги, так вот при переходном док тайп полоски не отображаются!

Получается, что. то ли я написал что то устаревшее, хотя приом тут полоски не ясно, то ли дело не в том что тег устарел, а в том, что иначе обрабатывается... так же я выяснил из статей, что не писать доктайп это вери бед =)).

Вот мне и любопытно, что я написл такого что для html5 например, или для html4.01 строгий, не очень гуд???

@newJS · 09.11.2013, 21:35

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

но... внизу картинки, между картинкой и таблицей, всё равно есть промежуток в несколько пикселов

картинка есть строчный элемент и у нее как у любого символа есть место внизу строки, лечится так, достаточно (на выбор) прописать для img или display:block или vertical-align:top/middle/bottom

@Academik · 09.11.2013, 21:53

Про display: block; не знаю, но вот float: left; поможет сто процентов.

@Demon83ad · 09.11.2013, 22:16 **[ТС]**

Эм... спс, vertical-align помог, самое смешное что я этот элемент пользую не редко, но вот что картинка имеет нижний отступ символов, о_О не знал...
Одного не пойму, почему доктайп влияет на наличие или отсутствие этого самого промежутка под картинкой??? Или она строчным элементом недавно стала о_О.

Добавлено через 8 минут
35cm, а как обтекание текстом это исправляет вообще не ясно =), можно по подробней? Поскольку ели имеет место быть нижний отступ, как говорит newJS, то обтекание текстом картинки его убирать вроде как не должно...

@newJS · 10.11.2013, 07:55

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

можно по подробней?

Сообщение от 35cm

Про display: block; не знаю, но вот float: left; поможет сто процентов.

а флоат во что превращает элемент? то то же...

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

почему доктайп влияет

Почему так важен DOCTYPE
есть еще одна замечательная пакость от ИЕ, не знаю как сейчас, но старые ие в упор не видели доктайп если он находился не в самой первой строке html, об этой пакости можно найти в книге
Артемий Ломов
HTML, GSS, СКРИПТЫ:
практика создания сайтов

@Academik · 11.11.2013, 17:50

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

а флоат во что превращает элемент? то то же...

Ну в блок естественно, просто порекомендовал проверенный мной способ. Это удобно, так как всё равно картинке обтекание в 99% случаях указываем, так сказать убиваем двух зайцев.

@newJS · 11.11.2013, 21:14

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

@Academik · 15.11.2013, 18:05

Согласен что проблемный, а в чём он не кроссбраузерный? В каком браузере и его версии он не работает?

@newJS · 15.11.2013, 21:13

http://webformyself.com/tajna-svojstva-float-css/
http://stroemvmeste.ru/css/poplavki.html

Сообщение от 35cm

Согласен что проблемный

поэтому и не кроссбраузерный, не было бы проблем, не было бы и разговоров

@Demon83ad 0 / 0 / 0 Регистрация: 10.09.2009 Сообщений: 21
	09.11.2013, 15:45 [ТС]	2
	Да для пущей понятности результат работы кода... под нижней картинкой особенно видно, красную полосу фона, как подогнать ячейку под изображение? Миниатюры 0

@Игорь[Igor] 726 / 478 / 130 Регистрация: 24.12.2008 Сообщений: 3,924
	09.11.2013, 16:11	3
	Что-то у меня красной полосы не получилось 0

@Demon83ad 0 / 0 / 0 Регистрация: 10.09.2009 Сообщений: 21
	09.11.2013, 17:30 [ТС]	4
	мм... очень странно... так ну делаю я это в dreamweaver cc, его пред просмотр показывает эту полосу, то есть полосы, в верхнем изображении тоже, просто там фон общий и не так заметно, скрин который я прилепил это хром, та же фигня в опере, естественно всё проверяется на тестовом локальном сервере апач, так как я php учу, а встрял с html =))... если у вас полос нет то я даже не знаю что и думать... гм... попробую написать код в блокноте =)), мало ли что... Добавлено через 38 минут Так, сменил расширение файла на html, всё равно там php кода ещё нет, открыл на прямую браузером, та же фигня в опере, хром вообще показал только белый лист, закинул этот файл на укоз для проверки, всё ОК... блин, нет ну блин же... полосы пропали, но возник вопрос... Между локальным сервером и хостингом есть разница в отображении кода????? да ладно сервером, просто браузером открыл тоже полосы видны, на хостинге нет о_О. 0

@Игорь[Igor] 726 / 478 / 130 Регистрация: 24.12.2008 Сообщений: 3,924
	09.11.2013, 17:51	5
	Значит какие то еще символы в коде присутствуют, а в хостинге повидимому редактируеш через панель не заливая страничку? 0

@Demon83ad 0 / 0 / 0 Регистрация: 10.09.2009 Сообщений: 21
	09.11.2013, 18:31 [ТС]	6
	я просто файлы закинул в папку и всё, ничего кроме расширения файла не менял, содержимое файла вообще не трогал. В опере открыл один файл с хостинга один с локалхоста, при этом файлы идентичны, и на хостинге нет полос, а на локалхосте есть. Добавлено через 9 минут Если интересно вот этот файл на хостинге, на локалхосте один в один, но отображается с полосками. Добавлено через 9 минут По поводу доп символов, скопировал код в блокнот, теоретически всё лишнее он должен был отсечь, однако эффект тот же, полосы как на локалхост так и на прямую, в этот раз пробовал в IE. Странно всё это... 0

@Игорь[Igor] 726 / 478 / 130 Регистрация: 24.12.2008 Сообщений: 3,924
	09.11.2013, 18:40	7
	Выложи сюда сам файл 0

@Игорь[Igor] 726 / 478 / 130 Регистрация: 24.12.2008 Сообщений: 3,924
	09.11.2013, 20:38	11
	Просто закомментированная строка 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	09.11.2013, 21:35	13
	Сообщение от DemonPHPnoob но... внизу картинки, между картинкой и таблицей, всё равно есть промежуток в несколько пикселов картинка есть строчный элемент и у нее как у любого символа есть место внизу строки, лечится так, достаточно (на выбор) прописать для img или display:block или vertical-align:top/middle/bottom 1

@Academik 1025 / 678 / 295 Регистрация: 04.04.2013 Сообщений: 2,709
	09.11.2013, 21:53	14
	Про display: block; не знаю, но вот float: left; поможет сто процентов. 1

@Demon83ad 0 / 0 / 0 Регистрация: 10.09.2009 Сообщений: 21
	09.11.2013, 22:16 [ТС]	15
	Эм... спс, vertical-align помог, самое смешное что я этот элемент пользую не редко, но вот что картинка имеет нижний отступ символов, о_О не знал... Одного не пойму, почему доктайп влияет на наличие или отсутствие этого самого промежутка под картинкой??? Или она строчным элементом недавно стала о_О. Добавлено через 8 минут 35cm, а как обтекание текстом это исправляет вообще не ясно =), можно по подробней? Поскольку ели имеет место быть нижний отступ, как говорит newJS, то обтекание текстом картинки его убирать вроде как не должно... 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	10.11.2013, 07:55	16
	Сообщение от DemonPHPnoob можно по подробней? Сообщение от 35cm Про display: block; не знаю, но вот float: left; поможет сто процентов. а флоат во что превращает элемент? то то же... Сообщение от DemonPHPnoob почему доктайп влияет Почему так важен DOCTYPE есть еще одна замечательная пакость от ИЕ, не знаю как сейчас, но старые ие в упор не видели доктайп если он находился не в самой первой строке html, об этой пакости можно найти в книге Артемий Ломов HTML, GSS, СКРИПТЫ: практика создания сайтов 1

@Academik 1025 / 678 / 295 Регистрация: 04.04.2013 Сообщений: 2,709
	11.11.2013, 17:50	17
	Сообщение от newJS а флоат во что превращает элемент? то то же... Ну в блок естественно, просто порекомендовал проверенный мной способ. Это удобно, так как всё равно картинке обтекание в 99% случаях указываем, так сказать убиваем двух зайцев. 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	11.11.2013, 21:14	18
	Флоат элемент проблемный и не всегда кроссбрузерный, везде где от него можно отказаться, это следует делать. 0

@Academik 1025 / 678 / 295 Регистрация: 04.04.2013 Сообщений: 2,709
	15.11.2013, 18:05	19
	Согласен что проблемный, а в чём он не кроссбраузерный? В каком браузере и его версии он не работает? 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	15.11.2013, 21:13	20
	http://webformyself.com/tajna-svojstva-float-css/ http://stroemvmeste.ru/css/poplavki.html Сообщение от 35cm Согласен что проблемный поэтому и не кроссбраузерный, не было бы проблем, не было бы и разговоров 1