SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Corner seat
    Posts
    1,069
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    text-align is not working

    I have the following code:
    Code:
    <table class="headerTop">
        <tr>
            <td style="text-align: left;"><a 
                        href='[some url]'><img class="default" src="[some image file]" width="260" height="60" alt="[some alt text]"></a></td>
            <td style="text-align: right;">{AD_NETWORK}</td></tr></table>
    I want {AD_NETWORK} (which is a variable) to align right, but it's not working. Why? What's missing? (this works in IE, but doesn't work in Mozilla).

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perhaps the table isn't the full width of its container.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Corner seat
    Posts
    1,069
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    Perhaps the table isn't the full width of its container.
    I just checked by changing the background color of the table. Table is stretched out. {AD_NETWORK} is not aligned for some reason.

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is {AD_NETWORK} replaced with?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Corner seat
    Posts
    1,069
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    What is {AD_NETWORK} replaced with?
    Just text; it's probably easier to show this. http://www.ohcnetwork.com/contact.php is one of examples. See the lime green rectangle? That's {AD_NETWORK}.

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try floating the table right.

    Code:
            <table class="headerTop">
                <tr>
                    <td style="text-align:left;"><a 
                        href='http://www.ohcnetwork.com/'><img class="default" src="img/common/ohcn.gif" width="260" height="60" alt="Open Healthcare Network, OHCNetwork"></a></td>
                    <td style="text-align:right;">
    <table cellpadding="1" cellspacing="0" style="float:right;width:468px; height:60px; background-color: #000000;"><tr><td><table cellpadding="0" cellspacing="0" style="width:466px; height:58px; background-color: #D0F8D3;"><tr><td align="center" valign="middle"><b><a href="http://CompareCC.com">Credit Card</a></b><br /><font size="-1">Compare Credit Card offers, terms rates and fees. Online applications.</font></td></tr></table></td></tr></table>                </td></tr></table>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Corner seat
    Posts
    1,069
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. I cannot touch the table; it's generated automatically, so I have really no control over it.

    2. However, I came up with the following:
    Code:
    <table class="headerTop">
        <tr>
            <td style="float: left; text-align: left;"><a 
                        href='http://www.ohcnetwork.com/'><img class="default" src="img/common/ohcn.gif" width="260" height="60" alt="Open Healthcare Network, OHCNetwork"></a></td>
            <td style="float: right; text-align: right;">
                </td></tr></table>
    This works 90% of the time, i.e., when Mozilla sets its width < 720 px, top left banner and top right rectangle do not stay inline. They create two layers; top left banner stays at the top and top right rectangle comes down. How can I fix this?

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try removing float:right from the td and adding this to your stylesheet.

    Code:
    .headerTop table {
    float: right;
    }
    .headerTop table table {
    float: none;
    }
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  9. #9
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Corner seat
    Posts
    1,069
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This doesn't seem to do the trick. Any other idea? If not, I'll just use the one that wraps around the rectangle in Mozilla for now.

    BTW, sorry about the cross post. I wanted to get more exposure so that I might be able to get an answer faster.

  10. #10
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you weren't using XHTML 1.0 Strict I'd suggest putting align="right" on the td.

    Why are you using a tableful layout anyway?

    Quote Originally Posted by stoli_sambuca
    This works 90% of the time, i.e., when Mozilla sets its width < 720 px, top left banner and top right rectangle do not stay inline.
    I'm not seeing this.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  11. #11
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Corner seat
    Posts
    1,069
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    I'm not seeing this.
    If you use IE, set its windows size to 400px or so, and view this page, you can see that the top left logo and the top right text ad take only the top 60px. However, if you use Mozilla and do the same, the top left logo stays at the top and the top right text ad goes under the left logo; they take the top 120px. Does this make sense?

  12. #12
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes it makes sense. That happens often with floats.

    I'm not seeing it in Firefox or IE6 even when the window is very narrow.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  13. #13
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Corner seat
    Posts
    1,069
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    Yes it makes sense. That happens often with floats.

    I'm not seeing it in Firefox or IE6 even when the window is very narrow.
    That's weird. What version of Firefox are you using? I'm using version 1.0.

  14. #14
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm using 1.0.1.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  15. #15
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The content of that TD is a nested table. You cannot use text-align to align a block-level element (such as TABLE). If you want the text in that nested table to be right aligned, you need a CSS selector like this:
    Code:
    .headerTop table table td {text-align:right}
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •