Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Issue getting text to align in FF 2.0.  Fine in IE7.

Posted on 2007-10-19
8
Medium Priority
?
182 Views
Last Modified: 2010-04-09
Usually my issues are with IE, but this time I'm having issues getting test to align to the right in FF.  I have a <div> that I put inside a table that spans roughly the width of my web page.  I want the text to align to the right.  It works in IE but not FF.  Can't figure out why.  Here's my CSS and HTML.  Thanks.

<center>
  <table border="0" cellpadding="0" cellspacing="0" id="table_footer">
    <tr>
      <td align="left" valign="top"><div id="div_user8"><?php mosLoadModules('user8');?></div>
      <div id="div_user9"><?php mosLoadModules('user9');?></div></td>
       </tr>
  </table>
  </center>

#div_user8{
position:relative;
top:4px;
left:5px;
right:5px;
height:12px;
width:890px;
display:block;
text-align:right;
}
0
Comment
Question by:vsllc
  • 3
  • 3
  • 2
8 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 20112394
This works fine for me:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#div_user8{
  position:relative;
  top:4px;
  left:5px;
  right:5px;
  height:12px;
  width:890px;
  display:block;
  text-align:right;
}
</style>
</head>
<body>
<center>
  <table border="0" cellpadding="0" cellspacing="0" id="table_footer">
    <tr>
      <td align="left" valign="top"><div id="div_user8">Test</div>
      <div id="div_user9"><?php mosLoadModules('user9');?></div></td>
       </tr>
  </table>
</center>
</body>
</html>

I replaced your <?php mosLoadModules('user8');?> with some text. Possibly, mosLoadModules() is echoing something that conflicts? What source are you getting in the View Source?
0
 

Author Comment

by:vsllc
ID: 20112432
Here's what appears in Source for the mosLoadModules('user8').  For testing purposes, I dumped in 3 dummy hyperlinks since the pages are not built yet.


<center>
  <table border="0" cellpadding="0" cellspacing="0" id="table_footer">
    <tr>
      <td align="left" valign="top"><div id="div_user8"><table cellpadding="0" cellspacing="0" class="moduletable">
                        <tr>
                  <td>
                        <div align="right">
<div align="right">
<a href="http://www.nfl.com" target="_self"><span style="font-size: 10pt; font-family: arial,helvetica,sans-serif"><span style="color: #000000"></span></span></a><span style="font-size: 10pt; font-family: arial,helvetica,sans-serif"><span style="font-size: 10pt; font-family: arial,helvetica,sans-serif; color: #9a0507"><a href="http://www.nfl.com" target="_self">Terms of Service</a>  | <a href="http://www.espn.com" target="_self">Employment</a>  | <a href="http://www.google.com" target="_self">Privacy Policy</a></span></span>

</div>
</div>
<span style="font-size: 10pt; font-family: arial,helvetica,sans-serif"><span style="font-size: 10pt; font-family: arial,helvetica,sans-serif; color: #9a0507"> </span></span>
                  </td>
            </tr>
            </table>
            </div>
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 20112513
The text-align property is only meant to center text, not block elements. You can fix this by wrapping around your <table> tags (or your PHP), this:

<div align="right"> TABLE </div>

This will ensure the table is right aligned. Also, make sure you need a table for what you are making. If you only need inline elements like text or <span>, you won't need to bother with the extra <div>.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 21

Expert Comment

by:nizsmo
ID: 20112542
Your issue from your example code which you most recently posted as to why the text is not aligning right is because your table is restricting the text from doing so.

This will work, I simply added a width="100%" to the table as an attribute:


<center>
  <table border="0" cellpadding="0" cellspacing="0" id="table_footer">
    <tr>
      <td align="left" valign="top"><div id="div_user8"><table width="100%" cellpadding="0" cellspacing="0" class="moduletable">
                        <tr>
                  <td>
                        <div align="right">
<div align="right">
<a href="http://www.nfl.com" target="_self"><span style="font-size: 10pt; font-family: arial,helvetica,sans-serif"><span style="color: #000000"></span></span></a><span style="font-size: 10pt; font-family: arial,helvetica,sans-serif"><span style="font-size: 10pt; font-family: arial,helvetica,sans-serif; color: #9a0507"><a href="http://www.nfl.com" target="_self">Terms of Service</a>  | <a href="http://www.espn.com" target="_self">Employment</a>  | <a href="http://www.google.com" target="_self">Privacy Policy</a></span></span>

</div>
</div>
<span style="font-size: 10pt; font-family: arial,helvetica,sans-serif"><span style="font-size: 10pt; font-family: arial,helvetica,sans-serif; color: #9a0507"> </span></span>
                  </td>
            </tr>
            </table>
            </div>
0
 

Author Comment

by:vsllc
ID: 20113040
If I right align the entire table, won't all items in the table be aligned to the right?  There are two items in the table, 'user8' and 'user9'.  I want the user8 right justified and user9 to remain left justified.

A table may not be the best method.  What I'm trying to accomplish is this:

I have a footer image and I want to post a series of links in the upper right and lower left corners fo the image.  Is there a simpler way?
0
 
LVL 21

Assisted Solution

by:nizsmo
nizsmo earned 500 total points
ID: 20113123
If you strip away the table, and only have the div, won't this be what you want?

<div id="div_user8" align="right"><?php mosLoadModules('user8');?></div>
      <div id="div_user9"><?php mosLoadModules('user9');?></div></td>
0
 
LVL 36

Accepted Solution

by:
Zyloch earned 1500 total points
ID: 20113124
A simple possibility is:

<html>
<head>
<title>Testing Placement</title>
<style type="text/css">
  .toplinks {
    position: absolute;
    top: 0px;
    right: 0px;
  }

  .bottomlinks {
    position: absolute;
    bottom: 0px;
    left: 0px;
  }

  #footer {
    position: relative;
    height: 380px;
    width: 380px;
    background-image: url(http://www1.istockphoto.com/file_thumbview_approve/2628625/2/istockphoto_2628625_valentine_banner.jpg);
  }
</style>
</head>
<body>
<div id="footer">
<div class="toplinks">Text 1</div>
<div class="bottomlinks">Text 2</div>
</div>
</body>
</html>

You would just need to modify the page to suit your needs. For example, you may want to make the styles inline so that you can echo them with your PHP, or you may want to keep the image in an <img> tag.
0
 

Author Comment

by:vsllc
ID: 20113250
Thanks for the help and making me see clearly.  I got so wrapped up in making the table work I didn't even think about simply removing it.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question