Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    Take a look at the 2 screen shots. In FF it looks fine, in IE7 the menus screwed up.

    heres the appropriate CSS.
    HTML Code:
    #header #navigation {
        position: absolute;
        bottom: -3px;
        right: 24px;
        width: 100%;
        font-size: 11px;
        text-transform: uppercase;
        font-weight: bold;
        line-height: 1em;
        width: auto;
    }
    #header #navigation ul,
    #header #navigation ul li {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    #header #navigation ul {
        float: right;
        background: url(../images/wrapper/nav-bg.gif) 0 50% repeat-x;
        *zoom: 1;
        *height: 1%;
    }
    #header #navigation ul li {
        float: left;
        display: block;
        margin-left: 3px;
        position: relative;
        z-index: 10;
    }
    #header #navigation ul li.first {
        margin: 0;
    }
    #header #navigation ul li.first a {
        background-image: url(../images/wrapper/nav-left_new.gif);
        background-position: top left;
        background-repeat: no-repeat;
    }
    #header #navigation ul li.last a {
        background-image: url(../images/wrapper/nav-right_new.gif);
        background-position: top right;
        background-repeat: no-repeat;
    }
    body.french #header #navigation ul li.first a {
        background-image: url(../images/wrapper/nav-left-fr.gif);
    }
    body.french #header #navigation ul li.last a {
        background-image: url(../images/wrapper/nav-right-fr.gif);
    }
    #header #navigation ul li a {
        float: left;
        padding: 4px 10px;
        display: block;
        background-color: #6E6A6B;
        color: #FFF;
        text-align: center;
        height: 22px;
        
        
    }
    body.french #header #navigation ul li a {
        height: 32px;
        
        *height: 40px;
    }
    #header #navigation ul li.first a:hover {
        background-position: 0 -50px;
    }
    #header #navigation ul li.last a:hover {
        background-position: right -50px;
    }
    #header #navigation ul li a:hover,
    #header #navigation ul li:hover a,
    #header #navigation ul li.hover a {
        color: #ED1C24;
        text-decoration: none;
        background-color: #FFF;
    }
    
    /*    D R O P - D O W N
    */
    #header #navigation ul li ul {
        position: absolute;
        top: 30px;
        left: -1px;
        width: 150px;
    }
    body.french #header #navigation ul li ul {
        top: 40px;
    }
    #header #navigation ul li ul li {
        float: none;
        margin: 0;
            
        *margin-bottom: -3px;
        _zoom: 1;
        _height: 1%;
    }
    #header #navigation ul li ul li a,
    body.french #header #navigation ul li ul li a {
        background-color: #FFF;
        color: #626262 !important;
        text-transform: none;
        font-weight: normal;
        text-align: left;
        height: auto;
        border: 1px solid #A2A7A8;
        width: 100%;
        padding: 5px 13px;
        margin-top: -1px;
    }
    #header #navigation ul li ul li a:hover,
    body.french #header #navigation ul li ul li a:hover {
        color: #ED1C24 !important;
        background-color: #DDD;
    }
    #header #navigation ul ul li.has-sub a,
    #header #navigation ul ul ul li.has-sub a {
        background-image: url(../images/wrapper/has-sub.gif);
        background-position: right 50%;
        background-repeat: no-repeat;
    }
    #header #navigation ul li ul,
    #header #navigation ul li ul ul {
        display: none;
        background: none;
    }
    #header #navigation ul li:hover ul,
    #header #navigation ul li.hover ul {
        display: block;
    }
    #header #navigation ul li:hover ul ul,
    #header #navigation ul li.hover ul ul {
        display: none;
    }
    #header #navigation ul li ul li:hover ul,
    #header #navigation ul li ul li.hover ul {
        display: block !important;
    }
    #header #navigation ul li ul li ul,
    body.french #header #navigation ul li ul li ul {
        left: 177px !important;
        top: -22px;
        margin-bottom: -100%;
        position: relative;
        
        *left: 149px !important;
        /*position: absolute;
        left: 177px;
        top: 0;*/
    }
    #header #navigation ul li ul li ul li {
        position: relative;
    }
    #header #navigation ul ul ul li a {
        background-image: none !important;
    }
    Attached Images Attached Images

  2.  

  3. #2
    Junior Member ~Daniel's Avatar
    Join Date
    Jun 2009
    Location
    Mount Vernon, Illinois
    Posts
    11
    Member #
    19106
    By the looks of the screenshots, it seems the problem has to do with positioning. With that said, have you performed a global reset within your CSS? I can't guarantee that would help, but it's worth a shot if you haven't.

  4. #3
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    dont realy understand blocking the inherit rules. !important. but what you require is overflow: hidden; in the line relative to the drop box.
    #menu .ulmain{ display: none; width: 148px; margin-top: 2px; background-image: url(http://#); border-style: solid; border-width: thin; border-color: transparent; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-radius-bottomright: 5px; -webkit-border-radius-bottomleft: 5px; overflow: hidden; } and maybe a little <meta http-equiv="X-UA-Compatible" content="IE=8" />
    also i dont see your html side but the drop part of the box needs to be "position: absolute;" or "position: relative; margin: 0px;" at least in regards to the side facing the parent nav. IE and firefox have dif ways of rendering margins.

    while($get_it !== true){ continue; }

  5. #4
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    yes, i do use a global reset.
    So margin and padding are reset first.

    if you position something absolute, how do you position it?

    position: absolute;
    left:
    top:

    ? or do you use margin-left, margin-top

    Also, ill try the overflow suggestion after, but i think he sets overflow on all elements to hidden, anyways, ill try these out tomorrow thanks.

  6. #5
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    if i have this markup

    <ul>
    <li>Link1</li>
    <li>Link 2
    <ul>
    <li>Sublink1</li>
    <li>Sublink2</li>
    </ul>
    </li>
    </ul>

    then i style
    ul li ul{
    position: absolute;
    top: 0;
    left: 0;
    }
    will this be positioned to the far left? on the same Y axis as the menu?

  7. #6
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    it will land on the top left corner of the page unless nested in a position: relative; container then it will rest at the top left corner or the container. Do i pass? lol

    while($get_it !== true){ continue; }

  8. #7
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    float: none; ?
    like declining something never offered.

    and single line comments

    //comment

    multiple line comments

    /*comment line1
    comment line2 */

    doesnt dreamweaver have a button for this? lol sorry. kinda.

    while($get_it !== true){ continue; }

  9. #8
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    i really dont understand you when i read what youve written :S
    what are you talking abou tcomments and dreamweaver buttons?

  10. #9
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    the question is why would you use a multi line comment for one line and then also why would you set float: none; . i dont see anything that set it to inherit float to begin with.

    #header #navigation ul li ul li {
    float: none;
    margin: 0;



    http://www.w3schools.com/css/pr_class_float.asp
    The float property sets where an image or a text will appear in another element.
    Inherited: No

    while($get_it !== true){ continue; }

  11. #10
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    does it really matter if you use /* comment */ or //comment, if i always use /* then i can write as much as i wnat in the comment and never have to change it. same thing.

    Also, the css i gave you is partial, float: none does override a float property thats somewhere in the css file

    #3, im modifying template from a designer, dont ask me how he did his css.
    some of its good, some of its bad

    also, fixed the menu by adding a width to an li


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:21 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com