Проблема масштабирования в IE7

Oversemper · October 18, 2008

В общем, схема такая:

сайт (airclubkmw.ru/testing/) состоит из таблицы в 3 столбца и 4 строки. Каждая ячейка таблицы имеет класс, описанный by CSS. Описывал я так, чтобы сайт растягивался на 100% и по вертикали и по горизонтали браузера, НО! при этом полностью верхняя строка (вернее там 2-е строки) была фиксированной, нижняя строка была фиксированной, левый и правый столбики, заключённые между верхней и нижней строками были зафиксированы. То есть, все масштабирование получается путём изменения площади ячеек (x,y)=(2,1) (2,2) (2,3), по-русски: 3 серединные ячейки сверху (у нижней средней ячейке размер фиксирован height'ом).

Не поверите! но у меня получилось - всего неделя чтения html и css - и у меня получилось!

Но Microsoft, как всегда подбросила свинью:

в Firefox 3 и Opera 9.6 все работает, как задумано, а IE 7, масштабируя страницу горизонтальные строки растягивает пропорционально друг другу, игнорируя width и height параметры в классах для этих строк. Но при этом, столбцы масштабируются правильно: левый и правый фиксированы, а центральные свободно плавает в зависимости от размера окна браузера.

Дело все, как я понял тут:

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	position: absolute;
	height:100%;
	width: 100%;
}

Если убрать position: absolute; или поменять его параметр, то ни в одном браузере 100% растягивания по вертикали не будет (только по горизонтали будет растягивать,а по вертикали будет минимизироваться). Но, если делаем position: absolute; то Опера с Лисой все отображают отлично, а вот ИЭ7 - описал выше.

Я перепробывал все варианты параметра position ко всем ячейкам, пробывал table-layout, но у меня ничего не вышло, я уже не знаю, чего там мудрить в CSS.

CSS: airclubkmw.ru/testing/design/styles.css

Содержание index.php: http://airclubkmw.ru/testing/index_php.txt

Помогите пожалуйста, заранее благодарен.

Edited October 18, 2008 by Oversemper

rus · October 18, 2008

Эта запись правильней будет выглядеть так:


    html,body {
    margin: 0px;
    padding: 0px;
    height:100%;
    width: 100%;
}

Oversemper · October 18, 2008

Эта запись правильней будет выглядеть так:
    html,body {
    margin: 0px;
    padding: 0px;
    height:100%;
    width: 100%;
}

Заменил блок body {} на твой html,body {} - все как прежде, визуальных изменений нет, но при этом наличие параметра "position" вообще не влияет ни на один браузер. Значит дело не в нем, может габариты ячеек мне надо описывать в html-тексте, а не в классах CSS?

Проверил: что в html тексте, что через описание классов CSS - разницы нет (((

Edited October 18, 2008 by Oversemper

nazarovvlan · October 18, 2008

Попробуй position поменять на fixed или relative

Oversemper · October 18, 2008

Попробуй position поменять на fixed или relative

html,body {
margin: 0px;
padding: 0px;
position:relative;
height:100%;
width: 100%;
}

fixed, relative, absolut, static - при записи предложенной тов. Rus, наличие position в html,body вообще ни на что не влияет. При первом варианте с body {} - я перебирал все параметры position - влияние оказывал только параметр absolut.

Edited October 18, 2008 by Oversemper

rus · October 18, 2008

Че то нифига не понял..., итог то, что нужно?

Oversemper · October 18, 2008

Че то нифига не понял..., итог то, что нужно?

Ну, я же все описал. Если есть возможность сам посмотри в IE7 и др. браузерах. Или вот скрины: нужно чтобы в IE7 было так:

http://airclubkmw.ru/testing/firefox_and_opera.gif

а не так:

http://airclubkmw.ru/testing/IE7.gif

rus · October 18, 2008

Короче вот полный твой код, я немного подправил, вроде выглядет так как надо:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>СПбГУ ИТМО | Кафедра  твердотельной оптоэлектроники</title>
<style>
html,body {
margin: 0px;
padding: 0px;
height:100%;
width: 100%;
}
DIV {
margin: 3px 0px 3px 0px;
}

TABLE {
width: 100%;
height: 100%;
}

A {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
}

.left {
width: 140px;
height: 130px;
text-align: right;
}

.mid {
white-space: nowrap;
text-align: center;
}
.right {
width: 152px;
text-align: center;
}



.left_bar {
height: 36px;
text-align: center;
font: bold 0.7em Verdana, 'Trebuchet MS', Sans-serif;
color: #494949;
background: url(images/nav-bg.png);
}


.mid_bar  {
text-align: center;
font: bold 0.8em Verdana, 'Trebuchet MS', Sans-serif;
color: #494949;
background-color:#F1F1F1;
}
.mid_bar a:link {text-decoration: underline; color: #494949}
.mid_bar a:visited {text-decoration: underline; color: #494949}
.mid_bar a:hover {text-decoration: underline; color: #000099}
.mid_bar a:active {text-decoration: underline; color: #000099}


.right_bar {
text-align: center;
font: bold 0.7em Verdana, 'Trebuchet MS', Sans-serif;
color: #494949; 
background: url(images/nav-bg.png);
}
.right_bar a:link {text-decoration: none; color: #494949}
.right_bar a:visited {text-decoration: none; color: #494949}
.right_bar a:hover {text-decoration: underline; color: #494949}
.right_bar a:active {text-decoration: none; color: #494949}






.left_post {
background-color:#F7F7F7;
vertical-align: top;
}




.content_bar {
text-align:center;
text-decoration: underline; color: #494949
}

.right_post {
background-color:#F1F1F1;
text-align: right;
vertical-align: top;
}



.left_bottom {
height: 36px;
background: url(images/nav-bg.png);
}

.mid_bottom {
white-space: nowrap;
background-color:#F1F1F1;
text-align: left;
font: bold 0.7em Verdana, 'Trebuchet MS', Sans-serif;
color: #494949;
padding : 0px 0px 0x 10px;
}

.right_bottom {
background: url(images/nav-bg.png);
}





.title {
white-space: nowrap;
text-align: center;
font: bold 0.8em Verdana, 'Trebuchet MS', Sans-serif;
color: #494949;
background: #fff url(images/sidebar-title.png) repeat-x;
padding: 3px 0px 3px 0px;
border: solid 1px #D6D3D3;
margin: 3px 3px 3px 3px;
}
.title2 {
white-space: nowrap;
text-align: center;
font: bold 0.75em Verdana, 'Trebuchet MS', Sans-serif;
color: #494949; 
background: #fff url(images/sidebar-title.png) repeat-x;
padding: 3px 0px 3px 0px;
border: solid 1px #D6D3D3;
margin: 3px 3px 3px 3px;
}
.left_item {
position: relative;
left: 17px;
white-space: nowrap;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000066;
font-weight: normal;
}
.left_item a:link {text-decoration: none; color: #000066;}
.left_item a:visited {text-decoration: none; color: #000066;}
.left_item a:hover {text-decoration: underline; color: #000066;}
.left_item a:active {text-decoration: none; color: #000066;}

.right_item {
position: relative;
right: 17px;
white-space: nowrap;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
}
.right_item a:link {text-decoration: none; color: #000066;}
.right_item a:visited {text-decoration: none; color: #000066;}
.right_item a:hover {text-decoration: underline; color: #000066;}
.right_item a:active {text-decoration: none; color: #000066;}
.wrap {
border:none;
border-collapse:collapse;
width:100%;
height:100%;
}
</style>
</head>

<body>
<table class="wrap">
  <tr>
    <td class="left"> </td>
    <td class="mid">Санкт-Петербургский государственный университет информационных технологий механики и оптики<br />Кафедра твердотельной оптоэлектроники</td>

    <td class="right"><a href="http://iff.ifmo.ru" target="_blank"><img src="design/images/IFF_logo.jpg" width="111" height="130" border="0" /></a></td>
  </tr>
  <tr>
    <td class="left_bar">
    Сегодня:<br />18.10.2008 Сб    </td>
    <td class="mid_bar"><a href="/testing/?lang=rus#">Главная</a> <a href="/testing/?lang=rus#">Новости</a> <a href="/testing/?lang=rus#">Контакты</a></td>

    <td class="right_bar"><a href="/testing/?lang=eng&request=main"><img src="design/images/us.gif" border="0"  /> Switch to English</td>
  </tr>
  <tr>
    <td class="left_post">
 <div class="title">Кафедра ТТОЭ</div>
 <div class="left_item"><a href="/testing/?lang=rus#">О кафедре</a></div>
 <div class="left_item"><a href="/testing/?lang=rus#">Цели и задачи</a></div>

 <div class="left_item"><a href="/testing/?lang=rus#">Подготовка<br>специалистов</a></div>
 <div class="left_item"><a href="/testing/?lang=rus#">Поступление</a></div>
 <div class="left_item"><a href="/testing/?lang=rus#">Карьера в России<br>и СНГ</a></div>
 <div class="left_item"><a href="/testing/?lang=rus#">Карьера за<br>рубежом</a></div>   
 <div class="title">Наука</div>

 <div class="left_item"><a href="/testing/?lang=rus#">Исследования и<br>разработки (R&D)</a></div>
 <div class="left_item"><a href="/testing/?lang=rus#">Лаборатории<br>кафедры</a></div>
 <div class="left_item"><a href="/testing/?lang=rus#">Диссертации</a></div>
 <div class="left_item"><a href="/testing/?lang=rus#">Публикации</a></div> 
 <img src="design/images/menus_bar_br.gif" />    </td>

    <td class="content_bar">
ТТОЕ</td>
    <td class="right_post">
 <div class="title">Учебный процесс</div>
 <div class="right_item"><a href="/testing/?lang=rus#">Дисциплины</a></div>
 <div class="right_item"><a href="/testing/?lang=rus#">Преподаватели</a></div>
 <div class="right_item"><a href="/testing/?lang=rus#">Учебные<br>материалы</a></div>

 <div class="right_item"><a href="/testing/?lang=rus#">Электронная<br>библиотека</a></div>
 <div class="right_item"><a href="/testing/?lang=rus#">Учебные планы</a></div>
  <div class="right_item"><a href="/testing/?lang=rus#">Расписание</a></div>
 <div class="title2">Полезная<br>информация</div>
 <div class="right_item"><a href="/testing/?lang=rus#">Пункт меню</a></div>

 <div class="right_item"><a href="/testing/?lang=rus#">Пункт меню</a></div>
 <div class="right_item"><a href="/testing/?lang=rus#">Пункт меню</a></div>
 <img src="design/images/menus_bar_lbg.png" />    </td>
  </tr>
  <tr>
    <td class="left_bottom"> </td>
	<td class="mid_bottom">Кафедра Твердотельной оптоэлектроники 2008-2009.<br>Все права защищены.</td>

    <td class="right_bottom"> </td>
  </tr>
</table>
</body>
</html>

З.Ы. заранее извиняюсь перед админами что код громоздкий.

2 Автор: там бэк в тдэшках замени на картинки свои:

Oversemper · October 18, 2008

Короче вот полный твой код, я немного подправил, вроде выглядет так как надо

К сожалению нет: строчки не имеют фиксированных размеров. Они пропорционально растягиваются. Можешь посмотреть, первый столбик, в нем ячейки имеют классы:

(сверху вниз)

.left {
width: 140px;
height: 130px;
text-align: right;
}
.left_bar {
height: 36px;
text-align: center;
font: bold 0.7em Verdana, 'Trebuchet MS', Sans-serif;
color: #494949;
background: url(images/nav-bg.png);
}
.left_post {
background: url(images/menus_bar_br.gif) repeat-y;
vertical-align: top;
}
.left_bottom {
height: 36px;
background: url(images/nav-bg.png);
}

Как видно, каждая ячейка имеет высоту height, а ячека .left_post высоты не имеет - она растягивается вертикально, так чтобы окно браузера было полностью закрыто. Но это только в Firefox и Opera! IE7 плюет на height во всех ячейках и растягивает их все пропорционально от минимального размера, определённого содержимым.

А вот в ширину:

.left {
width: 140px;
height: 130px;
text-align: right;
}

.mid {
white-space: nowrap;
text-align: center;
}
.right {
width: 152px;
text-align: center;
}

Тут три ячейки в одной строке. Первая и последняя имеют width, а посередине .mid ширину не имеет и растягивается. Тут и в IE7 правильно делается.

Как же заставить IE7 фиксировать размеры не только по горизонтали, но и по вертикали, как делают остальные браузеры?

rus · October 18, 2008

Вообще да, ошибка в приведенном моем коде есть, но это из-за того что у вашего бэка высота 28px, а у вас стоит 36px высота ячеек (горизонтальных), это раз.

И два, это то что я бы сделал так:

left_bar - здесь в процентах ширина скажем 15% и высота 30px

right_bar - здесь тоже самое ширина скажем 15% и высота 30px

mid_bar - оставшееся место 70% и высота 30px

content_bar ширина скажем 70% и высота 100%

left_post - ширина 15% и высота 100%

right_post ширина 15% и высота 100%

left_bottom здесь в процентах ширина скажем 15% и высота 30px

mid_bottom здесь тоже самое ширина скажем 15% и высота 30px

right_bottom оставшееся место 70% и высота 30px

А вообще верстайте дивами.

Oversemper · October 18, 2008

Вообще да, ошибка в приведенном моем коде есть, но это из-за того что у вашего бэка высота 28px, а у вас стоит 36px высота ячеек (горизонтальных), это раз.
И два, это то что я бы сделал так:
left_bar - здесь в процентах ширина скажем 15% и высота 30px
right_bar - здесь тоже самое ширина скажем 15% и высота 30px
mid_bar - оставшееся место 70% и высота 30px
content_bar ширина скажем 70% и высота 100%
left_post - ширина 15% и высота 100%
right_post ширина 15% и высота 100%
left_bottom здесь в процентах ширина скажем 15% и высота 30px
mid_bottom здесь тоже самое ширина скажем 15% и высота 30px
right_bottom оставшееся место 70% и высота 30px
А вообще верстайте дивами.

Высота ячеек 36px, "бэк" - файл nav-bg.png, тоже имеет высоту 36px. Тут проблем нет.

Как ты описал - это будет без фиксирования размера крайних ячеек.

Главное ж - я все сделал! все работет (Firefox, Opera,)! только гад IE7 требует чего-то еще! Ну, вот что ж ему нужно ?! (((

проверил еще в Google Chrome 0.3.154.3 и Сафари 3.1.2 - в обоих все отлично!!!! Как меня бесит IE7 !!!!

Пожалуйста, кто-нибудь может проверить страничку http://www.airclubkmw.ru/testing/ в IE 6 - а то у мну нет возможности поставить.

Edited October 18, 2008 by Oversemper

rus · October 18, 2008

неа, nav-bg.png 28px

Oversemper · October 18, 2008

неа, nav-bg.png 28px

Чего ты имеешь в виду? Я до чего-то не допираю может, но вот он http://www.airclubkmw.ru/testing/design/images/nav-bg.png

у мну пишет "изображение 'PNG', 1x36 пикселей". Я ж в фотошопе его сам рисовал

rus · October 18, 2008

хм..., а в коде адрес по моему до этого пнг:

http://www.airclubkmw.ru/images/nav-bg.png

Oversemper · October 18, 2008

Обновил IE до 8.0.6001.18241 - 8-ая бета, представляете, там так же все правильно как в Firefox, Opera, Safari и Google Chrome.

Кто-нибудь, пожалуйста, посмотрите в IE6 - фиксируются ли там высоты крайних верхних и нижних ячеек. Буду очень признателен!

хм..., а в коде адрес по моему до этого пнг:
http://www.airclubkmw.ru/images/nav-bg.png

не не не! это в этой папке по ошибке появилось. Я ж тестю сайт на одном из своих сайтах. Index.php находится в каталоге ...\testing\ а папка с картинками ...\testing\design\images. Такие дела

Edited October 19, 2008 by Oversemper

rus · October 18, 2008

Щас уже поздно, просто за целый день намучался - вот и мозги кипят

Oversemper · October 19, 2008

В общем я написал php-скрипт определяющий браузер и подключающий разные css стили. А именно только для MSIE7 css делает фиксированный размер .left_post.

Других выходов я не знаю...

rus · October 19, 2008

Держи пока я добрый

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>СПбГУ ИТМО | Кафедра  твердотельной оптоэлектроники</title>
<style>
html, body {
	margin: 0px;
	padding: 0px;
	height:100%;
	width: 100%;
}
DIV {
	margin: 3px 0px 3px 0px;
}
TABLE {
	width: 100%;
	height: 100%;
}
A {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.left {
	width: 15%;
	height: 130px;
	text-align: right;
}
.mid {
	white-space: nowrap;
	text-align: center;
	height: 130px;
	width: 70%;
}
.mid h1 {
font: normal 14px Verdana;
color:#014D8B;
text-align:center;
position:absolute;
top:50px;
left:15%;
}
.right {
	width: 15%;
	height: 130px;
	text-align: center;
}
.top_nav {
list-style: none;
margin:0;
padding:0;
}
.top_nav li {
margin-right:5px;
display: inline;
}
.top_nav li a {
display: inline;
text-decoration: underline;
color: #494949;
}
.top_nav li a:visited {
display: inline;
text-decoration: underline;
color: #494949;
}
.top_nav li a:active {
display: inline;
text-decoration: underline;
color: #000099;
}
.top_nav li a:hover {
display: inline;
text-decoration: underline;
color: #000099;
}
.mid_bar {
	text-align: center;
	font: bold 0.8em Verdana, 'Trebuchet MS', Sans-serif;
	color: #494949;
    background: url(nav-bg.png);
	height:36px;
	width:70%;
	margin:0px;
    padding:0px;
}
.left_bar {
	height:36px;
	width:15%;
	text-align: center;
	font: bold 0.7em Verdana, 'Trebuchet MS', Sans-serif;
	color: #494949;
	background: url(nav-bg.png);
	margin:0px;
    padding:0px;
}
.div_right_bar{
white-space:nowrap;
position:absolute;
top:70px;
right:5px;
font: bold 0.7em Verdana, 'Trebuchet MS', Sans-serif;
color: #494949;
}
.div_right_bar a{
white-space:nowrap;
position:absolute;
top:70px;
right:5px;
text-decoration: none;
color: #494949;
}
.div_right_bar a:visited{
text-decoration: none;
color: #494949;
}
.div_right_bar a:hover{
text-decoration: underline;
color: #494949;
}
.div_right_bar a:active{
text-decoration: none;
color: #494949;
}
.right_bar {
    height:36px;
	width:15%;
	text-align: left;
	background: url(nav-bg.png);
	margin:0px;
    padding:0px;
}
.left_post {
    background-color:#FFFFFF;
	vertical-align: top;
	height:100%;
	width:15%;
	margin:0;
    padding:0;
}
.content_bar {
	text-align:center;
	text-decoration: underline;
	color: #494949
	height:100%;
	width:70%;
}
.right_post {
	background-color:#FFFFFF;
	text-align: right;
	vertical-align: top;
	height:100%;
	width:15%;
	margin:0;
    padding:0;
}
.left_bottom {
	height:36px;
	width:15%;
	background: url(nav-bg.png);
	margin:0;
    padding:0;
}
.mid_bottom {
	white-space: nowrap;
	background: url(nav-bg.png);
	text-align: left;
	font: bold 0.7em Verdana, 'Trebuchet MS', Sans-serif;
	color: #494949;
	padding : 0;
	height:36px;
	width:70%;
	margin:0;
    padding:0;
}
.right_bottom {
	background: url(nav-bg.png);
	height:36px;
	width:15%;
	margin:0;
    padding:0;
}
.title {
	white-space: nowrap;
	text-align: center;
	font: bold 0.8em Verdana, 'Trebuchet MS', Sans-serif;
	color: #494949;
	background: #fff url(images/sidebar-title.png) repeat-x;
	padding: 3px 0px 3px 0px;
	border: solid 1px #D6D3D3;
	margin: 3px 3px 3px 3px;
}
.title2 {
	white-space: nowrap;
	text-align: center;
	font: bold 0.75em Verdana, 'Trebuchet MS', Sans-serif;
	color: #494949;
	background: #fff url(images/sidebar-title.png) repeat-x;
	padding: 3px 0px 3px 0px;
	border: solid 1px #D6D3D3;
	margin: 3px 3px 3px 3px;
}
.left_item {
	position: relative;
	left: 17px;
	white-space: nowrap;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000066;
	font-weight: normal;
}
.left_item a:link {
	text-decoration: none;
	color: #000066;
}
.left_item a:visited {
	text-decoration: none;
	color: #000066;
}
.left_item a:hover {
	text-decoration: underline;
	color: #000066;
}
.left_item a:active {
	text-decoration: none;
	color: #000066;
}
.right_item {
	position: relative;
	right: 17px;
	white-space: nowrap;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
}
.right_item a:link {
	text-decoration: none;
	color: #000066;
}
.right_item a:visited {
	text-decoration: none;
	color: #000066;
}
.right_item a:hover {
	text-decoration: underline;
	color: #000066;
}
.right_item a:active {
	text-decoration: none;
	color: #000066;
}
.wrap {
	border:none;
	border-collapse:collapse;
	width:100%;
	height:100%;
}
</style>
</head>
<body>
<table class="wrap">
  <tr>
    <td class="left"> </td>
    <td class="mid">
    <h1>Санкт-Петербургский государственный университет информационных технологий механики и оптики<br />
      Кафедра твердотельной оптоэлектроники.
     </h1>
      </td>
    <td class="right"><a href="http://iff.ifmo.ru" target="_blank"><img src="design/images/IFF_logo.jpg" width="111" height="130" border="0" /></a></td>
  </tr>
  <tr>
    <td class="left_bar"> Сегодня:<br />
      18.10.2008 Сб </td>
    <td class="mid_bar">
    <ul class="top_nav">
    <li>
    <a href="/testing/?lang=rus#">Главная</a>
    </li>
    <li>
    <a href="/testing/?lang=rus#">Новости</a>
    </li>
    <li>
    <a href="/testing/?lang=rus#">Контакты</a>
    </li>
    </ul>
    </td>
    <td class="right_bar">
    <a href="/testing/?lang=eng&request=main">
    <img src="design/images/us.gif" border="0" height="36px"/>
    </a>
    <div class="div_right_bar">
    <a href="/testing/?lang=eng&request=main">
    Switch to English
    </a>
    </div>
    </td>
  </tr>
  <tr>
    <td class="left_post"><div class="title">Кафедра ТТОЭ</div>
      <div class="left_item"><a href="/testing/?lang=rus#">О кафедре</a></div>
      <div class="left_item"><a href="/testing/?lang=rus#">Цели и задачи</a></div>
      <div class="left_item"><a href="/testing/?lang=rus#">Подготовка<br>
        специалистов</a></div>
      <div class="left_item"><a href="/testing/?lang=rus#">Поступление</a></div>
      <div class="left_item"><a href="/testing/?lang=rus#">Карьера в России<br>
        и СНГ</a></div>
      <div class="left_item"><a href="/testing/?lang=rus#">Карьера за<br>
        рубежом</a></div>
      <div class="title">Наука</div>
      <div class="left_item"><a href="/testing/?lang=rus#">Исследования и<br>
        разработки (R&D)</a></div>
      <div class="left_item"><a href="/testing/?lang=rus#">Лаборатории<br>
        кафедры</a></div>
      <div class="left_item"><a href="/testing/?lang=rus#">Диссертации</a></div>
      <div class="left_item"><a href="/testing/?lang=rus#">Публикации</a></div>
      <img src="design/images/menus_bar_br.gif" /> </td>
    <td class="content_bar">ТТОЕ</td>
    <td class="right_post"><div class="title">Учебный процесс</div>
      <div class="right_item"><a href="/testing/?lang=rus#">Дисциплины</a></div>
      <div class="right_item"><a href="/testing/?lang=rus#">Преподаватели</a></div>
      <div class="right_item"><a href="/testing/?lang=rus#">Учебные<br>
        материалы</a></div>
      <div class="right_item"><a href="/testing/?lang=rus#">Электронная<br>
        библиотека</a></div>
      <div class="right_item"><a href="/testing/?lang=rus#">Учебные планы</a></div>
      <div class="right_item"><a href="/testing/?lang=rus#">Расписание</a></div>
      <div class="title2">Полезная<br>
        информация</div>
      <div class="right_item"><a href="/testing/?lang=rus#">Пункт меню</a></div>
      <div class="right_item"><a href="/testing/?lang=rus#">Пункт меню</a></div>
      <div class="right_item"><a href="/testing/?lang=rus#">Пункт меню</a></div>
      <img src="design/images/menus_bar_lbg.png" /> </td>
  </tr>
  <tr>
    <td class="left_bottom"> </td>
    <td class="mid_bottom">Кафедра Твердотельной оптоэлектроники 2008-2009.<br>
      Все права защищены.</td>
    <td class="right_bottom"> </td>
  </tr>
</table>
</body>
</html>

Отступы у левой и правой колонки сверху от верхней навигации сам поправишь, можно навигацию с тдшками засунуть в таблицу и ей задать border-collapse:collapse;

Oversemper · October 19, 2008

Держи пока я добрый

Спасибо, конечно же! Но все равно не то:

1.в IE7 по вертикали вылазит за границы браузера на мониторе 1680х1050 (в IE8 beta 2 - все нормально).

2.Мне же необходимы фиксированные размеры крайних ячеек - а они в процентах указаны т.е. тянутся

Вот я план набросал:

красное - фиксировано и по x и по y

синие - резина по x фиксация по y

зеленное - фиксация по x резина по y

белое - тянется и по x и по y

Вот чего я сделал: http://airclubkmw-ru.1gb.ru/testing/test.html CSS в шапке html'а.

там все раскрашено как на плане моем.

Работает так, как я задумал, в следующих браузерах:

Firefox 3, Opera 9.6, IE8 beta 2, Safari 3.1.2, Google Chrome 0.3.154.3.

Не работает, а именно не фиксирует вертикальные габариты в IE 7!

Единственный выход, который я нашел, чтобы не было чуши в IE 7 - написать для него другой CSS и зафиксировать по y зеленые столбцы: http://airclubkmw.ru/testing/index.php - это нормальная версия сайта в процессе разработки, без цветной раскраски. У меня нету возможности пока проверить в IE 6 - если у кого-нибудь есть возможность - буду очень благодарен!

Edited October 19, 2008 by Oversemper

rus · October 19, 2008

От блин! Старайся теперь для людей! Им как лучше советуешь, а они все по-своему!

Ну кто так делает?

<a href="/testing/?lang=rus#">Главная</a> <a href="/testing/?lang=rus#">Новости</a> <a href="/testing/?lang=rus#">Контакты</a>

Такие вещи делают списком!

А то что вы хотите без джавы не обойтись:

1.в IE7 по вертикали вылазит за границы браузера на мониторе 1680х1050 (в IE8 beta 2 - все нормально).
2.Мне же необходимы фиксированные размеры крайних ячеек - а они в процентах указаны т.е. тянутся

Ладно, делайте как хотите.

Oversemper · October 19, 2008

От блин! Старайся теперь для людей! Им как лучше советуешь, а они все по-своему!

Извини уж, я неделю этот шаблон делал, оно ведь у меня получилось, ни ломать же все из-за IE7, да тем более 100%-го растягивания по вертикали необязательно нужно, т.к. все равно из-за контента будет растягивать за границы браузера.

Ну кто так делает?
Такие вещи делают списком!

Будь добр, тут по-подробнее, пожалуйста . Что именно плохо, и на что это влияет. Список? Я знаю вертикальный список "list", у мну же там в горизонте .

А то что вы хотите без джавы не обойтись:

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

Ладно, делайте как хотите.

Делаем-с

Edited October 19, 2008 by Oversemper

rus · October 19, 2008

Ну а мой код, который я выложил во второй раз ты не просматривал?

Вижу что даже не удосужился! Там как раз твое меню я сделал списком.

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

а то что ты говоришь что контент и так растянет, так какая разница тогда между моим и твоим вариантом?

Я специально привел код 100% масштабируемости, то есть резиновый макет, ибо посмотри на свой сайт под разрешением скажем 800х600 и

ты увидешь что я имел ввиду, а так как сайт для кафедры, то у них наверняка есть еще такие компы со старым монитором под разрешением 800х600.

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

Oversemper · October 19, 2008

Ну а мой код, который я выложил во второй раз ты не просматривал?
Вижу что даже не удосужился! Там как раз твое меню я сделал списком.

Ой, сорри, я проглядел, просто ж на другие моменты обращал внимание - на атрибуты классов ячеек, а не надписей.

Но, я не совсем понимаю смысл такой записи: внешне разницы нет, физически символов больше. Зачем так писать?

На счет того, что по вертикали за пределы браузера..., вот тут как раз как вам хочется (учитывая 100% масштабируемость) не обойтись без джавы,
а то что ты говоришь что контент и так растянет, так какая разница тогда между моим и твоим вариантом?
Я специально привел код 100% масштабируемости, то есть резиновый макет, ибо посмотри на свой сайт под разрешением скажем 800х600 и
ты увидешь что я имел ввиду, а так как сайт для кафедры, то у них наверняка есть еще такие компы со старым монитором под разрешением 800х600.

резиновый макет - так резиновый макет и получился у мну, только он в IE7 резинится вертикально неправильно. Поэтому для IE7 по вертикали я зафиксировал. И имею в итоге на монике с матрицей 1680 на 1050, пройдясь во всех разрешениях от 1024 на 768, 100%-ое покрытие окна браузера без вылезания за края... во всём кроме IE7 конечно же... из за него ж я и тему создал.

В твоем варианте, из-за указывания габаритов в процентах, в разных разрешениях или при ручном изменение размеров окна, будут меняться размеры левого и правого столбиков с менюшками, а именно их ширина. А мне необходима фиксированная ширина этих столбиков (при резиновой высоте), а горизонтальное покрытие 100% окна, при этом, осуществляется с помощью растягивания центральных ячеек. Так у мну и получилось, без всякой джавы, чисто html'ом и CSS'ом... во всём кроме IE7 конечно же

Про контент и про кафедру: сайт же голый ща, когда набью всей инфой, то наверняка какие-нибудь статейки будут длиннющие и в итоге по высоте сайт не поместится ни при каком разрешение. На кафедре слава Богу компы все 1024 и более, да и какой сейчас год на улице-то, чтобы 800 на 600? Так что минимальная ширина сайта будет у мну под 1024-разрешение. А для тех кто зайдет с 800 на 600 выскочит окошко с предупреждением о херовом разрешение Вроде же php может определять разрешение или java?... в общем разберёмся. Самое главное, чтобы на всех широкоформатных мониторах закрывало 100% окна по ширине(при одинаковой ширине менюшек), а по высоте, опять же из-за контента все равно сайт получиться оч "высоким".

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

За ссылку на валидатор спасибо большое! This document was successfully checked as HTML 4.01 Strict!

Edited October 19, 2008 by Oversemper

rus · October 20, 2008

На счет организации меню:

Скажи, ты бы стал есть торт с пивом? Наверное нет, если конечно со вкусовыми рецепторами все в порядке.

Тогда почему ты считаешь что браузер должен это хавать? Как кто то умный сказал: Кесарю - кесарь...

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

Посмотрите любой сайт (исходный код) 97% используют элемент списки для реализации навигации по сайту.

Левое и правое меню тоже лучше списком так и код сократится.

К стати, код если и прибавился, то буквально на пару строчек, к тому же у вас отступы не выставлены у верхнего меню,

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

Вобщем, выложите сайт на этом форуме на обсуждение и вам тоже самое скажут другие люди.

Удачи!

Sign In

Проблема масштабирования в IE7

Question

Link to comment

Share on other sites

23 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

Join the conversation

Обсуждения

Important Information