vsllc
asked on
Issue getting text to align in FF 2.0. Fine in IE7.
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 id="div_user9"><?php mosLoadModules('user9');?>
</tr>
</table>
</center>
#div_user8{
position:relative;
top:4px;
left:5px;
right:5px;
height:12px;
width:890px;
display:block;
text-align:right;
}
<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 id="div_user9"><?php mosLoadModules('user9');?>
</tr>
</table>
</center>
#div_user8{
position:relative;
top:4px;
left:5px;
right:5px;
height:12px;
width:890px;
display:block;
text-align:right;
}
ASKER
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
</div>
</div>
<span style="font-size: 10pt; font-family: arial,helvetica,sans-serif
</td>
</tr>
</table>
</div>
<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
</div>
</div>
<span style="font-size: 10pt; font-family: arial,helvetica,sans-serif
</td>
</tr>
</table>
</div>
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>.
<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>.
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
</div>
</div>
<span style="font-size: 10pt; font-family: arial,helvetica,sans-serif
</td>
</tr>
</table>
</div>
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
</div>
</div>
<span style="font-size: 10pt; font-family: arial,helvetica,sans-serif
</td>
</tr>
</table>
</div>
ASKER
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?
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?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
<!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');?>
</tr>
</table>
</center>
</body>
</html>
I replaced your <?php mosLoadModules('user8');?>