#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    California, USA
    Posts
    53
    Rep Power
    12

    Need help to align in CSS


    I have a problem where my image on top there is a little gap below it. This only happens in Internet Explorer and not Mozilla; i wish to rid of that gap. Also I am wondering how would I align the text on the right, i have tried applying the vertical-align: bottom but it does not work. Here is the link: http://www.bluebushel.com/temp/real.html The code is below.

    MARKUP
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xml:lang="en">
     <head>
      <title>Bluebushel | The bushels are alright</title>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <link rel="stylesheet" type="text/css" href="includes/bluebushel.css" />
     </head>
    
    <body>
    
    <div align="center">
    <div id="topBar">
    <div class="logo">
    <img src="images/testimage.jpg" alt="Bluebushel" />
    </div>
    <div class="nav">
    View Bushel | Account | Order Status | Shipping & Returns | Help
    </div>
    </div>
    
    </body>
    </html>
    CSS
    Code:
    body						{
    								background-color: #E9E9DF;
    								margin: 0em;
    }
    a.nav:link,
    a.nav:visited				{
    								color: #000000;
    								font-family: Arial, Verdana;
    								font-size: .8em;
    								text-decoration: none;
    }
    a.nav:hover					{
    								color: #336699;
    								font-family: Arial, Verdana;
    								font-size: .8em;
    								text-decoration: none;
    }
    
    #topBar					    {
    								background-color: #FFFFFF;
    								border-left: 2px solid #C5C5C5;
    								border-right: 2px solid #C5C5C5;
    								border-bottom: 1px solid #EEEEEE;
    								height: 5.79em;
    								margin: 0em;
    								padding: 0em;
    								width: 50em;
    }
    #topBar .logo				{
    								float: left;
    								text-align: left;
    }
    #topBar .nav				{
    								color: #E3E3E3;
    								float: right;
    								font-family: Arial, Verdana;
    								font-size: .73em;
    								height: 100%;
    								text-align: right;
    								vertical-align: middle;
    Thank you for your time.
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Try this:
    Code:
    change this;
    
    <img src="images/testimage.jpg" alt="Bluebushel" />
    </div>
    
    to this;
    
    <img src="images/testimage.jpg" alt="Bluebushel" /></div>
    It may be IE white space bug.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    California, USA
    Posts
    53
    Rep Power
    12
    Hallelujah! Thank you, it worked! Now does anyone know how I can vertically align the text on the right to the bottom? Thanks again!
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    California, USA
    Posts
    53
    Rep Power
    12
    Not solved bump.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    California, USA
    Posts
    53
    Rep Power
    12
    Not resolved bump.
  10. #6
  11. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Here is one way to do it:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta name="generator"
        content="HTML Tidy for Linux/x86 (vers 1st March 2002), see www.w3.org" />
        <meta http-equiv="Content-Type"
        content="text/html; charset=iso-8859-1" />
    
        <title>bushels link text align</title>
    <style type="text/css">
    /*<![CDATA[*/
    
    html, body {
        margin: 0px;
        padding: 5px 0px 0px 0px;
        font: 90% serif;
        color: #333;
        background-color: #eee;
        }
    
    
    p {
        font-size: 1em;
        }
    
    
    #container {
        position: relative;
        margin: 0px auto;
        width: 780px;
        height: 100%;
        }    
    
    .banner {
        position: relative;
        width: 100%;
        height: 100px;
        margin-bottom: 1px solid #666;
        background-color: #fff;
        }
    
    .banner img {
        height: 100px;
        width:  380px;
    
        }
    
    .links {
        position: absolute;
        bottom: 0px;
        right: 0px;
        margin: 0 5px 0 0;
        }
    
    /*]]>*/
    </style>
      </head>
    
      <body>
        <div id="container">
          <div class="banner">
            <img src="" alt="banner image" />
            <p class="links">View Bushel | Account | Order Status | Shipping &amp; Returns |
          Help</p>
          </div>
    
        </div>
      </body>
    </html>
    BTW, it's a bad idea to bump. If it wasn't responded to, there is probably good reason. In this case, your OP had been resolved. The new problem should have been put in a new post.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo