IE6 и Float...

XiBOR · December 10, 2009

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Tetro</title>
</head>

<body>
<div id="wrap">

	<div id="header">
	<img src="img/head.png"> 
	</div>

	<div id="main" class="clearfix">

		<div id="content">

		</div>

		<div id="side">

		</div>

	</div>

</div>

<div id="wrap2"></div>
<div id="footer"></div>

</body>
</html>

img/head.png = (ширина 400, высота 100)

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}
body > #wrap2 {height: auto; min-height: 100%;}
body {width: 1000px; margin: 0px auto;}

#wrap   {width: 900px; float: left;  background: #fff url(img/bg.jpg);}
#header {width: 400px; margin: 0px auto; border: 0px solid black;}
#main   {padding-bottom: 150px;}
#wrap2  {width: 100px; float: right; background: #fff url(img/bg.r.jpg);}

#footer {position: relative;
	margin-top: -150px;
	height: 150px;
	clear:both;} 

.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}

Способ приклеивания футера брал тут

Так должно отображаться... http://www.valar.ru/upload/jpg/1209/1260478096_untitled3.jpg

**Если есть другие решения того что я задумал, буду рад!)

Edited December 10, 2009 by XiBOR

psywalker · December 10, 2009

Дружище, для тебя у нас всё есть http://psywalker.ru/Forum/shadow/Untitled-1.html

XiBOR · December 10, 2009

Читал ту тему когда нужен был футер)

А сейчас проблема не в том) Ээээ....

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

psywalker · December 10, 2009

Читал ту тему когда нужен был футер)
А сейчас проблема не в том) Ээээ....
В общем, справа мне нужно поля у какбы тетради сделать)

Чего ты там читал, код?

Поля делай дивом, прижми его к правой стороне абсолютом и растяни сверху вниз, топ и боттом короче. Далее повесь на него фон твой и всё.

XiBOR · December 10, 2009

#wrap2 {width: 100px; float: right; background: #fff url(img/bg.r.jpg);}

вот с ним что сделать))

Светлана Г. · December 10, 2009

Дружище, для тебя у нас всё есть http://psywalker.ru/Forum/shadow/Untitled-1.html

В IE7 при масштабировании получается так:

Как решить эту проблему?

psywalker · December 10, 2009

#wrap2 {width: 100px; float: right; background: #fff url(img/bg.r.jpg);}
вот с ним что сделать))

Я разве что нибудь говорил про Флоат?

В IE7 при масштабировании получается так:
Как решить эту проблему?

Ссылка не рабочая

mishka · December 10, 2009

В IE7 при масштабировании получается так:
Как решить эту проблему?

обновить до 8го, а лучше до фф, оперы, хрома....

Edited December 10, 2009 by mishka2

psywalker · December 10, 2009

обновить до 8го, а лучше до фф, оперы, хрома....

Блин, а у меня не отображается

Светлана Г. · December 10, 2009

обновить до 8го, а лучше до фф, оперы, хрома....

Полностью согласна, но читая форум, вижу, что не только пользователи, но и вы - разработчики, всё же не забываете и про IE6, IE7 ...

psywalker · December 10, 2009

Полностью согласна, но читая форум, вижу, что не только пользователи, но и вы - разработчики, всё же не забываете и про IE6, IE7 ...

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

Светлана Г. · December 10, 2009

Извините, поправила (случайно удалила изображение).

Edited December 10, 2009 by Светлана Г.

psywalker · December 10, 2009

Извините, поправила (случайно удалила изображение).

Прости, а что значит - Не масштабируется? Я проверял в ИЕ7, у меня всё хорошо. Ставил самый большой размер шрифта.

Светлана Г. · December 10, 2009

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

Поэтому, я как разработчик (начинающий) и смотрю в IE7

Прости, а что значит - Не масштабируется? Я проверял в ИЕ7, у меня всё хорошо. Ставил самый большой размер шрифта.

При масштабировании текст выползает (справа).

Светлана Г. · December 10, 2009

Добавила в div.wrap {padding:0 2em;}

Решает проблему, правда справа отступ всё равно стремиться быть меньше, чем слева.

Clayton · December 11, 2009

обновить до 8го, а лучше до фф, оперы, хрома....

8-й, конечно лучше чем 6-й и 7-й, до сегодняшнего дня я вообще был доволен, пока не начал косяки находить. Сколько их еще будет — неизвестно, в одном только лишний раз убедился: IE — он и в африке IE, неважно 6-й, 7-й или 8-й — косяки найдутся в любом)

Светлана Г. · December 11, 2009

8-й, конечно лучше чем 6-й и 7-й, до сегодняшнего дня я вообще был доволен, пока не начал косяки находить. Сколько их еще будет — неизвестно, в одном только лишний раз убедился: IE — он и в африке IE, неважно 6-й, 7-й или 8-й — косяки найдутся в любом)

IE проиграл войну браузеров...

XiBOR · December 11, 2009

Поля делай дивом, прижми его к правой стороне абсолютом и растяни сверху вниз, топ и боттом короче. Далее повесь на него фон твой и всё.

#wrap2 {width: 100px; float: right; background: #fff url(img/bg.r.jpg);}

Вот... что значит прижать его абсолютом, и растянуть сверху вниз топ и боттом?

XiBOR · December 11, 2009

Кстати вот этот макет странно повёл себя в опере.

В Netscape, IE и Google Chrome footer прижат к низу, в опере же он распологаеться где закончился текст.

Опера:

Версия:10.10

Сборка:1893

Edited December 11, 2009 by XiBOR

mishka · December 11, 2009

Кстати вот этот макет странно повёл себя в опере.
В Netscape, IE и Google Chrome footer прижат к низу, в опере же он распологаеться где закончился текст.
Опера:
Версия:10.10
Сборка:1893

Это давно известный баг оперы :rolleyes: . Никак не пофиксят...

psywalker · December 11, 2009

Это давно известный баг оперы . Никак не пофиксят...

Да, я им даже хотел в саппорт жалобу писать, когда вышла 10-я Опера

XiBOR · December 14, 2009

C той проблемой разобрался, спасибо.

Решил писать тут чтобы не флудить..

В общем суть проблемы в Гугль Хроме и Сафари, если я не ошибаюсь они работают одинаково, в плане CSS и HTML?

#wrap   {width: 1000px; 
			  background: #fff url(img/bg.jpg);
	  height: 100%;
	  margin: 0 auto;
	  position: relative;}

В общем bg.jpg виден только на открытой странице, если страница длинная, и есть вертикальный скролл, то при прокрутке вниз bg там не будет. Кто нибудь сталкивался? Как исправить это?

И ещё... слабо разбираюсь, но:

С вот этой строчкой <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Меня идеально слушаеться IE(6) и делает всё как говорю, но Сафари и ГуглХром, что то делают с <td>, точнее не что то, а негласно задают им минимальную height примерно в 20px, и width для <td> через CSS неработает. А когда этой строчки нету, "<!DOCT..." тогда всё везде отлично, только IE перестаёт понимать margin: 0 auto;. Точнее может он и понимает, но для него это уже значит не Отцентровать а может быть что то другое.

psywalker · December 14, 2009

C той проблемой разобрался, спасибо.
Решил писать тут чтобы не флудить..
В общем суть проблемы в Гугль Хроме и Сафари, если я не ошибаюсь они работают одинаково, в плане CSS и HTML?
#wrap   {width: 1000px; 
			  background: #fff url(img/bg.jpg);
	  height: 100%;
	  margin: 0 auto;
	  position: relative;}
В общем bg.jpg виден только на открытой странице, если страница длинная, и есть вертикальный скролл, то при прокрутке вниз bg там не будет. Кто нибудь сталкивался? Как исправить это?
И ещё... слабо разбираюсь, но:
С вот этой строчкой <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Меня идеально слушаеться IE(6) и делает всё как говорю, но Сафари и ГуглХром, что то делают с <td>, точнее не что то, а негласно задают им минимальную height примерно в 20px, и width для <td> через CSS неработает. А когда этой строчки нету, "<!DOCT..." тогда всё везде отлично, только IE перестаёт понимать margin: 0 auto;. Точнее может он и понимает, но для него это уже значит не Отцентровать а может быть что то другое.

1) Если у html и body изначально задать высоту 100%, а контейнеру минималку 100%, то БГ будет виден всегда.

2) Доктайп задавай всегда и везде.

mishka · December 14, 2009

#wrap {width: 1000px;
background: #fff url(img/bg.jpg);
height: 100%;
margin: 0 auto;
position: relative;}

Тут случайно высота с минимальной высотой не перепутанны?

XiBOR · December 14, 2009

html, body, #wrap {height: 100%;}

Вот это у меня в самом верху

1) Если у html и body изначально задать высоту 100%, а контейнеру минималку 100%, то БГ будет виден всегда.
2) Доктайп задавай всегда и везде.

1)Т.е. высота у хтмл и боди изначально 100%, твой совет не действенен.

2) Обьясни зачем он, и почему он включает\отключает некоторые параметры? Или как он там действует?

psywalker · December 14, 2009

html, body, #wrap {height: 100%;}
Вот это у меня в самом верху
1)Т.е. высота у хтмл и боди изначально 100%, твой совет не действенен.
2) Обьясни зачем он, и почему он включает\отключает некоторые параметры? Или как он там действует?

1) Нужно делать так: html, body {height: 100%;} #wrap {min-height: 100%;}

2) Отсутствие Доктайпа переключает браузер в обычный, старый режим и он не в состоянии оценить, по какому принципу ему отображать сайт и поэтому делает это на своё усмотрение.

Sign In

IE6 и Float...

Question

Link to comment

Share on other sites

34 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

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