پریدن یک قسمت از منو در ie6,7

sranimation · Jan 26, 2011

سلام. من یک منوی افقی از یک سایت انگلیسی گرفتم (منو از چپ به راست باز میشد و منو در سمت چپ قرار می گرفت. سپس آن را تغییر دادم و فارسی کردم. الان توی Opera , firefox و IE8 درست کار میکند ولی در IE6,7 قسمت هایی از منو که افقی باز می شوند در سمت چپ صفحه قرار میگیرند ولی قسمت هایی از منو که زیرشاخه ندارند سر جایشان می مانند.
مشکل از چیه؟

کد:

<div id="slider">
        <div class="sidebarmenu">
        <ul id="sidebarmenu1">
        <li><a href="http://www.turbogroup.ir/index.php">صفحه اصلی</a></li>
        <li><a href="#">توربین توراب</a>
          <ul>
          <li><a href="http://www.turbogroup.ir/torab/torab1.php">معرفی پروژه</a></li>
          <li><a href="http://www.turbogroup.ir/torab/torab2.php">افتخارات</a></li>
          <li><a href="http://www.turbogroup.ir/torab/torab3.php">مقالات و کتاب های مرتبط</a></li>
          <li><a href="http://www.turbogroup.ir/torab/torab4.php">گزارشات فنی</a></li>
          <li><a href="http://www.turbogroup.ir/torab/torab5.php">فیلم و عکس</a></li>
          <li><a href="http://www.turbogroup.ir/torab/torab6.php">اعضا</a></li>
          </ul>
        </li>
        <li><a href="#">شناور ایرانا</a>
          <ul>
          <li><a href="http://www.turbogroup.ir/irana/irana1.php">معرفی پروژه</a></li>
          <li><a href="http://www.turbogroup.ir/irana/irana2.php">افتخارات</a></li>
          <li><a href="http://www.turbogroup.ir/irana/irana3.php">مقالات و کتاب های مرتبط</a></li>
          <li><a href="http://www.turbogroup.ir/irana/irana4.php">گزارشات فنی</a></li>
          <li><a href="http://www.turbogroup.ir/irana/irana5.php">فیلم و عکس</a></li>
          <li><a href="http://www.turbogroup.ir/irana/irana6.php">اعضا</a></li>
          </ul>
        </li>
        <li><a href="#">شناور تورنادو</a>
          <ul>
          <li><a href="http://www.turbogroup.ir/tornado/tornado1.php">معرفی پروژه</a></li>
          <li><a href="http://www.turbogroup.ir/tornado/tornado3.php">مقالات و کتاب های مرتبط</a></li>
          <li><a href="http://www.turbogroup.ir/tornado/tornado4.php">گزارشات فنی</a></li>
          <li><a href="http://www.turbogroup.ir/tornado/tornado5.php">فیلم و عکس</a></li>
          <li><a href="http://www.turbogroup.ir/tornado/tornado6.php">اعضا</a></li>  </ul>
        </li>
        <li><a href="http://www.turbogroup.ir/sponsor.php">حامیان مالی</a></li>
        <li><a href="http://www.turbogroup.ir/contact.php">تماس با ما</a></li>
        </ul>    
        </div>
    </div>

کد:

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 14px Arial, Helvetica, sans-serif;;
width: 140px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}
 
.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow:hidden; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color:#069; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color:#046;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 150px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(images/left.gif) no-repeat 97% 50%;
background-position:left;
}

 
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: right; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */

عکس اولی در حین باز شدن صفحه در IE7 و عکس دوم پس از باز شدن است.
در IE8، Firefox و Opera هیچ مشکلی نداشت

echessdesign · Jan 27, 2011

درود بر شما
برای اینکه استایل کل منو بهم نریزد، می توانید تغییرات استایل منو مورد نظر خود را برای IE7 انحصارا وارد کنید:

کد:

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

sranimation · Jan 27, 2011

مشکلم اینه که نمی دانم کدام قسمت از کد باعث میشه که قسمت هایی که زیر شاخه دارن بپرن سمت چپ صفحه.

meysam-fathi · Jan 28, 2011

اگه با یه اسکیرن شات بیشتر توضیح بدی ممنون میشم

sranimation · Jan 28, 2011

عکس اضافه شد.

meysam-fathi · Jan 28, 2011

از چیزی که تو عکس معلومه اینطور به نظر میرسه li هایی که دارای زیر مجموعه هستند دارای یک کلاس خواص هستند که اون احتمالا اون داره روش تاثیر میزاره - با فایر باگ بگیرش چکش کن

sranimation · Jan 29, 2011

چطوری توی فایر باگ چک کنم وقتی توی فایرفاکس مشکلی نداره؟

sranimation · Jan 29, 2011

کد:

.sidebarmenu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 140px;
	border-bottom: 1px solid #ccc;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	}

.sidebarmenu ul li {
	position: relative;
	[COLOR="DarkRed"]float:right;
	width:140px;[/COLOR]
	}
	
.sidebarmenu li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	}

.sidebarmenu ul li a {
	display: block;
	text-decoration: none;
	color:#F2F2F2;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	background-color:#069;
	overflow:hidden;
	}
	
.sidebarmenu ul li a:hover {
	background-color:#0093D9;
	}

درست شد
اندازه طراحی کل سایت طول کشید تا درست بشه!