Closed Bug 15333 Opened 25 years ago Closed 25 years ago

Incorrect alignment

Categories

(Core :: Layout, defect, P3)

Product:
Core
Component:
Layout
Platform:
x86
Windows 98
Type:
defect

Tracking

()

Status:
VERIFIED INVALID

People

(Reporter: azham, Assigned: peterl-retired)

References

Details

If a text is align using CSS tag text-align, the text is left align eventhough the text-align is specified as right or centre
Assignee: rickg → peterl
One for you or Kipp. Lets start with you.
Testcase? Sample URL? Anyone? Bueller?

CSS alignment pproperties getting overridden inside tables is a known bug. But I
have no way of knowing the circumstances of this problem without a testcase...
From the reporter (in the future please attach the test cases to the bug
instead of mailing them directly):


This is an example with working text-align positioning:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.right {  text-align: right}
.left {  text-align: left}
.ctr {  text-align: center}
-->
</style></head>

<body bgcolor="#FFFFFF">
<div id="Layer1" style="position:absolute; left:50px; top:98px; width:266px;
height:168px; z-index:1; background-color: #FF3333;
layer-background-color: #FF3333; border: 1px none #000000">
  <p class="ctr">whatever</p>
</div>
<div id="Layer2" style="position:absolute; left:464px; top:138px; width:188px;
height:141px; z-index:2; background-color:
#33CC00; layer-background-color: #33CC00; border: 1px none #000000">
  <p class="right">whatever</p>
</div>
<div id="Layer3" style="position:absolute; left:189px; top:322px; width:318px;
height:128px; z-index:3; background-color:
#CC9933; layer-background-color: #CC9933; border: 1px none #000000">
  <p class="left">whatever</p>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#3333FF">
      <p class="right">whatever</p>
    </td>
    <td bgcolor="#CCCCFF">
      <p class="ctr">whatever</p>
    </td>
    <td bgcolor="#CCFFCC">
      <p class="left">whatever</p>
    </td>
  </tr>
  <tr>
    <td bgcolor="#FF66FF">
      <p>whatever</p>
    </td>
    <td bgcolor="#33FF66">
      <p>whatever</p>
    </td>
    <td bgcolor="#99FFFF">
      <p>whatever</p>
    </td>
  </tr>
</table>
</body>
</html>

This is the one not working :

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.right {  text-align: right}
.left {  text-align: left}
.ctr {  text-align: center}
-->
</style></head>

<body bgcolor="#FFFFFF">
<div id="Layer1" style="position:absolute; left:50px; top:98px; width:266px;
height:168px; z-index:1; background-color: #FF3333;
layer-background-color: #FF3333; border: 1px none #000000">
  <p><a href="#" class="ctr">whatever</a></p>
</div>
<div id="Layer2" style="position:absolute; left:464px; top:138px; width:188px;
height:141px; z-index:2; background-color:
#33CC00; layer-background-color: #33CC00; border: 1px none #000000">
  <p><a href="#" class="right">whatever</a></p>
</div>
<div id="Layer3" style="position:absolute; left:189px; top:322px; width:318px;
height:128px; z-index:3; background-color:
#CC9933; layer-background-color: #CC9933; border: 1px none #000000">
  <p><a href="#" class="left">whatever</a></p>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#3333FF">
      <p><a href="#" class="right">whatever</a></p>
    </td>
    <td bgcolor="#CCCCFF">
      <p><a href="#" class="ctr">whatever</a></p>
    </td>
    <td bgcolor="#CCFFCC">
      <p><a href="#" class="left">whatever</a></p>
    </td>
  </tr>
  <tr>
    <td bgcolor="#FF66FF">
      <p><a href="#">whatever</a></p>
    </td>
    <td bgcolor="#33FF66">
      <p><a href="#">whatever</a></p>
    </td>
    <td bgcolor="#99FFFF">
      <p><a href="#">whatever</a></p>
    </td>
  </tr>
</table>
</body>
</html>

It seems that when text-align is used with <a> tag, it won't align properly. I'm
also wondering why is there a spacing on top of the
word in the layers(div tag)?
Status: NEW → RESOLVED
Closed: 25 years ago
Resolution: --- → INVALID
The text-align property only applies to block level elements. <A> tags are
inline elements, not blocks, so text-align does not apply to them, per CSS spec.
See http://www.w3.org/TR/REC-CSS2/text.html#propdef-text-align.
Status: RESOLVED → VERIFIED
Based on Peter's comments, marking as verified invalid.
SPAM. HTML Element component deprecated, changing component to Layout. See bug
88132 for details.
Component: HTML Element → Layout
*** Bug 144698 has been marked as a duplicate of this bug. ***
You need to log in before you can comment on or make changes to this bug.