Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Sep 2003
    Posts
    3
    Member #
    3192
    Ok I am sure I am just completely missing something here.

    I have a div tag with the following CSS:

    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #000000;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    }
    #navbar {
    position: absolute;
    z-index: 5;
    width: 760px;
    height: 25px;
    background-image: url(images/navbar.gif);
    background-repeat: no-repeat;
    top: 65px;
    text-align: left;
    vertical-align: bottom;
    }

    and the div itself looks like:

    <div id="navbar">Navigation</div>

    Now the text SHOULD align to bottom since I am using the vertical-align: bottom;, however no matter what I have tried, it still aligns to top.

    What am I doing wrong here? The text in question is 10px high, and the div tag is 25px high, so it cant be a matter of sizing.

    Thanks in advance, Tyler

  2.  

  3. #2
    Senior Member mossoi's Avatar
    Join Date
    Apr 2003
    Location
    Englandshire, United Kingdomsville y'all!
    Posts
    1,111
    Member #
    1206
    Liked
    1 times
    It all seems a bit ambiguous with the vertical-align attribute. It seems that it will only work for images (<img>) in Mozilla.

    This is the best I could come up with as a work around with support by both browsers:
    Code:
    	<style>
    		body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #000000;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    }
    #navbar {
    position: absolute;
    z-index: 5;
    width: 760px;
    height: 25px;
    background-image: url(images/navbar.gif);
    background-repeat: no-repeat;
    top: 65px;
    text-align: center;
    border: 1px solid #000;
    
    }
    #link
    {
    float: left;
    vertical-align: bottom;
    padding-top: 10px;
    }
    </style>
    <div id="navbar"><div id="link">Navigation</div></div>
    The float is needed to make the links display next to each other, otherwise they'll go down the page. Not ideal but in my experience I've never trusted vertical-align.

  4. #3
    Senior Member mossoi's Avatar
    Join Date
    Apr 2003
    Location
    Englandshire, United Kingdomsville y'all!
    Posts
    1,111
    Member #
    1206
    Liked
    1 times
    Of course, you only need the float if you are going to put each link in a different <div id="link">. If they are all going to go into one then you can get rid of it. Depends if you are going to have CSS hover effects or not.

  5. #4
    Senior Member skrlin's Avatar
    Join Date
    Apr 2003
    Location
    Illinois
    Posts
    562
    Member #
    1063
    I don't recall the vertical-align attribute being used for anything other than TD's in tables. Could you possibly modify your code so that you have a table instead of a div ?

    EXAMPLE:
    Code:
    <div id="navbar">Navigation</div>
    could be changed to:
    Code:
    <table border="0" cellspacing="0" cellpadding="0">
     <tr>
      <td id="navbar">Navigation</td>
     </tr>
    </table>
    - Brian

  6. #5
    Senior Member mossoi's Avatar
    Join Date
    Apr 2003
    Location
    Englandshire, United Kingdomsville y'all!
    Posts
    1,111
    Member #
    1206
    Liked
    1 times
    That would be another way

    FYI though http://www.w3schools.com/css/pr_pos_vertical-align.asp is a little short on info about vertical-align but seems to think it's only for the img tag.

    If skrlin's code above doesn't work (though I'm sure it will ) then you can always use <td valign="bottom">.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:10 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com