Closed
Bug 380925
Opened 18 years ago
Closed 17 years ago
Padding doesn't apply to inline-level li elements when using RTL layouts
Categories
(Core :: Layout: Block and Inline, defect)
Core
Layout: Block and Inline
Tracking
()
RESOLVED
WORKSFORME
People
(Reporter: usamah1228, Unassigned)
Details
(Keywords: rtl)
Attachments
(1 file)
|
2.13 KB,
text/html
|
Details |
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
Hello,
This possible bug relates to several CSS elements, so I'm not sure where does the problem lies exactly, although I highly suspect bad rendering issue when using inline-level specified by using display: inline property value WITH RTL web pages.
Consider the following simple code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Firefox potential bug</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
div#menu {background-color: #271E69; color: #FFF;}
ul {
list-style-type: none;
}
ul li {
display: inline;
}
ul li a {
padding: 0px 10px;
}
ul li a:link, ul li a:visited {
color: #FFF;
text-decoration: none;
font-weight: bold;
}
ul li a:hover {
color: #FCD85D;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li> | </li>
<li><a href="projects.html">Projects</a></li>
<li> | </li>
<li><a href="documnets.html">Documents</a></li>
<li> | </li>
<li><a href="about.html">About</a></li>
<li> | </li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</body>
</html>
It just renders fine. Now add dir="rtl" to the html element. It appears that padding doesn't apply to the a element(s) (padding: 0 10px), and instead it applies to the whole ul element.
Some additional CSS presentational is for better visualization purpose.
Thank you.
Reproducible: Always
Steps to Reproduce:
1.
2.
3.
Is this fixed in the latest alpha of Firefox 3? I'd expect it would be, considering some changes that Uri made last year.
This happens to inline elements in RTL containers.
Please someone fix this issue.
Is it fixed in the latest alpha of Firefox 3?
(And could you attach the testcase in comment 0 as an attachment so everybody looking at the bug doesn't have to paste it into a file themselves?)
|
||
Comment 4•17 years ago
|
||
Usamah: I've looked into your testcase in the trunk, and it looks well there. I'm attaching the testcase so others will be also able to judge it easily.
I'm very sorry. I managed to attach a testcase after David's last comment but got sidetracked by work was between my hands. :(
Thanks Tomer. Can someone change the bug status to confirmed?
Summary: Padding doesn't apply to inline-level li element when using RTL layout → Padding doesn't apply to inline-level li elements when using RTL layouts
|
||
Comment 6•17 years ago
|
||
Mass-assigning the new rtl keyword to RTL-related (see bug 349193).
Keywords: rtl
Which new keyword Ehsan?
Anyway this bug has been fixed in Firefox 3. I'm currently using Beta 5 and it renders the correct behavior without any problems. Check the attached document with Firefox 3 Beta 5 if you've installed it somewhere.
|
|
||
Comment 8•17 years ago
|
||
(In reply to comment #7)
> Which new keyword Ehsan?
The "rtl" keyword (which was added to this bug).
> Anyway this bug has been fixed in Firefox 3. I'm currently using Beta 5 and it
> renders the correct behavior without any problems. Check the attached document
> with Firefox 3 Beta 5 if you've installed it somewhere.
Yeah, this seems to be fixed now. -> WORKSFORME
Status: UNCONFIRMED → RESOLVED
Closed: 17 years ago
Resolution: --- → WORKSFORME
Version: unspecified → Trunk
You need to log in
before you can comment on or make changes to this bug.
Description
•