Home/ Questions/Q 8715213
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T05:47:37+00:00

I have the following CSS in LESS format: body { width: 100%; background: #F4F4F4

  • 0

I have the following CSS in LESS format:

body {
  width: 100%;
  background: #F4F4F4 url("images/top_background.png") repeat-x top left;
  margin: 0px;

  > header {
    background: transparent url("images/header_logo.png") no-repeat center right;

    width: 960px;
    margin: 0px auto;

    > hgroup {
      float: left;

      height: 100px;

      padding: 0px;
      bottom: 40px;

      color: #FEFFFE;

      font-family: Arial, Helvetica, sans-serif;

      > h1 {
        line-height: 100px;

        font-size: 3.7em;
        text-transform: lowercase;

        float: left;
        margin: 0px;

        > a {
          color: #FEFFFE;
          text-decoration: none;
        }
      }
    }
  }

When compiled to CSS, it looks like this:

body {
  width:100%;
  background:#f4f4f4 url("images/top_background.png") repeat-x top left;
  margin:0px;
}
body > header {
  background:transparent url("images/header_logo.png") no-repeat center right;
  width:960px;
  margin:0px auto;
}
body > header > hgroup {
  float:left;
  height:100px;
  padding:0px;
  bottom:40px;
  color:#fefffe;
  font-family:Arial, Helvetica, sans-serif;
}
body > header > hgroup > h1 {
  line-height:100px;
  font-size:3.7em;
  text-transform:lowercase;
  float:left;
  margin:0px;
}
body > header > hgroup > h1 > a {
  color:#fefffe;
  text-decoration:none;
}

This only seems to style up to the <header> tag only. And none of the elements inside that are getting styled. My question is, how do I reference to the child of the <header> element? Is my the usage of body > header > hgroup > h1 > a correct?

This is the HTML content. I ommitted some parts but basically here’s the code.

<body>
<header>
    <div id="header">
        <hgroup>
            <h1><a href="#">Website Title</a></h1>
        </hgroup>
        <div class="clearfix"></div>
        <nav>
            <ul id="topnav">
                <li><a href="#">Navigation 1</a></li>
                <li><a href="#">Navigation 2</a></li>
                <li><a href="#">Navigation 3</a></li>
                <li><a href="#">Navigation 4</a></li>
                <li><a href="#">Navigation 5</a></li>
                <li><a href="#">Navigation 6</a></li>
                <li><a href="#">Navigation 7</a></li>
            </ul>
        </nav>
        <div class="clearfix"></div>
    </div>
</header>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Oh wow, that was stupid. I didn’t realize I had a rogue DIV that I used before and forgot to remove. xD Problem solved by removing that div with the ID header.

    • 0