Непонятный глюк в Opera и Safari

Verder · March 15, 2010

Стандартная сетка, три колонки резина, низ прекрасно прижат без всяких абсолютов.

В IE6, 7, 8, FF все отлично.

Но проявился странный глюк в Опере и Safari под Windows (В Safari под мак все отлично).

Глюк в том, что низ прижимается, но при уменьшении/увеличении окна по вертикали странно прыгает и потом становится на положенное место. Не критично, но неприятно. До обновления браузеров такого не было.

<!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=WINDOWS-1251" />
		<title>Project</title>
		<style type="text/css">		

			* {
				margin: 0;
				padding: 0;
			}

			body, html {
				width: 100%;
				height: 100%;
			}

			#wrapper {
				width: 100%;
				min-width: 980px;
				width: expression(document.body.clientWidth > 1000? '100%': '1000px');
							height:100%;
							min-height:100%;
							margin-bottom:-200px;
						}

						#page-head {
							height:200px;
							background:#e8e8e8;;
						}

						#leftcol-wrap {
							width:30%;
							float:left;
							padding-left:30px;
							padding-top:50px;
						}

						#rightcol-wrap {
							width:30%;
							float:right;
							padding: 50px 30px 0 0;
						}

						#middle-wrap {
							width: auto;
							margin-left:33%;
							margin-right:33%;
							padding-top: 50px;
						}

						.clear {
							clear:both;
							_height:250px;
						}

						#page-bottom {
							height:200px;
							background:#c8c8c8;;
							clear:both;
						}


		</style>
	</head>
	<body>
		<div id= "wrapper">
			<div id ="page-head">
			</div>
			<div id= "leftcol-wrap">
				<p>
					В шестнадцатом веке печатники постепенно преобразовали текст Цицерона в представленый пример. 
					С того времени этот, похожий на латинский, текст стал стандартом в печатной промышленности для примеров шрифтов и текстов.  
					Перед появлением электронных издательств дизайнеры импровизировали в работе над макетами, изображая текст при помощи волнистых линий. 
					С появлением самоклеющихся наклеек с напечатанным текстом «Lorem ipsum» появился более реалистичный способ обозначения расположения текста на  
					странице. 
				</p>
			</div>
			<div id= "rightcol-wrap">
				<p>
					Хотя фраза и бессмысленна, она имеет давнюю историю. Фраза использовалась печатниками многие столетия для 
					демонстрации наиболее важных особенностей своих шрифтов. Она использовалась потому, что символы составляют сложные 
					по межсимвольным промежуткам и по комбинациям символов пары, наилучшим образом демонстрирующие преимущества данного начертания. 
				</p>
			</div>
			<div id= "middle-wrap">
				<p>
					В своей статье от 1994-го года журнал «Before & After» отследил фразу «Lorem ipsum ...» до философского 
					трактата Цицерона О пределах добра и зла, написанного в 45 году до нашей эры на латинском языке.  
					В оригинале текст выглядит так «Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit ...», 
					и переводится как «Нет никого, кто любил бы свою боль, кто искал бы ее и хотел бы чтобы она была у него. Потому что это боль...» 
				</p>
			</div>
			<div class= "clear">
			</div>
		</div>
		<div id= "page-bottom">
		</div>
	</body>
</html>

slicemasta · March 15, 2010

Насколько я знаю данный скелет с прижатым футером у вас есть некоторые ошибки, высота <div class= "clear"> должна быть ровна футеру <div id= "page-bottom">, хак с подчеркиванием там никчему.

Так же:

min-width: 980px;

width: expression(document.body.clientWidth > 1000? '100%': '1000px');

1я строка не ровна 2й, т.е. должно быть так:

min-width: 980px;

width: expression(document.body.clientWidth > 1000? '100%': '980px');

или же намеренно вы для ие6 ставите 1000пкс ширину а для остальных 980пкс

И на последок в данном скелете в опере (только в опере насколько мне известно) существует такой баг (для резинки) при ресайзе страницы скачки футера Пофиксить врядли выйдет, разве что использовать другой скелет... или задать фиксированную ширину основному держателю.

Verder · March 15, 2010

Насколько я знаю данный скелет с прижатым футером у вас есть некоторые ошибки, высота <div class= "clear"> должна быть ровна футеру <div id= "page-bottom">, хак с подчеркиванием там никчему.
Так же:
min-width: 980px;
width: expression(document.body.clientWidth > 1000? '100%': '1000px');
1я строка не ровна 2й, т.е. должно быть так:
min-width: 980px;
width: expression(document.body.clientWidth > 1000? '100%': '980px');
или же намеренно вы для ие6 ставите 1000пкс ширину а для остальных 980пкс
И на последок в данном скелете в опере (только в опере насколько мне известно) существует такой баг (для резинки) при ресайзе страницы скачки футера Пофиксить врядли выйдет, разве что использовать другой скелет... или задать фиксированную ширину основному держателю.

1. Если задать высоту .clear такую же как у футера, то во всех браузерах все будет нормально, за исключением нашего любимого IE6. Там надо задавать высоту .clear несколько больше, чтобы футер на обертку не наезжал.

2. Это просто экспериментирую с разной min-width для разных браузеров. В любом случае, даже если поставить равную минималку, глюк с "прыжком" футера это не исправляет

3. Бро баг слышал, но странно что он проявился после обновления браузера. В предыдущей версии такого не наблюдалось. А вот насчет сафари странно (хотя вроде у них движки с оперой схожи). Но в сафари на маке, как я уже говорил, такого нет.

Бред вобщем. Хотя и не критичный бред. Ну прыгнет он, ну и хрен с ним

Sign In

Непонятный глюк в Opera и Safari

Question

Verder

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

slicemasta

Link to comment

Share on other sites

Verder

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information