SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    south london
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    display inconsistencies problem

    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
    Attached Images Attached Images


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •