Пропадает содержимое блока

@staroksi · Регистрация: 01.10.2012

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

Добрый день всем, кто читает эту тему. Возникли некоторые проблемы при верстке плавающими блоками: во-первых, в ранних версиях IE (6,7) не отображается содержимое блока #menu; во-вторых, между блоками #ver1 и #ver2 слишком большое расстояние (опять же, только в раннем IE). В других браузерах данных проблем не наблюдается. Может, кто-то сможет подсказать, в чём ошибка?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<html>
<head>
    <style media="all" type="text/css">
      @import "block.css";
    </style>
    <title>Плавающие блоки</title>
</head>
 
<body>
    <div id="container">
        <div id="header">
            <div id="extra">
                <marquee>Тут могла быть ваша реклама</marquee>
            </div>
        </div>
 
        <div id="menu">
            <b>Варианты разметки</b><br/>
            - <a href="table.html">таблицами</a><br/>
            - <a href="block.html">блоками</a><br/>
            - <a href="inline.html">inline-блоками</a><br/>
            <b>Дополнительно</b><br/>
            - <a href="1.html">рисунок</a><br/>
            - <a href="2.html">форма</a>
        </div>
 
        <div id="content">
            <div id="ver1">
                <center><h3>Процесс разработки Web-сайта</h3></center>
 
                <p>Сегодня, путешествуя по Internet, можно найти много очень
                хорошо выполненных сайтов, которые быстро загружаются,
                привлекательны на вид, имеют четко разграниченную по разделам
                информацию и удобные функции навигации. Такие сайты просто
                приглашают вас посетить их, расслабиться, задержаться на
                некоторое время, развлечься и узнать что-то новое...</p>
            </div>
 
            <div id="ver2">
                <center><h4 style="font-style: italic">6. Не пытайтесь разместить все
                на одной странице</h4></center>
 
                <p>Будьте внимательны, не перегружайте свои страницы слишком
                большим количеством информации. Все мы знаем, что писатели
                любят писать, а дизайнеры-графики — рисовать эффектные
                картинки. </p>
            </div>
 
            <div id="ver3">
               *
            </div>
            
        </div>
 
        <div id="footer">
            Лабораторная работа №1 по WEB-программированию
        </div>
    </div>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
p {
    text-indent: 20px;
    text-align: justify;
}
 
A {
    text-decoration: none; 
   } 
 
A:hover { 
    color: white; 
} 
   
#container {
    width: 900px;
    margin: 0 auto;
    background: url(block.png) repeat-y;
}
 
#header {
    background-color: gold;
    height: 70px;
    padding-top: 10px;
}
 
#extra {
    background-color: #ffffff;
    width: 300px;
    margin-top: 10px;
    margin-left: 20px;
    padding: 8px;
}
 
#menu {
    width: 160px;
    float: left;
    padding: 20px;
    position: absolute;
}
 
#content {
    width: 700px;
    float: right;
    overflow: hidden;
    margin-left: 200px;
    margin-top: 5px;
    margin-bottom: 5px;
}
 
#ver1 { 
    background-color: white;
    width: 47%;    
    float: left;
    padding: 10px;
    margin: 5px;
}
 
#ver2 {
    background-color: #B0E0E6;
    width: 47%; 
    float: right;
    padding: 6px;
}
 
#ver3 { 
    background-color: #FFE4E1;
    width: 47%;    
    float: left;
    clear: left;
    padding: 10px;
    margin: 5px;
}
 
#footer {
    background-color: gold;
    text-align:center;
    clear:both;
    padding: 8px;
}

Stopy · 14.09.2014, 00:25

ie6,7 уже никто не поддерживает, в их пору еще наверное и блочной версткой не шитко пользовались, забудь. целься на ie8+

@Crystal-3 · 14.09.2014, 01:01

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

не отображается содержимое блока #menu

убрать строку и меню появится

CSS
1
2
3
#content {
     margin-left: 200px;
}

А вот по поводу второго вопроса, ничего не посоветую. Это ж ИЕ...
А может ну их этих динозавров?

@staroksi · 14.09.2014, 09:09 **[ТС]**

Cпасибо большое за ответ - всё заработало

Я бы сама и не думала о IE 6,7, но препод требует, чтобы сайт везде адекватно отображался. Смешно, но придется и inline блоки каким-то образом делать кроссбраузерными (в задании нужно одну страницу сделать тремя вёрстками).

Сообщение от Crystal-3

А вот по поводу второго вопроса, ничего не посоветую. Это ж ИЕ...

Кстати нашла (вроде как) ответ на этот вопрос - это таки баг IE, известный как Двойной внешний отступ элемента (IE Double Margin Float Bug). И исправляется это как раз таки inline блоками

Stopy · 14.09.2014, 12:30

staroksi, а вообще если тебе какой-нибудь препод задаст сделать сайт для ie7- то сразу делай таблицами.

@staroksi · 14.09.2014, 22:12 **[ТС]**

Stopy, в том то и дело, что нужно одну страницу сделать тремя разными способами: таблицами, блоками и с использованием inline блоков.

@Сергей Кротов · 15.09.2014, 00:30

сделать сайт для ie7- то сразу делай таблицами. - а это очень хороший выход. Спасибо

Stopy · 15.09.2014, 00:56

Сергей Кротов, надеюсь это не сарказм?)

@zackuz · 15.09.2014, 10:36

Я бы для старых ие подгружал css-файл с фиксированной или табличной версткой.

@Сергей Кротов · 15.09.2014, 12:29

Stopy, Нет, что Вы, я серьезно. Получается это очень хороший способ. Если клиенту так необходима поддержка IE 6,7,8 то лучше северсталь таблицами.

Stopy · 15.09.2014, 16:30

zackuz, какой это css нужно подгрузить, чтобы блочную верстку заменить табличной? если на то пошло, то если браузер ie8- то делать переадресацию на site/old_browsers.html где тот же сайт на табличной верстке. А самый адекватный вариант - делать заглушку, но вопрос топика не в этом)

@zackuz · 15.09.2014, 17:05

Stopy, Да, тут я немного маху дал. Но display:table; - никто не отменял. Через особые комментарии можно подменять части html.
 таким образом оборачивая дивы в таблицу.

Stopy · 15.09.2014, 17:17

zackuz, наговнокодить всегда успеем)

@zackuz · 15.09.2014, 17:31

Ну, тогда вооружайся. zoom:1; Учи что такое hasLayout, мега приемы _height:0; И постарайся не наделать говна. )

Stopy · 15.09.2014, 17:35

zackuz, или не заниматься херней и верстать под ie8-9+ и ставить заглушки

@zackuz · 15.09.2014, 18:09

Начни с того, что <!DOCTYPE html> отсутствует. Ни одного display в css. Разберись с hasLayout? Тогда все станет на свои места.

Добавлено через 20 минут
для контента убери margin-left

@Lena-T-1981 · 15.09.2014, 20:42

А может уже стоит отказаться от windows 3.11, windows 95 и от старых браузеров i.e. 3,4,5,6,7,8 от них одни проблемы как в работе, так и в верстке для них.

Новые блоги и статьи Все статьи Все блоги /
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .

Stopy 0 / 0 / 0 Регистрация: 13.09.2014 Сообщений: 26
	14.09.2014, 00:25
	ie6,7 уже никто не поддерживает, в их пору еще наверное и блочной версткой не шитко пользовались, забудь. целься на ie8+ 0

Stopy 0 / 0 / 0 Регистрация: 13.09.2014 Сообщений: 26
	14.09.2014, 12:30
	staroksi, а вообще если тебе какой-нибудь препод задаст сделать сайт для ie7- то сразу делай таблицами. 0

@staroksi 0 / 0 / 0 Регистрация: 01.10.2012 Сообщений: 19
	14.09.2014, 22:12 [ТС]
	Stopy, в том то и дело, что нужно одну страницу сделать тремя разными способами: таблицами, блоками и с использованием inline блоков. 0

@Сергей Кротов 0 / 0 / 0 Регистрация: 13.09.2014 Сообщений: 13
	15.09.2014, 00:30
	сделать сайт для ie7- то сразу делай таблицами. - а это очень хороший выход. Спасибо 0

Stopy 0 / 0 / 0 Регистрация: 13.09.2014 Сообщений: 26
	15.09.2014, 00:56
	Сергей Кротов, надеюсь это не сарказм?) 0

@zackuz 18 / 18 / 5 Регистрация: 03.09.2014 Сообщений: 66
	15.09.2014, 10:36
	Я бы для старых ие подгружал css-файл с фиксированной или табличной версткой. 0

@Сергей Кротов 0 / 0 / 0 Регистрация: 13.09.2014 Сообщений: 13
	15.09.2014, 12:29
	Stopy, Нет, что Вы, я серьезно. Получается это очень хороший способ. Если клиенту так необходима поддержка IE 6,7,8 то лучше северсталь таблицами. 0

Stopy 0 / 0 / 0 Регистрация: 13.09.2014 Сообщений: 26
	15.09.2014, 16:30
	zackuz, какой это css нужно подгрузить, чтобы блочную верстку заменить табличной? если на то пошло, то если браузер ie8- то делать переадресацию на site/old_browsers.html где тот же сайт на табличной верстке. А самый адекватный вариант - делать заглушку, но вопрос топика не в этом) 0

@zackuz 18 / 18 / 5 Регистрация: 03.09.2014 Сообщений: 66
	15.09.2014, 17:05
	Stopy, Да, тут я немного маху дал. Но display:table; - никто не отменял. Через особые комментарии можно подменять части html. <!--[if ie]>что угодно<![endif]--> таким образом оборачивая дивы в таблицу. 0

Stopy 0 / 0 / 0 Регистрация: 13.09.2014 Сообщений: 26
	15.09.2014, 17:17
	zackuz, наговнокодить всегда успеем) 0

@zackuz 18 / 18 / 5 Регистрация: 03.09.2014 Сообщений: 66
	15.09.2014, 17:31
	Ну, тогда вооружайся. zoom:1; Учи что такое hasLayout, мега приемы _height:0; И постарайся не наделать говна. ) 0

Stopy 0 / 0 / 0 Регистрация: 13.09.2014 Сообщений: 26
	15.09.2014, 17:35
	zackuz, или не заниматься херней и верстать под ie8-9+ и ставить заглушки 0

@zackuz 18 / 18 / 5 Регистрация: 03.09.2014 Сообщений: 66
	15.09.2014, 18:09
	Начни с того, что <!DOCTYPE html> отсутствует. Ни одного display в css. Разберись с hasLayout? Тогда все станет на свои места. Добавлено через 20 минут для контента убери margin-left 0

@Lena-T-1981 5 / 5 / 0 Регистрация: 12.09.2014 Сообщений: 22
	15.09.2014, 20:42
	А может уже стоит отказаться от windows 3.11, windows 95 и от старых браузеров i.e. 3,4,5,6,7,8 от них одни проблемы как в работе, так и в верстке для них. 0