Неправельное отображение в ХРОМЕ

myav4ik · February 16, 2012

Добрый вечер!

Уже 4 часа убил, но никак не могу понять мочему во всех браузерах отображаеться нормально, а в Хроме идет сдвиг...

Суть проблеммы в чем:

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

- Принскрин с мозилы

- Принскрин ХРОМА

Помогите пожалуйста, где я допустить мог ошибку?

oscora · February 16, 2012

В текущей ситуации, рассуждать о том какие ошибки есть - это всёравно, что вилами по воде писать.

Хотелось бы видеть исходники.

myav4ik · February 16, 2012

В текущей ситуации, рассуждать о том какие ошибки есть - это всёравно, что вилами по воде писать.
Хотелось бы видеть исходники.

а что нужно с исходников? Индексная страница и стили?

oscora · February 16, 2012

Часть индексной страницы, а именно та часть UL меню которая имеет второй уровень любого из под меню + CSS к нему

Edited February 16, 2012 by oscora

K313 · February 16, 2012

может, у пунктов меню, справа лишние пробелы имеются или (padding || margin)-right разные?

myav4ik · February 17, 2012

может, у пунктов меню, справа лишние пробелы имеются или (padding || margin)-right разные?

вродьбы одинаковые =(

вот код странички: и сразу дам ссылку на архив: http://turnkey.org.ua/proba.zip

<!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=utf-8"/>
	<title>ГЛАВНАЯ СТРАНИЦА СОЛЛИ+</title>
	 <style>
	 body {
			scrollbar-3dlight-color: #000;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #000;
scrollbar-darkshadow-color: #fff;
scrollbar-face-color: #000;
scrollbar-highlight-color: #000;
scrollbar-shadow-color: #000;
scrollbar-track-color: #fff;

  margin:300px 200px;
  padding:0;
  width:100%;
  height:97%;
  color:#fff;
}


ul#nav {
	list-style-type:none;
	margin:0;
	padding:0;
}

#nav {
	float:left;
	width:300px;

	position:relative;

}

#nav .select, #nav .current {
	margin:0;
	padding:0;
	list-style:none;
	display:block;
}

#nav li {
	font-family: Arial; /* Шрифт меню */
	display:inline;
	margin:0;
	padding:0;
	height:auto;
}

#nav .select a, #nav .current a {
	display:block;
	height:40px; /* Высота верхнего уровня */
	float:left;
	background: url("images/left_nav.png") no-repeat left top; /* Путь к левому изображению */
	padding:0 0 0 5px;
	text-decoration:none;
/*	font-size:14px;Размер шрифта верхнего уровня */
	line-height:40px;
	white-space:nowrap;
	margin-right: 2px; /* Отступы пунктов верхнего уровня */
	position: relative;
	z-index: 500;
	text-align: center;
	width: 200px;
}

#nav .select a b, #nav .current a b {
	height:100%;
	display:block;
	background:url("images/right_nav.png") no-repeat right top; /* Путь к правому изображению */
	padding:0 20px 0 15px;
	color:#606060; /* Цвет ссылок верхнего уровня */
}




#nav .sub {
	display:none;
}





#nav .sub li a:hover, #nav .select a:hover .sub li a:hover, #nav .select li:hover .sub li a:hover, #nav .sub_active .current_sub a, #nav .sub_active a:hover {
	color:#fff; /* Цвет шрифта активного меню нижнего уровня */
	text-decoration:underline;
	text-align:center;
	float:left;
	background:url("images/right_nav.png") no-repeat right top;
	width: 133px;
}



#nav .select li a:hover .sub, #nav .select li:hover .sub, #nav .sub_active {
	display:block;
	position:absolute;
	width:380px;
	height: 35px;
	top:-35px;
	left:0;
	background:#9E9B9B; /* Фон нижнего уровня */
	padding:0 10px;
	z-index:100;

}



#nav .sub_active {
	z-index:10;
}

#nav .sub, #nav .sub_active {
	margin:0;
	padding:0;
	list-style:none;
}

#nav .fd a{
	display:inline;
	background:none;
	padding:0 10px;
	margin:0;
	font-size:13px; /* Размер шрифта нижнего уровня */
		width:140px;
	white-space:nowrap;
	font-weight:normal;
	border:0;
	color:#eee; /* Цвет шрифта нижнего уровня */
	height:35px;
	line-height:35px;

}



#nav #dpop a{
	display:inline;
	background:none;
	padding:0 10px;
	margin:0;
	font-size:13px; /* Размер шрифта нижнего уровня */
		width:123px;
	white-space:nowrap;
	font-weight:normal;
	border:0;
	color:#eee; /* Цвет шрифта нижнего уровня */
	height:35px;
	line-height:35px;

}

#nav #dpop a:hover{
	display:inline;
	background:none;
	padding:0 10px;
	margin:0;
	font-size:16px; /* Размер шрифта нижнего уровня */
		width:120px;
	white-space:nowrap;
	font-weight:normal;
	border:0;
	color:#eee; /* Цвет шрифта нижнего уровня */
	height:35px;
	line-height:35px;
	background:#999;

}




#nav .sub_active a, #nav .select a:hover .sub li a, #nav .select li:hover .sub li a {
	display:inline;
	background:none;

	margin:0;
	font-size:13px; /* Размер шрифта нижнего уровня */
		padding:0 10px;
	white-space:nowrap;
	font-weight:normal;
	border:0;
	color:#eee; /* Цвет шрифта нижнего уровня */
	height:35px;
	line-height:35px;
	background:url("images/right_nav.png") no-repeat right top;
	width: 133px;
}















.bubbleInfo8 {
	position: relative;
	right: 0px;
	width: 160px;
}
.bubbleInfo16 {
	position: relative;
	right: 0px;
	width: 160px;
}






.popup3 {
	position: absolute;
	display: none;
	z-index: -1;

	font-size: 12px;
	text-align:center;
border: 5px solid #393939;
 background-image:url("http://turnkey.org.ua/solli/bgg.png") ;



width: 143px;




}



.popup3 a {position: absolute;
	display: none;
	z-index: -1;
	border-collapse: collapse;
	font-size: 12px;
	text-align:center;
border: 5px #fff solid;
 background-image:url("http://turnkey.org.ua/solli/bgg.png") ;

width: 143px;
}

.popup2 td.corner {
	height: 15px;
	width: 19px;

}





	.solli1 {position: relative !impontant;
float:right;
	padding-bottom:43px;
	margin:0 auto;
	right: 40px;
	width: 46%;
	background: url("images/nav.png") no-repeat scroll right top transparent}



	.solli3 {position: relative !impontant;
float:right;
	padding-bottom:43px;
	margin:0 auto;
	right: 10px;









	 </style>

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

 <script type="text/javascript">
    jQuery(document).ready(function($) {
      $('a[rel*=facebox]').facebox({
        loading_image : 'loading.gif',

      }) 
    })
  </script>



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

<style type="text/css">
	@import "nav.css";	
	</style>



</head>





  <body >


  <div id="footer">

 <div> 





	<div id="nav">



<ul class="select">
	<li><a href="#"><b>АВТОМОБИЛИ</b></a>
		<ul class="sub">
		<li><div class="solli1">
   <div class="bubbleInfo8">
    <div id="download" class="trigger"><a href="#" class="fd">  ЛЕГКОВЫЕ</a></div>
    <table style="opacity: 0; top: 420px; left: -233px; display: none;" id="dpop" class="popup3">
        <tbody>

        <tr>

             <td >

		<a href="http://mercedes-benz.sollyplus.com/opisanie-c-klass.htm " target="_blank" class="fd">Mercedes Benz</a> 
			<a href="http://volkswagen.sollyplus.com/modeli.htm " target="_blank" class="fd">Фольксваген</a>
	<a href="http://renault.kh.ua/modelnyi-ryad.htm " target="_blank" class="fd">Рено</a>
<a href="http://seat.sollyplus.com/ " target="_blank">Сеат</a>
	<a href="http://www.inter.avto.zp.ua/ " target="_blank">Шкода</a>
</td>

        </tr>


    </tbody></table>

</div>

</div></li>



		<li><div class="solli1">
   <div class="bubbleInfo16">
    <div id="download" class="trigger"><a href="#">   КОМЕРЧЕСКИЕ</a></div>
    <table style="opacity: 0; top: 420px; left: -233px; display: none;" id="dpop" class="popup3">
        <tbody>

        <tr>

            <td class="solli_con">

			<a href="http://mercedes-benz.sollyplus.com/miniveny.htm" target="_blank"> Mercedes Benz</a><br /> 
			<a href="http://volkswagen.sollyplus.com/kommercheskie-avtomobili.htm" target="_blank"> Фольксваген</a><br />
			<a href="http://renault.kh.ua/modelnyi-ryad.htm#gbo" target="_blank"> Рено</a><br />





</td>

        </tr>


    </tbody></table>

</div>

</div></li>

</ul>
	</li>
</ul>

</div>



    </div>

  </body>
</html>

Edited February 17, 2012 by Softlink

Softlink · February 17, 2012

Есть подозрение, что ваша проблема связана с уже описанными багами тут и тут. Т.е. у вас выпадалка сделана таблицей и у нее есть бордеры. Да еще и по 5 пикселей.

Варианты решения:

1) делать на дивах\списках

2) вместо бордеров использовать тень - box-shadow.

myav4ik · February 17, 2012

Есть подозрение, что ваша проблема связана с уже описанными багами тут и тут. Т.е. у вас выпадалка сделана таблицей и у нее есть бордеры. Да еще и по 5 пикселей.
Варианты решения:
1) делать на дивах\списках
2) вместо бордеров использовать тень - box-shadow.

Огромное спасибо..... box-shadow - реально помог!!

Sign In

Неправельное отображение в ХРОМЕ

Question

myav4ik

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

oscora

Link to comment

Share on other sites

myav4ik

Link to comment

Share on other sites

oscora

Link to comment

Share on other sites

K313

Link to comment

Share on other sites

myav4ik

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

myav4ik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information