:: IE6 & 7 RTL Bug with Floats

**tawqee3** · Jul 23, 2007 21:33

Good day everyone,

I’ve developed a website that has English & Arabic interfaces. English is a Left-To-Right language where Arabic is Right-To-Left. So, as per W3 recommendations, I’ve added the following code snippet to the XHTML of the Arabic template:

HTML Code:

<html dir="rtl" lang="ar" xml:lang="ar" xmlns="http://www.w3.org/1999/xhtml">

The issue is caused by dir="rtl". The issue doesn’t appear unless the page is containing a floated link using CSS. In that case, once you hover over the link with your mouse the element or its parent will shift or effectively disappear! That’s it!

Summary, in IE 6&7: dir="rtl" + floated link = Unstable layout

You can test the code below for a demo of the bug and ur kind support in highly appreciated

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" lang="ar" xml:lang="ar" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type"	content="text/html; charset=utf-8" />
	<title>المؤتمر التاسع</title>
	<meta name="author" content="توقيع - TawQee3.com" />
<style type="text/css">
/***** Global Settings *****/
html, body {
border:none;
margin:0;
padding:0;
font:100.1%/1.4 Tahoma, Verdana;
}
 
/***** Common Formatting *****/
body{
	background-color:#232323;
	width:auto;
/*	direction:rtl; unicode-bidi: embed;*/
}
html>body{height:auto}
html, body {height:100%}

h1, h2, h3, h4, h5{
	font-family:Arial, Helvetica, sans-serif;
	color:#12679B;
	margin:0 0 1em;
	line-height:1.1;
}
h1{
	font-size:2em;
}

p, ul, ol {
padding:0;
margin:0 0 1em;
}
 
ul, ol {
margin:0 2em 1em 0;
}
 
 
/***** Links *****/
 
a, a:visited, a:hover{
	text-decoration:none;
	color:#0C96F8;
}
a:hover{
	background-color:#ffffe0;
}
 
/***** Global Classes *****/
 
.clear{ clear:both; }
.clearfix:after{
    content: " "; 
    display: block; 
    height: 0; 
    clear: both;
    visibility: hidden;
}
.clearfix	{ display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.right		{ float:right; }
.left		{ float:left; }

/*<layout>*/ 
#extraWrapper{
	width:605px;
	margin:0 auto;
	background-color:#000;
}
#header{
	position:relative;
	background-color:#232323;
	text-align:center;
	padding:.85em 0 0;
}
#header a#logo{
	width:102px; height:65px;
	position:absolute;
	right:50%; top:.5em;
	margin:0 -51px 0 0;
}
.gLinks{
	margin:0 1em;
	font-size:.9em;
	list-style:none;
	display:block;
	height:60px;
}
.gLinks li{
	float:right;
	text-align:right;
	clear:both;
}
.gLinks li.left{
	text-align:left;
	float:left;
}
.gLinks a, .gLinks a:visited{
	color:#666;
}
.gLinks a:hover{
	color:#999;
	background-color:transparent; /*2 reset the global setting*/
}
.gLinks a acronym{
	border:none;
	cursor:pointer;
}
#body{
	background-color:#fff;
	color:#111;
	padding:1em 1.5em;
	border-top:1px solid #8b0000;
	overflow:hidden;
	min-height:190px;
}
#body h1 {
	font:italic bold 1.3em/1.1 Arial, Helvetica, sans-serif;
	text-align:left;
	color:#ccc;
}
#footer{
	font:.7em Tahoma, Verdana;
	text-align:center;
	padding:1.25em 1em 1em;
	border-bottom:3px solid #000;
}
#footer, #footer a, #footer a:visited{
	color:#ccc;
}
#footer a:hover{
	background-color:#232323;
}
/*</layout>*/ 
</style>
</head>
<body>
<div id="extraWrapper">
	<div id="header">
		<a href="#" id="logo">Logo</a>
		<!--[if IE]>
		<div></div>
		<![endif]-->
		<ul class="gLinks">
			<li><a href="#">Hover over these links</a></li>
			<li><a href="#">Hover over these links</a></li>
			<li class="left"><a href="#">Hover over these links</a></li>
			<li class="left"><a href="#">Hover over these links</a></li>
		</ul>
	</div>
	<div id="body" class="clearfix">
		<h1>عنوان</h1>
		<p>مثال نصي.</p>
	</div>
	<div id="footer">
		<p>©2007 <a href="#" class="tawqee3">تصميم و صيانة <strong>توقيع</strong></a></p>
	</div>
</div>
</body>
</html>