Need help to align in CSS

Dev Shed Forums Sponsor:

April 2nd, 2004, 09:43 PM

Axsuul

Contributing User

Join Date: Jun 2003

Location: California, USA

Posts: 53

Time spent in forums: 47 m 5 sec
Reputation Power: 6

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.

April 3rd, 2004, 12:43 AM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,589

Time spent in forums: 1 Month 2 Days 17 h 41 m 41 sec
Reputation Power: 662

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.

April 3rd, 2004, 01:07 AM

Axsuul

Contributing User

Join Date: Jun 2003

Location: California, USA

Posts: 53

Time spent in forums: 47 m 5 sec
Reputation Power: 6

Hallelujah! Thank you, it worked! Now does anyone know how I can vertically align the text on the right to the bottom? Thanks again!

April 3rd, 2004, 01:01 PM

Axsuul

Contributing User

Join Date: Jun 2003

Location: California, USA

Posts: 53

Time spent in forums: 47 m 5 sec
Reputation Power: 6

Not solved bump.

April 4th, 2004, 12:11 PM

Axsuul

Contributing User

Join Date: Jun 2003

Location: California, USA

Posts: 53

Time spent in forums: 47 m 5 sec
Reputation Power: 6

Not resolved bump.

April 4th, 2004, 10:42 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,589

Time spent in forums: 1 Month 2 Days 17 h 41 m 41 sec
Reputation Power: 662

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 & 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

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: