css navigation positioning problems

  • danadesigns_1
  • Born
  • Born
  • danadesigns_1
  • Posts: 4

Post 3+ Months Ago

This is my first website using css. I have used absolute positioning a lot on this page to try to make everything overlap a big image. For the most part its all okay but the navigation has a slight problem. I've tried following the lynda.com strategies but I'm under a deadline and need to fix my page using what I have. the navigation text is absolutely positioned over some image blocks that are on a background jpeg image.

Here is the problem:
the text shifts slightly on "the cameron gallery" text to one side in IE and to the other in Firefox. The other two text blocks don't have this issue.

CSS:
Code: [ Select ]
}
#header {
}
#header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    position: absolute;
    left: 385px;
    top: -106px;
    width: 72px;
    height: 34px;
    }
#header li {
    float: left;
    }
#cameron {
}
#cameron ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    position: absolute;
    left: 480px;
    top: -106px;
    width: 102px;
    height: 34px;
    }
#cameron li {
    float: left;
    }
#contact {
}
#contact ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    position: absolute;
    left: 609px;
    top: -106px;
    width: 110px;
    height: 34px;
    }
#contact li {
    float: left;
    }
.style7 {font-size: 10px; font-family: Georgia, "Times New Roman", Times, serif; }
.style8 {
    font-size: 12px;
    font-weight: bold;
    font-style: italic;
}
  1. }
  2. #header {
  3. }
  4. #header ul {
  5.     margin: 0;
  6.     padding: 0;
  7.     list-style: none;
  8.     float: left;
  9.     position: absolute;
  10.     left: 385px;
  11.     top: -106px;
  12.     width: 72px;
  13.     height: 34px;
  14.     }
  15. #header li {
  16.     float: left;
  17.     }
  18. #cameron {
  19. }
  20. #cameron ul {
  21.     margin: 0;
  22.     padding: 0;
  23.     list-style: none;
  24.     float: left;
  25.     position: absolute;
  26.     left: 480px;
  27.     top: -106px;
  28.     width: 102px;
  29.     height: 34px;
  30.     }
  31. #cameron li {
  32.     float: left;
  33.     }
  34. #contact {
  35. }
  36. #contact ul {
  37.     margin: 0;
  38.     padding: 0;
  39.     list-style: none;
  40.     float: left;
  41.     position: absolute;
  42.     left: 609px;
  43.     top: -106px;
  44.     width: 110px;
  45.     height: 34px;
  46.     }
  47. #contact li {
  48.     float: left;
  49.     }
  50. .style7 {font-size: 10px; font-family: Georgia, "Times New Roman", Times, serif; }
  51. .style8 {
  52.     font-size: 12px;
  53.     font-weight: bold;
  54.     font-style: italic;
  55. }


Here is the code:
Code: [ Select ]
<div id="cameron">
     <ul>
        <li><a href="test.html" class="style7">the cameron gallery</a></li>
     </ul>
    </div>
    <div id="contact">
     <ul>
        <li><a href="test.html" class="style7">contact dinah</a></li>
     </ul>
    </div>
  1. <div id="cameron">
  2.      <ul>
  3.         <li><a href="test.html" class="style7">the cameron gallery</a></li>
  4.      </ul>
  5.     </div>
  6.     <div id="contact">
  7.      <ul>
  8.         <li><a href="test.html" class="style7">contact dinah</a></li>
  9.      </ul>
  10.     </div>


Let me know if you need any more info and hopefully someone can help me. Thanks!
Moderator Remark: Added [code] tags
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • natas
  • PHP Ninja
  • Proficient
  • natas
  • Posts: 308
  • Loc: AFK

Post 3+ Months Ago

What's the link to the site?
  • CXLink
  • Expert
  • Expert
  • User avatar
  • Posts: 685
  • Loc: ATL-GA

Post 3+ Months Ago

The code you put up doesn't show anything. Is the site up somewhere or is there a way you could put it up and post a link.

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 73 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.