Проблема в IE 6 при большом разрешении

karevie · April 2, 2010

Друзья, помогите. Не могу поймать косяк.

Резиновость сайта от 1000 до 1280, 2 колонки, при большом разрешении (более 1280 - сайт расположен по центру экрана). Во всех браузерах всё ОК, кроме IE6, т.е при разрешении большем 1280 левая колонка съезжает за поля и текст исчезает, н оне совсем, а в зависимости от разрешения.

Вот код страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<title>Call-центр Телеконтакт - крупнейший call-центр в России по подтвержденным оборотам</title>
<link rel="stylesheet" type="text/css" href="css/all.css">

<script src="js/script.js" type="text/javascript"></script>

<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" /><![endif]-->

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->

</head>
<body>



<div class="wrapper">



<!-- Yandex.Metrika -->

<script src="//mc.yandex.ru/metrika/watch.js" type="text/javascript"></script>

<div style="display:none;"><script type="text/javascript">

try { var yaCounter909177 = new Ya.Metrika(909177); } catch(e){}

</script></div>

<noscript><div style="position:absolute"><img src="//mc.yandex.ru/watch/909177"  alt="" /></div></noscript>

<!-- /Yandex.Metrika -->

<div style="position:absolute;  right:15px; text-align: right; padding-top:3px;">

<table style="border:0!important;" cellpadding="0" cellspacing="0" height="20">
<tr>
<td style="border:0!important;" valign="middle" height="20">
<a href="eng/contacts_en.html"><img src="pere/flag-utv.jpg" width="29" height="15" border="0" alt="переход на английскую версию сайта" style="padding-top:3px;"></a>
</td>

</tr>
</table>
</div>


<div class="ots">

<!--div id="maincontainer"-->



<div id="topsection">
	<div class="innertube"><img src="images/logo.jpg" width="383" height="136" border="0" alt=""></div>
</div>

<div id="contentwrapper">
<div id="contentcolumn">
	<div class="innertubecont">
По данным исследования компании РосБизнесКонсалтинг "<a href="http://marketing.rbc.ru/research/562949963781628.shtml" target="_blank">Российский рынок аутсорсинговых call-центров 2009</a>", Телеконтакт является крупнейшим российским call-центром <a href="inner-place-market.html">по подтвержденным оборотам</a>.
<br><br>
Мы делаем все, что может сделать call-центр для своих заказчиков, так как мы работаем и со смежными направлениями: sms-сервисы, сканирование и распознавание документов, хранение документов и данных.
<br><br>
<a href="inner-obr.html">Если Вы - потенциальный заказчик</a>,  то на этом сайте вы не найдете описания того, как хорошо мы работаем, насколько широк наш спектр услуг и высок «service level». Все это, вместе с рекомендациями наших клиентов мы подготовим для вашей компании и презентуем лично. А этот сайт мы посвятили самому главному нашему активу -  нашим сотрудникам и тем, кто только рассматривает возможность трудоустройства к нам.

	</div>

	<div class="innertubecontent">

	<img src="images/hand.jpg" width="520" height="196" border="0" alt="">
	<!--div style="margin-top:-10px;"--><div class="hr"><hr noshade width="99%" align="left" color="#ACE421" size="20"></div>

	<p>
	<div class="slogan">Основная сфера нашей деятельности -</div><br>
	обработка телефонных вызовов, поэтому предприятия нашего профиля называются call-центрами (или центрами обработки вызовов). Но некоторые наши коллеги, чтобы подчеркнуть комплексность коммуникаций с клиентами называют себя контакт центрами (contact center). 
	<br><br>
	Если Вы зададите такой запрос в Яндексе (Google), то увидите, что «call-центров» намного больше, чем «контакт центров», особенно в английском сегменте интернета. 
	<br><br>
	Телеконтакт является <a href="inner-history.html">одним из старейших предприятий</a> своей отрасли в России. Сотрудники нашей компании работают на крупнейшие российские и международные компании (банки, страховые компании, издательские дома, провайдеры услуг связи, торговые фирмы, рекламные агентства, государственные предприятия и т.д.). 
	<br><br>
	На проектах таких заказчиков вы не только получите работу, на который можете трудиться столько, сколько заходите, но и получите <a href="inner-education.html">важные навыки</a>, которые востребованы во многих других профессиях.
	</p>

	<!--div class="welcome">
	Приходите к нам работать! <span style="color:#FF6A06;">:)</span><br>
	<a href="#">Тверь</a>    <a href="#">Орел</a>    <a href="#">Москва</a>    <a href="#">Минск</a>
	<div-->

	<div style="color: #00AEEF; font: 25px Arial; text-align: center; padding: 50px 0 0 0;">
	Приходите к нам работать! <span style="color:#FF6A06;">:)</span><br>
	<a href="inner-tver.html" id="fota">Тверь</a>    <a href="inner-orel.html" id="fota">Орел</a>    <a href="inner-moscow.html" id="fota">Москва</a>    <a href="inner-minsk.html" id="fota">Минск</a>
	</div>

	</div>



</div>
</div>

<div id="leftcolumn">


	<div class="innertubeleft">
		<div class="hmenu"><span class="hmenumain">Чем</span> мы занимаемся?</div>
			<div class="hmenu-lit">
			<a href="inner-about-serv.html">О наших услугах</a>   <a href="inner-whatfor.html">Зачем мы заказчикам</a>
			<br>
			<a href="inner-reservation.html">Резервирование</a>   <a href="inner-place-market.html">Наше место на рынке</a>
			<br>
			<a href="inner-choose-us.html">Почему заказчики выбирают нас</a>   <a href="inner-history.html">История</a>
			</div>
		<div class="hmenu"><span class="hmenumain">Кто</span> у нас работает?</div>
			<div class="hmenu-lit">
			<a href="inner-portret.html">Портрет сотрудника</a>   <a href="inner-gallery.html">Галерея Вечной Славы</a>
			<br>
			<a href="inner-skills.html">Навыки</a>
			</div>
		<div class="hmenu"><span class="hmenumain">Почему</span> у нас работают?</div>
			<div class="hmenu-lit">
			<a href="inner-favorably.html">Выгодно</a>   <a href="inner-udobno.html">Удобно, комфортно и интересно</a>
			<br>
			<a href="inner-rest.html">Как мы отдыхаем</a>   <a href="inner-education.html">Обучение</a>   <a href="inner-flexible.html">Гибкий график</a>   <a href="inner-rost.html">Рост</a>
			</div>
		<div class="hmenu"><span class="hmenumain">Где</span> у нас работают?</div>
			<div class="hmenu-lit"><a href="inner-tver.html">Тверь</a>   <a href="inner-orel.html">Орел</a>   <a href="inner-moscow.html">Москва</a>   <a href="inner-minsk.html">Минск</a>   <a href="inner-anketa.html">Анкета для соискателей</a></div>
		<div class="hmenu"><span class="hmenumain">Если</span> Вы - заказчик</div>
			<div class="hmenu-lit"><a href="inner-obr.html">Обращайтесь!</a></div>

		<br>
		Мы уверены, что сотрудники уже знают про нашу компанию всё и заходят для того, чтобы похвалиться местом своей работы перед родными, друзьями и знакомыми. Поэтому, уважаемые коллеги, галерею портретов наших лучших сотрудников вы можете увидеть <a href="inner-gallery.html">здесь</a>, показать знакомым интерьеры рабочих залов, спортивных залов и комнат отдыха Вы можете <a href="inner-udobno.html">здесь</a>.  А остальным, кто только собирается прийти к нам на работу, расскажем о себе с самого начала.
		<br><br>
		<img src="images/beg-not.jpg" width="300" height="251" border="0" alt="">
		<br>
		Сфера деятельности нашей компании - это коммуникации с клиентами наших заказчиков. Это если выражаться по-научному.
		<br><br>
		<div class="slogan">А если говорить по-русски,<br> мы по поручению наших заказчиков:</div>
		<br>
		<div class="pig-line">
		<span class="pig">Отвечаем</span> на поступающие им телефонные звонки.   
		<br>
		<span class="pig">Звоним</span> клиентам наших заказчиков.
		<br>
		<span class="pig">Продаем</span> продукцию или услуги наших заказчиков тем, кто в ней может быть заинтересован.
		<br>
		<span class="pig">Отвечаем</span> на e-mail или sms клиентов.
		<br>
		<span class="pig">Вводим</span> данные с заполненных анкет/договоров.
		<br>
		<span class="pig">Выполняем</span> другие работы за наших заказчиков по телефону, sms или электронной почте.
		</div>

		<div class="center">
		<br /><br />
		Телеконтакт, © 1999 - 2010
		</div>

	</div>

</div>

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

</div>

</div>
<!--/div-->


</body>
</html>

Код стиля:

body{
margin:0;
padding:0;
line-height: 1.7em;
font: 12px Tahoma;
color: #707070;
}


.wrapper{
margin: auto;
min-width: 1000px; /* для нормальных браузеров*/
max-width: 1280px; /* для нормальных браузеров*/ 
background: #fff url(../images/fon-bg.png) top left no-repeat;
-background: none;
-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=fon-bg.png,sizingMethod=crop); 
}

.ots{
margin: 0 13px;
}


b{font-size: 110%;}
em{color: red;}


#topsection{
height: 136px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 387px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 387px; /*Width of left column*/
margin-left: -100%;
}

#footer{
clear: left;
width: 100%;
background: #fff;
color: #FFF;
text-align: center;
padding: 0 0;
height: 30px;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 0px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

.innertubeleft{
margin: 45px 0 0 20px;
line-height: 1.7em;
}

.innertubecontent
{
margin: 0 0 0 50px;
padding-top: 20px;
line-height: 1.7em;
}


.innertubecont
{
margin: 0 0 0 388px;
line-height: 1.7em;
min-height: 510px;
-height: 510px;
min-height: 510px;
height:auto !important;
height: 510px;
}

.hmenu
{
line-height: 2em;
font: 20px Tahoma;
color: #00AEEF;
}

.hmenumain
{
color: #FFF;
font: 20px Tahoma;
background: #F03791;
padding: 0 5px 0 45px;
font-style: italic;
}

.hmenu-lit
{
padding:5px 0 20px 0;
color: #00AEEF;
}

.hmenu-lit a
{
color: #00AEEF;
text-decoration: underline;
}

.slogan
{
color: #00AEEF;
font: 18px Arial;
}

.pig-line
{
line-height: 2.1em;
}

.pig
{
color: #F03791; 
font-style: italic;
}

a
{
color: #00AEEF;
text-decoration: underline;
}

/*.welcome
{
color: #00AEEF; 
font: 25px Arial;
}

.welcome a
{
color: #00AEEF; 
font: 21px Arial;
text-decoration: underline;
}*/

#fota
{
color: #00AEEF; 
font: 21px Arial;
text-decoration: underline;
}

hr{
margin: 0 0 0 0;
padding: 0;
}


.center{
text-align:center;
}

Код стиля ie6

.wrapper
{
width:expression(width(1000,1280));
}

body{
background: #fff url(../images/fon-bg.png) top left no-repeat;
-background: none;
-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/fon-bg.png,sizingMethod=crop);
}

hr{
margin: -9px 0 0 0;
padding: 0;
}

In_Variant · April 2, 2010

Ох, небеса! так же читать не реально! смилуйтесь, пользуйтесь чем-нибудь типа http://paste.pro/ и другими pastebin- сервисами....

можно посмотреть скриншот?

width:expression(width(1000,1280)); - по-моему, тут что-то не то....

Edited April 2, 2010 by In_Variant

hf3 · April 2, 2010

width:expression(width(1000,1280));

ошибка. должно быть

expression(document.getElementById('').style.width > 1280 ? 1280px );то то типо этого должно быть

Edited April 2, 2010 by hf3

In_Variant · April 2, 2010

_width: expression(document.body.clientWidth < 1000? "1000px" : document.body.clientWidth > 1280? "1280px" : "100%");

так не пойдет? так должно работать

Edited April 2, 2010 by In_Variant

psywalker · April 3, 2010

*html body {
  width:expression(
  document.documentElement.clientWidth < 1000 ? '1000px' :
  (document.documentElement.clientWidth > 1090 ? '1090px' : 'auto'));

In_Variant · April 3, 2010

*html body {
  width:expression(
  document.documentElement.clientWidth < 1000 ? '1000px' :
  (document.documentElement.clientWidth > 1090 ? '1090px' : 'auto'));

Почему 1090??

Sign In

Проблема в IE 6 при большом разрешении

Question

karevie

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

In_Variant

Link to comment

Share on other sites

hf3

Link to comment

Share on other sites

In_Variant

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

In_Variant

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information