display inconsistencies problem

**badface** · Sep 9, 2003, 18:55

i have a strong suspicion that this is the type of question that gets asked repeatedly but i did a few searchs and couldn't find anything that helped so i thought i'd ask.

i just did my first page with pure css contolled layout (pretty much based on this tutorial here) and i'm coming up with a few probs.

everything looks fine in ie but in opera 7.11 the grey navigation bar is slightly shorter than the jpg.
if anyone can tell what's wrong or even just point me to a thread that explains it then it'll be much appreciated.

this is the css

Code:

#header {
  background-color: #000;
  color: #000;
}
#header a#hali:hover  {
  background-image: url("rob.jpg");
  background-repeat: no-repeat;
}
#header h1 a {
  position: absolute;
  top:            7px;
  left:           7px;
  background-image: url("van.jpg");
  background-repeat: no-repeat;
  display: block;
  height: 84px;
  font-size: 0;
  text-align: right;
  width: 350px;
}
#header .slogan {
  margin: 0;
  padding: 0;
  text-align: right;
  color: #fff;
  white-space: nowrap;
  font-size: 12px;
}

#navsite  {
  margin: 0 0 0 0;
  font-size: 12px;
  white-space: nowrap; 
  background-color: #a9a9a9;
  font-family: Lucida Console ;
  text-align: right;      
}
#navsite ul li  {
  padding: 0 15px 0 15px;
  height: 18px;
  display: block;
  white-space: nowrap; 
  display: inline;
}

and this is the html

Code:

<body>
    <a name="top"></a> 
    <div class="standardlink">
      <div id="header">
        <h1>
          <a href="/" title="This link goes nowhere" id=
          "hali">*</a>
        </h1>
        <p class="slogan">
          apple vampires
        </p>
      </div>
      <div id="navsite">
        <div class="centreheading">
          Site Navigation
        </div>
        <ul>
          <li>
            <a href="#skills">Skills</a>
          </li>
          <li class="nowrap">
            <a href="#education">Education</a>
          </li>
          <li>
            <a href="#employment">Employment
            History</a>
          </li>
          <li>
            <a href="#interests">Interests</a>
          </li>
          <li>
            <a href="#referees">Referees</a>
          </li>
        </ul>
      </div>
    </div>

i added the pic in case anyone needs it to check if it lines up.

thanks for any help

The SitePoint Forums have moved.

User Tag List

Thread: display inconsistencies problem

Thread Tools

Display

display inconsistencies problem

Bookmarks

Bookmarks

Posting Permissions