bad css rendering with ul li tag when entered a persian tag; It works in IE & Opera but not in Firefox

RESOLVED WORKSFORME

Status

()

RESOLVED WORKSFORME
11 years ago
9 years ago

People

(Reporter: ace.of.zerosync, Unassigned)

Tracking

2.0 Branch
x86
Windows Vista
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [CLOSEME 2010-07-30])

Attachments

(2 attachments)

(Reporter)

Description

11 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9

<!--  Sample Code  -->
<!--  It works in IE & Opera but not in Firefox  -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	html, body {
		/*
		
		same bug here
		if set the direction to rtl
		
		English text rendered badly
		
		*/
		direction: ltr;
		margin: 0;
		background: #FFFFFF;
	}

	.divMain {
		position: relative;
		width: 900px;
	}

	.divNav {
		height: 22px;
		background: #FF9900;
		text-align: right;
	}

	.navbar {
		display: inline;
	}

	.navbar li {
		display: inline;
		list-style: none;
		border-left: 1px solid #000000;
		padding: 0px 20px;
	}
	
	.navbar li a {
		color: #FFFFFF;
		text-decoration: none;
	}
	
	.navbar li a:hover {
		color: #FF9900;
		background: #FFFFFF;
	}	
</style>
</head>

<body>

	<center>
    	<div class="divMain">
        
            <br />
            <br />
            <br />
            <br />
            
        
        	<!-- It's OK
            	// Start OK
            -->
            <div class="divNav" style="text-align: left;">
            	<ul class="navbar">
                	<li><a href="javascript:;">Home</a></li>
                	<li><a href="javascript:;">Site Map</a></li>
                	<li><a href="javascript:;">Search</a></li>
                	<li><a href="javascript:;">Links</a></li>
                	<li><a href="javascript:;">Contact us</a></li>
                	<li><a href="javascript:;">About</a></li>
                	<li><a href="javascript:;">Print</a></li>
                </ul>
            </div>
        	<!-- It's OK
            	// End OK
            -->

            
            <br />
            <br />
            <br />
            <br />

            
        	<!-- It's BAD
            	// Start BAD
            -->
            <div class="divNav" style="direction: rtl;">
            	<ul class="navbar">
                   	<li><a href="javascript:;">صفحه اصلي</a></li>
                   	<li><a href="javascript:;">نقشه سايت</a></li>
                   	<li><a href="javascript:;">جسنجو</a></li>
                   	<li><a href="javascript:;">سايت هاي مرتبط</a></li>
                   	<li><a href="javascript:;">تماس با ما</a></li>
                   	<li><a href="javascript:;">درباره</a></li>
                   	<li><a href="javascript:;">چاپ</a></li>
                </ul>
            </div>
        	<!-- It's BAD
            	// End BAD
            -->
            
        </div>
        </center>
</body>
</html>

Reproducible: Always

Steps to Reproduce:
1.
2.
3.
(Reporter)

Comment 1

11 years ago
sorry the code incomplete

that's completed
<!--  Sample Code  -->
<!--  It works in IE & Opera but not in Firefox  -->


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	html, body {
		/*
		
		same bug here
		if set the direction to rtl
		
		English text rendered badly
		
		*/
		direction: ltr;
		margin: 0;
		background: #FFFFFF;
	}

	.divMain {
		position: relative;
		width: 900px;
	}

	.divNav {
		height: 22px;
		background: #FF9900;
		text-align: right;
	}

	.navbar {
		display: inline;
	}

	.navbar li {
		display: inline;
		list-style: none;
		border-left: 1px solid #000000;
		padding: 0px 20px;
	}
	
	.navbar li a {
		color: #FFFFFF;
		text-decoration: none;
	}
	
	.navbar li a:hover {
		color: #FF9900;
		background: #FFFFFF;
	}	
</style>
</head>

<body>

	<center>
    	<div class="divMain">
        
            <br />
            <br />
            <br />
            <br />
            
        
        	<!-- It's OK
            	// Start OK
            -->
            <div class="divNav" style="text-align: left;">
            	<ul class="navbar">
                	<li><a href="javascript:;">Home</a></li>
                	<li><a href="javascript:;">Site Map</a></li>
                	<li><a href="javascript:;">Search</a></li>
                	<li><a href="javascript:;">Links</a></li>
                	<li><a href="javascript:;">Contact us</a></li>
                	<li><a href="javascript:;">About</a></li>
                	<li><a href="javascript:;">Print</a></li>
                </ul>
            </div>
        	<!-- It's OK
            	// End OK
            -->

            
            <br />
            <br />
            <br />
            <br />

            
        	<!-- It's BAD
            	// Start BAD
            -->
            <div class="divNav" style="direction: rtl;">
            	<ul class="navbar">
                   	<li><a href="javascript:;">صفحه اصلي</a></li>
                   	<li><a href="javascript:;">نقشه سايت</a></li>
                   	<li><a href="javascript:;">جسنجو</a></li>
                   	<li><a href="javascript:;">سايت هاي مرتبط</a></li>
                   	<li><a href="javascript:;">تماس با ما</a></li>
                   	<li><a href="javascript:;">درباره</a></li>
                   	<li><a href="javascript:;">چاپ</a></li>
                </ul>
            </div>
        	<!-- It's BAD
            	// End BAD
            -->
            
        </div>
        </center>
</body>
</html>
(Reporter)

Comment 2

11 years ago
Created attachment 289946 [details]
it's an example
Have you tested how it renders in the just released Firefox 3.0 beta 1?
http://www.mozilla.com/en-US/firefox/3.0b1/releasenotes/

Your code works correctly on my side (OS X) with nightly builds.

Updated

11 years ago
Duplicate of this bug: 405132

Comment 5

11 years ago
Created attachment 323422 [details]
Uncorrect rendering showcase

The document demostrates how inline paddings are ingnored in hebrew text.
This bug was originally reported on Firefox 2.x or older, which is no longer supported and will not be receiving any more updates. I strongly suggest that you update to Firefox 3.6.6 or later, update your plugins (flash, adobe, etc.), and retest in a new profile. If you still see the issue with the updated Firefox, please post here. Otherwise, please close as RESOLVED > WORKSFORME
http://www.mozilla.com
http://support.mozilla.com/kb/Managing+profiles
http://support.mozilla.com/kb/Safe+mode
Whiteboard: [CLOSEME 2010-07-30]
Version: unspecified → 2.0 Branch
(Reporter)

Comment 7

9 years ago
I'm using Iron at this moment. I didn't have Firefox installed. I downloaded Firefox 3.6.6. And it seems that it works.

Thank you. It just works fine now.


userAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6 (.NET CLR 3.5.30729)
Status: UNCONFIRMED → RESOLVED
Last Resolved: 9 years ago
Resolution: --- → FIXED
Resolution: FIXED → WORKSFORME
You need to log in before you can comment on or make changes to this bug.