У лисы проблема с float

volkoff · September 30, 2010

В общем проблема следующая:

Вот внешний вид страницы во всех браузерах, кроме лисы

структура самая простая:

крыша (roof), дивы left и main обернуты в div oblo. Внизу див flour.

И вот он в лисе ведет себя ни разу неадекватно:

Если выставить у подвала float:right

то в лисе получается такое:

(во всех других браузерах оно естесвенно уплывает вправо)

Такое чувство, будто лиса хочет подвал запихнуть в обложку к дивам left и main

ХТМЛ:

<div id="roof" align="center">1 крыша

</div>

<a href="opera:blank" class="button"> Кнопка 1 </a>

<a href="opera:blank" class="button"> Кнопка 2 </a>

<a href="opera:blank" class="button"> Кнопка 3 </a>

<a href="opera:blank" class="button"> Кнопка 4 </a>

<a href="opera:blank" class="button"> Кнопка 5 </a>

<a href="opera:blank" class="button"> Кнопка 6 </a>

</div>

</div>

</div> <!——————————————————-- обложка-->

подвал ! <br /><hr width="500px;">

</div>

CSS:

body /*общая*/

{

font-family:Verdana, Geneva, sans-serif;

background-image:url(img/bck2.jpg);

background-attachment:fixed;

}

#roof /*крыша*/

{

background-image:url(img/roof.png);

width:1024px;

height: 185px;

margin:auto;

margin-bottom: 5px;

}

#oblo /*обложка меню и main*/

{

margin:auto; /*центровка на странице*/

width:1022px;

height:700px;

border:solid #F00 1px;

}

#left /*меню*/

{

float:left;

width: 200px;

height:668px;

border:#00F solid 1px;

padding-top:30px;

}

#main

{

position:relative;

width:800px;

height:700px;

text-align:justify;

float:left;

padding-right: 5 px;

padding-left: 20px;

}

#flour

{

margin:auto;

width:1022px;

height: 62px;

border: solid #000 1px;

float:right;

Как сделать так, чтоб подвал себя и в лисе вел прилично ? Спасибо

Edited September 30, 2010 by volkoff

psywalker · September 30, 2010

Это не в лисе проблемы, а с верстальщиком. Подвалу поставь clear:both;

volkoff · September 30, 2010

пробовал - не помогает

если между дивом oblo и дивом flour впихнуть несколько тегов <br/> лиса просто опускает подвал чуть ниже

Edited September 30, 2010 by volkoff

psywalker · September 30, 2010

1) Покажи скриншот того, что должно получиться на выходе

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

padding-right: 5 px;

padding-left: 20px;

volkoff · September 30, 2010

Получится должно вот это

что собсна во всех браузрах и так получается

если убрать паддинги из main, получается следующее:

psywalker · September 30, 2010

Почему-бы например не сделать так

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3 Колонки</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body { min-width: 700px;}
	#wrap { overflow: hidden; width: 1200px; margin: 0 auto;}
	div.header,div.footer { height: 100px; background: #0F0; clear: both;}
	div.left { float: left; background: red; width: 300px;}
	div.content { overflow: hidden; background: blue;}


</style>

<!--[if IE 6]>
<style type="text/css">

	body {width:expression(document.documentElement.clientWidth < 960 ? "960px" : "auto");}

	div.left { margin-right: -3px;}


	div.content,div#wrap {zoom: 1;}
</style>
<![endif]-->

</head>

<body>
	<div id="wrap">
	<div class="header">HEAD</div>

		<div class="left">Left</div>
		<div class="content">Main</div>

	<div class="footer">FOOT</div>
	</div>		

</body>
</html>

SelenIT · September 30, 2010

[offtop]однако хорошая иллюстрация к тезису капитана Врунгеля о важности правильных наименований: назвали общий контейнер "обло" - оно и получилось обло, озорно, стозевно и т.д. по тексту (хорошо хоть не залаяло). И строить дом с крышей на фундаменте из муки (flour) вместо хотя бы цемента тоже неосмотрительно - при малейшей активности одной-единственной мышки что-нибудь обязательно съедет, или сам фундамент, или крыша...

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

volkoff · September 30, 2010

Просто хочется разобраться, почему лиса пихает подвал в див oblo.

Ибо если убрать у тега main float:left, то в лисе подвал опискается вниз, но если присмотеться к границам

то видно что подвал все равно находится в диве oblo

psywalker · September 30, 2010

Потому-что он прижимается к флоат-блокам.

volkoff · September 30, 2010

но ведь он находится ВНЕ блока, в ктором применено свойсво float.

Пдвал стоит под блоком oblo со свойствами

#oblo

{

margin:auto;

width:1022px;

height:700px;

border:solid #F00 1px;

}

psywalker · September 30, 2010

Это не важною Блок #oblo схлопывается, так как в нём находятся флоат-блоки, а подвал естественно поднимается наверх, как можно выше и обтекает правый или левый флоат блок.

Кстати SelenIT прав. Назвал ты свои блоки смешно)). Первый раз вижу такие названия.

volkoff · September 30, 2010

Просто хотел сам все сделать с нуля. Когда вырисовывал тестировал на опере и гугле. Да и тут упомянули что без надобности <body> лучше не трогать

Там все в порядке

offtop —— ЗЫ: в названии блоков матюки были. Это для для тотго чтоб задать вопрос по быстрому переименовал —— offtop

Кстати бета версия лисы (4. там с чем-то) отображает нормльно, без глюков

Edited September 30, 2010 by volkoff

volkoff · September 30, 2010

Так !

Вручную перенабрав весь документ нашел причину !

Комментарии! (кто бы мог подуамть ?)

Короче вместо стандартного тега 

Я вписывал <!—————————————————— каммент --> чтоб смотрибельнее было

что и ломало всю структуру в лисе.

Только постирал все камменты - все стало на свои места тютелька в тютельку.

Всем спасибо !

ЗЫ: йа дурак

Edited September 30, 2010 by volkoff

psywalker · September 30, 2010

Этого не может быть, комментарии после <!-- можно писать что угодно, хоть 1000 тире. Дело у тебя в коде самом.

volkoff · September 30, 2010

Тоже не верил, но тем не менее:

Если в хтмл написать

то в лисе мы имеем:

Лиса дефисы в камменте хавает как то неправильно. (версия 3.6.10)

Edited September 30, 2010 by volkoff

psywalker · September 30, 2010

Всё равно не верю. Сделай мне отдельную страницу с примером.

Vlad · September 30, 2010

Этого не может быть, комментарии после <!-- можно писать что угодно, хоть 1000 тире. Дело у тебя в коде самом.

Нельзя писать тире в комментарии, особенно две штуки, не по спецификации, вот FF и возмущался.

psywalker · September 30, 2010

Нельзя писать тире в комментарии, особенно две штуки, не по спецификации, вот FF и возмущался.

Да, видимо и правда нельзя. Но странно, никогда не имел с этим проблем.

clavin · September 30, 2010

Я погуглил и нашёл ссылку на это правило про коментарии

http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.4

psywalker · September 30, 2010

Я погуглил и нашёл ссылку на это правило про коментарии
http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.4

ага, спс

Sign In

У лисы проблема с float

Question

Link to comment

Share on other sites

19 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

Join the conversation

Обсуждения

Important Information