יש לי בעייה שאני לא מצליח לפתור ורגע לפני שאני מרים ידיים אולי מישהו כאן יודע את התשובה.
התופעה קיימת רק ב-IE7 (ודפדפנים ישנים יותר) כאשר ב-FF (כמובן), כרום ו-IE8 תקין
יש לי את הקוד הבא (מצטער מראש על כמות הקוד אבל זה הכרחי להסבר התופעה):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link type="text/css" rel="stylesheet" media="all" href="test.css" />
</head>
<body>
<ul id="main_menu">
<li class="menu-1195 active-trail item1 first">
<a href="#" class="item1">
<div class="menuicon"></div>
<div class="menutext">
<span class="menu-text-title">MENU 1</span><br><span class="menu-text-description">Title description text 1</span>
</div>
</a>
</li>
<li class="menu-1240 item2">
<a href="#" class="item2">
<div class="menuicon"></div>
<div class="menutext">
<span class="menu-text-title">MENU 2</span><br><span class="menu-text-description">Title description text 2</span>
</div>
</a>
</li>
<li class="menu-1220 item3 last">
<a href="#" class="item3">
<div class="menuicon"></div>
<div class="menutext">
<span class="menu-text-title">MENU 3</span><br><span class="menu-text-description">Title description text 3</span>
</div>
</a>
</li>
</ul>
</body>
</html>
קובץ ה-CSS נראה כך:
body {
direction: rtl;
text-align: right;
}
ul#main_menu {
direction: ltr;
list-style: none;
margin: 0;
padding: 0;
float: right;
z-index: 100;
zoom: 1;
}
ul#main_menu li {
list-style: none;
height: 69px;
padding: 0px 5px;
margin: 0 1px;
float: right;
border: 1px solid #555;
zoom: 1;
}
ul#main_menu li .menuicon {
display: block;
background: transparent url('http://media.smashingmagazine.com/wp-content/uploads/images/free-icons-round-up/free-icons-round-up-85.png') no-repeat -128px -161px;
height: 69px;