Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Having trouble with Absolute positioning.

    Hey fellas.

    So here is my website www.Gameradvice.com

    I am new to the whole web design thing and I am having trouble getting my top navigation bar to be in the same position in all 3 major browsers. Right now it looks great in Chrome but in IE and Moz its more down than I want it. The absolute positioning is not working the same for different browsers, I even created a test element completely unrelated to the navigation bar that still have different positions when using Position:Absolute.

    So why is Position:absolute behaving differently in IE and Moz then in Chrome? I feel like the problem is related to the CSS of the navigation bar, but I can't pinpoint the problem. Here is all the code relating to my Navigation bar:

    #MainNavigation { /* The whole Nav bar */
    position:absolute;
    top:72px;
    left:625px;
    }

    ul.tabs { /*The list items of the menu */
    margin:0;
    padding: 0;
    list-style: none;
    }

    ul.tabs li {
    margin: 0;
    padding: 0px;
    font-family:Verdana, sans-serif;
    font-size:1em;
    text-transform:uppercase;
    list-style: none;
    float: left;
    }

    ul.tabs a {
    display: block;
    color:#ffffff;
    padding:16px 20px;
    }

    ul.tabs a:hover {
    background:url(/backnav.jpg) repeat-x;
    }

    #MainNavigation li:hover ul {
    left:auto;
    }

    ul.dropdown { /*The dropdown list of each "tabs" list */
    margin-top:0px;
    padding:0;
    border:2px solid #5386e3;
    background-color:#e8f7ff;
    position: absolute;
    top: 100%;
    z-index:999;
    left:-9999px;
    width: 240px;
    }

    ul.dropdown li {
    margin: 0;
    padding: 0;
    float: none;
    position: relative;
    font-size:1em;
    list-style: none;
    display:block;
    }

    ul.dropdown li a {
    display: block;
    padding:0;
    color:#191919;
    }



    #itemtwo li { /*The "about" dropdown list */
    text-transform:none;
    height:80px;
    }

    #itemtwo li a {
    padding:10px;
    }

    #itemtwo li img{
    margin-left:12px;
    padding:0;
    float:left;
    border:1px solid #4a6ee3;
    margin-bottom:3px;
    }

    #itemtwo li p {
    margin:0px;
    float:left;
    margin-left:15px;
    width:125px;
    font-size:1em;
    font-style:bold;
    color:#3d3d3d;
    }

    #itemtwo li a:hover{
    background:none;
    }

    #itemtwo li a p:hover{
    color:#1947D1;
    }

    #itemthree li { /* The "archives" dropdown list *?
    text-transform:none;
    margin-top:5px;
    background:none;
    }
    #itemthree li a {
    float:left;
    padding: 5px;
    margin-left:15px;
    background:none;
    width:180px;
    font-size:1.1em;
    font-style:bold;
    color:#3d3d3d;
    }

    #itemthree li p {
    font-size:1.3em;
    }
    #itemthree li a:hover {
    background:#1947D1;
    }





    I reaaally appreciate any help. I usually don't post on forums but I haven't had any luck in solving this problem. Once again, thanks!


    EDIT: I changed the code so that the navigation bar would look correct in IE and Moz but not Chrome. #Mainnavigation now looks like:
    #MainNavigation {
    position:absolute;
    top:44px;
    left:625px;
    }

    -Robbor911
    Last edited by robbor911; 05-02-2011 at 08:16 AM.

  • #2
    New Coder
    Join Date
    Jun 2009
    Posts
    31
    Thanks
    7
    Thanked 1 Time in 1 Post
    are you using reset.css?
    if not go to http://meyerweb.com/eric/tools/css/reset/
    The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on
    this reset all browser's default css styles to common value.

    it has helped me many times in those kind of situations

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Tags for this Thread

    Posting Permissions

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