Vertical Alignment

HTML & CSS
1

Hi Guys,

I have a couple of css issues with the page below that I can’t get past.

  1. The copyright notice doesn’t want to line-up (vertically) with the links.
  2. There is some white space above the header that I can’t get rid of.
  3. The “font: small arial, helveticta, verdana, sans-serif;” in the “body” section isn’t working in IE8 (haven’t tried it in IE6 yet!)

<!--Force IE6 into quirks mode with this comment tag-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <!-- meta keywords to be added -->
  <title>Footer Test</title>
  <link rel="shortcut icon" href="facicon.ico" />
  <!-- link rel="stylesheet" type="text/css" href="css/footertest.css" / -->

<style rel="stylesheet" type="text/css">

<!--
/* =================== */
/* global declarations */
/* =================== */ -->

body{
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #3f3f3f;
  font: small arial, helveticta, verdana, sans-serif;
  color: #3f3f3f;
  overflow: hidden;
  height: 100%; 
  max-height: 100%; 
}

h1 {
  font-size: 2.5em;
  font-weight: bold;
}


h4 {
  padding: 40px 0 0 0;
  font-style: italic;
  font-size: 1.75em;
  color: #000099;
}

p {
  padding: 0 0 0 0;
}

a:link {
  color: #3f3f3f;
  text-decoration: none;
}

a:visited {
  color: #3f3f3f;
  text-decoration: none;
}

a:hover {
  color: #3f3f3f;
  text-decoration: underline;
}

a:active {
  color: #3f3f3f;
  text-decoration: underline;
}


<!--
/* ================== */
/* class declarations */
/* ================== */ -->

.lining{
  margin: 0 20px 0 20px;
  padding: 0 0 0 0;
}

.infoblock h3 {
  clear: left;
}

.infoblock img {
  float: left;
}

.infoblock li {
  margin-left: 80px;
}

.note {
  font-style: italic;
  color: #000099;
}

.copyright {
  width: 350px;
  float: left;
  padding: 4px 0 0 20px;
}

.dropshadow { 
  text-shadow: black 2px 2px 2px
}

<!--
/* ============================= */
/* element specific declarations */
/* ============================= */ -->

#framecontent{
  position: absolute;
  top: 0;
  bottom: 0; 
  right: 0;
  width: 250px;
  height: 100%;
  overflow: auto;
  background: #7a7b76;
  color: white;
}

#maincontent{
  position: fixed;
  top: 0;
  left: 20px;
  right: 250px;
  bottom: 0;
  overflow: auto; 
  background: #ffffff;
}

/*IE6 hack*/
* html body{
  padding: 0 250px 0 0;
}

/*IE6 hack*/
* html #maincontent{
  height: 100%; 
  width: 100%;
}

#header {
  margin: 0 0 0 0;
  color: white;
  width: 100%;
  height: 150px;
  background-color: #7a7b76;
  border-bottom: 1px solid #3f3f3f;
}

  #header img {
    float: right;
  }
        
  #header h1{
    padding: 20px 0 0 20px;
  }
        
  #header h2{
    padding: 0 0 0 20px;
    font-size: 1.5em;
    font-weight: bold;
  }

#content h2 {
  padding: 10px 0 0 0;
}

#reasons h3 {
  padding: 10px 0 0 0;
}

#summary img {
  float: left;
}
        
  #summary p {
    margin-left: 140px;
  }

#footer {
  height: 35px;
  width: 100%;
  border-top: 1px solid;
}

  #footer ul.legal {
    margin: 0;
    padding: 5px 20px 0 0;
    text-align: right;
  }

  #footer li {
    display: inline;
  }

</style>
</head>

<body>

<div id="framecontent">
  <div class="lining">
    <h2 class="dropshadow">CSS Quick Start Guide</h2>
    <h3>Subheading</h3>
    <p>Sample text</p>
  </div><!-- end lining -->
</div><!-- end framecontent -->

<div id="maincontent">

  <div id="header">
    <img src="img/hd-iknewit.png" width="120px" height="150px" alt="Man pointing at notebook with an I knew it expression on his face" />
    <h1 class="dropshadow">Website Title</h1>
    <h2>Tagline</h2>
  </div> <!-- header End -->

  <div class="lining">
    <div id="content">

      <h2>First Section Heading</h2>
      <p>Paragraph line 1</p>
      <p>Paragraph line 2</p>
      <p>Paragraph line 3</p>

      <h2>Next Section Heading</h2>
      <p>Paragraph line 1</p>

      <div id="reasons">
        <div class="infoblock">
          <h3>Subsection title 1</h3>
          <img src="img/tn-lostphone.jpg" width="90px" height="80px" alt="Man walking away from park bench. His call-phone left behind" />
          <ul>
            <li>List item 1.</li>
            <li>List item 2.</li>
            <li>List item 3.</li>
            <li>List item 4.</li>
          </ul>
        </div><!-- end infoblock -->
      </div><!-- end reasons -->

      <div id="summary">
        <h2>Next Section Heading</h2>
        <p>Paragraph line 1</p>
        <p>Paragraph line 2</p>
        <p>Paragraph line 3</p>
      </div><!-- end summary -->

    </div><!-- end content -->

    <div id="footer">
      <p class="copyright"> &copy; copyright company name 2011 all rights reserved</p>
      <ul class="legal">
        <li><a href="#">about us</a> | </li>
        <li><a href="#">privacy policy</a> | </li>
        <li><a href="#">disclaimer</a> | </li>
        <li><a href="#">site map</a></li>
      </ul><!-- END LEGAL -->
    </div><!-- END FOOTER -->

  </div><!-- end lining -->
</div><!-- end maincontent -->

</body>
</html>

Can anyone see what I’m doing wrong?

Thanks
graham

2
  1. The copyright notice doesn’t want to line-up (vertically) with the links.

Hi,
You are getting some default margins on the footer <p> tag that the browser (UA) stylesheet is applying. If you set margin:0; on it then it will rise up.

#footer p {margin:0;}

  1. There is some white space above the header that I can’t get rid of.

Once again, the H1 has a default margin from the UA stylesheet. You are getting collapsing margins between the parent and child (header div and H1).

To fix that either un-collapse child margins by setting a top padding or overflow:hidden on the header div. Or just remove the default margins from the H1.

#header {
  margin: 0;
  color: white;
  width: 100%;
  height: 150px;
  background-color: #7a7b76;
  border-bottom: 1px solid #3f3f3f;
  [COLOR=Blue]overflow:hidden;/*un-collapse child margins*/[/COLOR]
}

  #header img {
    float: right;
  }
        
  #header h1{
    [COLOR=Blue]margin:0;[/COLOR]
    padding: 20px 0 0 20px;
  }
  1. The “font: small arial, helveticta, verdana, sans-serif;” in the “body” section isn’t working in IE8 (haven’t tried it in IE6 yet!)

Set the body font-size in a percentage value like 80% if you want it smaller, that way it can still scale through the page.

BTW, you will have all versions of IE (not just IE6) in quirks mode with that comment above the doctype, It would be best to remove it and get back into standard mode.

3

Thanks Ray,

All problems solved. Now all I have to do is understand it!
Thanks also for the link to the collapsing margins resource.

Graham