1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Why Is This Text Not Aligned On Top

Discussion in 'HTML & JavaScript' started by tunescool, Oct 12, 2014.

  1. tunescool

    tunescool Power Member

    Joined:
    Jul 23, 2011
    Messages:
    570
    Likes Received:
    63
    Gender:
    Male
    Home Page:
    ive known some html for a long time, nothing special just the basics, but why does is this text not on the top. vertical align does nothing

    by default 2014-10-12 at 12.52.20 AM.jpg

    Code:
    <table width="100%">
    <tr>
    <td width="60%" style="padding-left: 10px; font-size: 24px; font-weight: bold; font-style: italic;">
    
    The Notable Nook Movie Preview Site
    
    </td>
    <td width="10%" style="font-size: 18px; font-weight: bold;">
    <a href="http://nookselfimprove.com/?page_id=10" target="_blank"><font color="000000">Buy DVDs</font></a><br/>
    <a href="http://nookselfimprove.com/?page_id=12" target="_blank"><font color="000000">Buy CDs</font></a>
    
    </td>
    <td width="30%" style="padding-bottom: 10px; font-size: 12px; font-weight: bold;">
    
    <a href="http://forumbytunes.com" target="_blank"><font color="000000">Forum By Tunes/A General Forum</font></a><br/>
    <a href="http://seonook.net" target="_blank"><font color="000000">Social Media/Backlinks/Content/SEO Packages</font></a><br/>
    <a href="http://nookselfimprove.com" target="_blank"><font color="000000">The Notable Nook Self Improvement Blog</font></a><br/>
    <a href="http://naturalpregnancysymptoms.com" target="_blank"><font color="000000">The Notable Nook Pregnancy Blog</font></a><br/>        
    </tr>
    </table>
     
  2. Masterptc

    Masterptc Regular Member

    Joined:
    Aug 9, 2011
    Messages:
    413
    Likes Received:
    600
    Home Page:
    What exactly are you trying to accomplish, i dont understand?
     
  3. tunescool

    tunescool Power Member

    Joined:
    Jul 23, 2011
    Messages:
    570
    Likes Received:
    63
    Gender:
    Male
    Home Page:
    to have the text aligned on the top
     
  4. Masterptc

    Masterptc Regular Member

    Joined:
    Aug 9, 2011
    Messages:
    413
    Likes Received:
    600
    Home Page:
    Can you elaborate, which text do you want on top, on top of where? if you can draw some arrows and cut and paste how you want that image to look, maybe i can help.
     
  5. seopencil

    seopencil Supreme Member

    Joined:
    Aug 3, 2011
    Messages:
    1,435
    Likes Received:
    519
    Location:
    BHW
    you need to add verticle-align on td style


    here is your complete code

    Code:
    <table width="100%">
    
    <tr>
    
    
    <td width="60%" style="vertical-align: top; padding-left: 10px; font-size: 24px; font-weight: bold; font-style: italic;">
    
    
    
    
    
    
    The Notable Nook Movie Preview Site
    
    
    
    
    
    
    </td>
    
    
    <td width="10%" style="vertical-align: top; font-size: 18px; font-weight: bold;">
    
    
    <a href="http://nookselfimprove.com/?page_id=10" target="_blank"><font color="000000">Buy DVDs</font></a><br/>
    
    
    <a href="http://nookselfimprove.com/?page_id=12" target="_blank"><font color="000000">Buy CDs</font></a>
    
    
    
    
    
    
    </td>
    
    
    <td width="30%" style="padding-bottom: 10px; font-size: 12px; font-weight: bold;">
    
    
    
    
    
    
    <a href="http://forumbytunes.com" target="_blank"><font color="000000">Forum By Tunes/A General Forum</font></a><br/>
    
    
    <a href="http://seonook.net" target="_blank"><font color="000000">Social Media/Backlinks/Content/SEO Packages</font></a><br/>
    
    
    <a href="http://nookselfimprove.com" target="_blank"><font color="000000">The Notable Nook Self Improvement Blog</font></a><br/>
    
    
    <a href="http://naturalpregnancysymptoms.com" target="_blank"><font color="000000">The Notable Nook Pregnancy Blog</font></a><br/>
    
    
    </tr>
    
    
    </table>
     
    • Thanks Thanks x 1
    Last edited: Oct 12, 2014
  6. tunescool

    tunescool Power Member

    Joined:
    Jul 23, 2011
    Messages:
    570
    Likes Received:
    63
    Gender:
    Male
    Home Page:

    ive had a v align in there and its never worked, i put this in now and it still does nothing

    vertical-align: top;
     
  7. tunescool

    tunescool Power Member

    Joined:
    Jul 23, 2011
    Messages:
    570
    Likes Received:
    63
    Gender:
    Male
    Home Page:
    its circled there for those who cant figure it out
     
  8. seopencil

    seopencil Supreme Member

    Joined:
    Aug 3, 2011
    Messages:
    1,435
    Likes Received:
    519
    Location:
    BHW
    try my complete code - post 5
     
  9. tunescool

    tunescool Power Member

    Joined:
    Jul 23, 2011
    Messages:
    570
    Likes Received:
    63
    Gender:
    Male
    Home Page:
    there is no align in the table you posted
     
  10. seopencil

    seopencil Supreme Member

    Joined:
    Aug 3, 2011
    Messages:
    1,435
    Likes Received:
    519
    Location:
    BHW
    oh i edited

    check now
     
  11. tunescool

    tunescool Power Member

    Joined:
    Jul 23, 2011
    Messages:
    570
    Likes Received:
    63
    Gender:
    Male
    Home Page:
    it moves the text up some, like in the middle, but not to the top, flush with the top of the links on the rite
     
  12. srb888

    srb888 Elite Member

    Joined:
    Jul 30, 2008
    Messages:
    3,260
    Likes Received:
    5,067
    Gender:
    Male
    Occupation:
    WebzSurfer
    Location:
    Sun, Mon, Tue, WTF, Sat!!! :)
    Add >>
    vertical-align: top;
    in the following lines and the 2 elements will align as you want them to. :)

    ~~~ 1:
    <td width="60%" style="padding-left: 10px; font-size: 24px; font-weight: bold; font-style: italic; vertical-align: top;">The Notable Nook Movie Preview Site</td>

    ~~~ 2:
    <td width="60%" style="padding-left: 10px; font-size: 24px; font-weight: bold; font-style: italic; vertical-align: top;">


    P.S.:
    Here is the completed code with modification. Name the file "test.html", save it in c:\ (c root), and in your browser open it with >> c:\test.html. You can see the lines working as you wished. Green lines are my additions/modifications...


    Code:
    [COLOR=#00ff00][B]<html>
    <head>
    
    <style> 
        <!--
        a { text-decoration: none;}
        -->
       </style>
    
    </head>
    
    <body>[/B][/COLOR]
    
    <table width="100%">
    <tr>
    <td width="60%" style="padding-left: 10px; font-size: 24px; font-weight: bold; font-style: italic; text-decoration: none; [B][COLOR=#00ff00]vertical-align: top;[/COLOR][/B]">The Notable Nook Movie Preview Site
    
    </td>
    <td width="10%" style="font-size: 18px; font-weight: bold; [COLOR=#00ff00][B]vertical-align: top;[/B][/COLOR]">
    <a href="http://nookselfimprove.com/?page_id=10" target="_blank"><font color="000000">Buy DVDs</font></a><br/>
    <a href="http://nookselfimprove.com/?page_id=12" target="_blank"><font color="000000">Buy CDs</font></a>
    
    </td>
    <td width="30%" style="padding-bottom: 10px; font-size: 12px; font-weight: bold;">
    
    <a href="http://forumbytunes.com" target="_blank"><font color="000000">Forum By Tunes/A General Forum</font></a><br/>
    <a href="http://seonook.net" target="_blank"><font color="000000">Social Media/Backlinks/Content/SEO Packages</font></a><br/>
    <a href="http://nookselfimprove.com" target="_blank"><font color="000000">The Notable Nook Self Improvement 
    
    Blog</font></a><br/>
    <a href="http://naturalpregnancysymptoms.com" target="_blank"><font color="000000">The Notable Nook Pregnancy 
    
    Blog</font></a><br/>        
    </tr>
    </table>
    
    [COLOR=#00ff00][B]</body>
    </html>[/B][/COLOR]
     
    Last edited: Oct 12, 2014
  13. tunescool

    tunescool Power Member

    Joined:
    Jul 23, 2011
    Messages:
    570
    Likes Received:
    63
    Gender:
    Male
    Home Page:
    ive done that over and over again and it doesnt
     
  14. srb888

    srb888 Elite Member

    Joined:
    Jul 30, 2008
    Messages:
    3,260
    Likes Received:
    5,067
    Gender:
    Male
    Occupation:
    WebzSurfer
    Location:
    Sun, Mon, Tue, WTF, Sat!!! :)
    OK, then I think you've added a "!important;" added somewhere which is not allowing the "vertical-align: none;" to align to the top as we can... just check all your "!important;" in the css/code, and any related code is found, remove that !important; part and check...

    Check all the "align" codes in the file.
     
  15. tunescool

    tunescool Power Member

    Joined:
    Jul 23, 2011
    Messages:
    570
    Likes Received:
    63
    Gender:
    Male
    Home Page:
    this is the only !important; in the css that the search found. the table i have doesnt even have anything to do with the site the way it was, i just added it

    .awesomeButton{
    display:inline !important;

    i tried to save that file and open it but really dont know how and only got this

    by default 2014-10-12 at 2.46.28 AM.jpg

    i added your table to the file where everything is and it only goes up some, the table on top

    by default 2014-10-12 at 2.47.54 AM.jpg
     
  16. srb888

    srb888 Elite Member

    Joined:
    Jul 30, 2008
    Messages:
    3,260
    Likes Received:
    5,067
    Gender:
    Male
    Occupation:
    WebzSurfer
    Location:
    Sun, Mon, Tue, WTF, Sat!!! :)
    I am on my android ATM and the electric power has been cut off by the corporation for some repairs, hence can't help right now. Just show the page link to someone whom you can trust and the solution can be found asap.

    P.s.:

    Add this in the HEAD section of this HTML file and check:

    <style>
    <!--
    a { text-decoration: none; vertical-align: top !important;}
    -->
    </style>
     
    Last edited: Oct 12, 2014
  17. srb888

    srb888 Elite Member

    Joined:
    Jul 30, 2008
    Messages:
    3,260
    Likes Received:
    5,067
    Gender:
    Male
    Occupation:
    WebzSurfer
    Location:
    Sun, Mon, Tue, WTF, Sat!!! :)
    OK, the electricity is back, so you may PM me the link to the page, only if you trust, and I will try to find out what works using Firebug (you may try using it and check for yourself). :)
     
  18. srb888

    srb888 Elite Member

    Joined:
    Jul 30, 2008
    Messages:
    3,260
    Likes Received:
    5,067
    Gender:
    Male
    Occupation:
    WebzSurfer
    Location:
    Sun, Mon, Tue, WTF, Sat!!! :)
    OK, got your PM and link. The above 'vertical-align: top !important;' is working at the required places, and the texts are aligning to the top as required. Check my PM for another thing which you can try if the code is not working on your PC.
     
    Last edited: Oct 12, 2014
  19. tunescool

    tunescool Power Member

    Joined:
    Jul 23, 2011
    Messages:
    570
    Likes Received:
    63
    Gender:
    Male
    Home Page:
    the vertical none just takes it to the bottom
     
  20. Conor

    Conor Jr. VIP Jr. VIP

    Joined:
    Nov 7, 2012
    Messages:
    3,373
    Likes Received:
    5,439
    Gender:
    Male
    Location:
    South Africa
    Home Page: