Results 1 to 2 of 2

Thread: vertical alignment

  1. #1
    Join Date
    May 2003

    vertical alignment

    I am having difficulty aligning elements vertically in <div> areas. I have tried using vertical-align: middle, howver that doesn't seem to work. I know I can specify margins and padding, however ths is very time consuming for the number of places this would have to be done.

    Here is an example below of trying to vertical align <a> or <img>. Full source at www.populus.com/v5/services.html


    <div id="topNav">
    <a href="services.php"><img class="topIndent" src="img/nav/top_services_sel.jpg" width="106" height="12" alt="Research Services" /></a>
    <a href="clients.php"><img src="img/nav/top_clients_unsel.jpg" width="42" height="12" alt="Clients" /></a>
    <a href="case_hist.php"><img src="img/nav/top_ch_unsel.jpg" width="84" height="12" alt="Case Histories" /></a>
    <div id="topNavLinks">
    <a href="site_map.php">Site Map</a>
    <a href="contact.php">Contact Us</a>
    <a href="legal.php">Legal</a>

    #topNav {position: absolute; top: 70px; left: 0px; width: 100%; height: 40px; background-color: #4b4b4b;}
    /* #topNav a {margin-top: 14px;} */
    #topNav a {vertical-align: middle;}
    #topNav img, a {border: 0px;}
    #topNavLinks {position: absolute; top: 0px; right: 0px; height: 40px; padding: 12px 20px 0 0;}
    #topNavLinks a {color: #cccccc; font-weight: normal;}

  2. #2
    Join Date
    Apr 2003
    vertical-align is not fully supported in IE and is only applies to inline elements(<a> and <img> ok).
    In Netscape there is a problem with inline content, text with images, see http://devedge.netscape.com/viewsource/2002/img-table/ and http://www.draac.com/tabletricks.html
    The doctype used is also relevant, wether in standard or quirk mode, see: http://gutfeldt.ch/matthias/articles...tch/table.html

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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