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 9 of 9
  1. #1
    c12
    c12 is offline
    New Coder
    Join Date
    Jan 2013
    Posts
    20
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Cool Mouseover erases Menu bar only in Firefox

    I am building a website template and perfecting it before I put information in it and upload it to a server. Therefore I do not have a link for demonstration. But Here's what is going on.

    (It is possible that I've already posted this, if so, I apologize, but I don't think it posted so I'm trying again)

    I have a pretty nice menu bar with dropdowns built only with HTML and CSS.

    I have a cool little tool tip, built also only using HTML and CSS. (easiest one I've found by far)

    The menu is fully operational throughout the site, but when I added the tool tip I run into two problems:
    1. it ends up disappearing when I mouseover the link (while testing), but this only happens in FireFox. It works is IE and Chrome, I don't know about safari.
    2. and the default-looking tool tip also shows up, so I have 2 different tool tips, and I only want the more appealing one.

    My guess is that these are both easy fixes, but I don't know. I'm fairly new at all of this and I'm learning as I go. There is a pretty big amount of code, but I'm thinking the problem should be narrowed down a little bit. So I will show the code I feel necessary and if anyone feels they need to see more to figure it out PLEASE let me know.

    I would really like to figure this out. Any help will be greatly appreciated! Thank you!



    Here is ALL the HTML for the tooltip, along with the surrounding code. Inside the <a></a> tags is where the tooltip info is.

    [CODE]

    <div class="sidebar_item">
    <h2><img alt="image" src="images/SPI_logo_2.png" height="175px" width="238px" style="border: 0px solid #000000 p; position: relative; left: -14px;" /></h2>
    <h2><a href="projects.html" style="text-decoration: none; color: #15317E; text-shadow: 1px 1px 1px #6D7B8D;">Products</a></h2>
    <h3>&nbsp;&nbsp;&nbsp;<a href="laserfire.html" title="Stuff right here" class="tooltip">LaserFire®</a></h3>
    <p>//////// </p>
    <h3>&nbsp;&nbsp;&nbsp;<a href="firering.html">FireRing®</a></h3>
    <p>//////// </p>
    <h3>&nbsp;&nbsp;&nbsp;<a href="firefiber.html">FireFiber®</a></h3>
    <p> /////////</p>


    [ICODE]


    Here ALL the CSS for the tooltip.


    [CODE]

    .tooltip{
    display: inline;
    position: relative;
    }
    .tooltip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
    }
    content: attr(title);

    .tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
    }

    [ICODE]



    Here is the HTML for the Menubar. (some has been removed)


    [CODE]


    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="menu.css" type="text/css" media="screen" />

    </head>

    <ul id="menu">
    <li><a href="index.html" class="drop">Home</a><!-- Begin Home Item -->
    <div class="dropdown_2columns"><!-- Begin 2 columns container -->
    <div class="col_2">
    <h2>Welcome !</h2>
    </div>
    <div class="col_2">
    <p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>
    <p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p>
    </div>
    <div class="col_2">
    <h2>Cross Browser Support</h2>
    </div>
    <div class="col_1">
    <img src="img/browsers.png" width="125" height="48" alt="" />
    </div>
    <div class="col_1">
    <p>This mega menu has been tested in all major browsers.</p>
    </div>
    </div><!-- End 2 columns container -->
    </li><!-- End Home Item -->
    <li><a href="about.html" class="drop">About</a><!-- Begin 5 columns Item -->
    <div class="dropdown_5columns"><!-- Begin 5 columns container -->
    <div class="col_5">
    <h2>This is an example of a large container with 5 columns</h2>
    </div>
    <div class="col_1">
    <p class="black_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p>
    </div>
    <div class="col_1">
    <p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p>
    </div>
    <div class="col_1">
    <p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p>
    </div>
    <div class="col_1">
    <p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>
    </div>
    <div class="col_1">
    <p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p>
    </div>
    <div class="col_5">
    <h2>Here is some content with side images</h2>
    </div>
    <div class="col_3">
    <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
    <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="#">Read more...</a></p>
    <img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
    <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="#">Read more...</a></p>
    </div>
    <div class="col_2">
    <p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>
    </div>
    </div><!-- End 5 columns container -->
    </li><!-- End 5 columns Item -->
    <li><a href="services.html" class="drop">Services</a><!-- Begin 4 columns Item -->
    <div class="dropdown_4columns"><!-- Begin 4 columns container -->
    <div class="col_4">
    <h2>This is a heading title</h2>
    </div>
    <p> tristique sed odio. Praesent ut interdum elit. </br>Maecenas imperdiet, nibh vitae rutrum vulputate, </br>lorem sem condimentum.<a href="#">Read more...</a></p>
    <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
    <p> accumsan at nec nisi. Aliquam pretium mollis </br> fringilla. Vestibulum tempor facilisis malesuada. <a href="#">Read more...</a></p>
    </div>
    </div><!-- End 3 columns container -->
    </li><!-- End 3 columns Item -->
    <li class="menu_right"><a href="contact.html" class="drop">Contact</a>
    <div class="dropdown_1column"> <!--align_right -->
    <div class="col_1">
    <ul class="simple">
    <li><a href="#">FreelanceSwitch</a></li>
    <li><a href="#">Creattica</a></li>
    <li><a href="#">WorkAwesome</a></li>
    <li><a href="#">Mac Apps</a></li>
    <li><a href="#">Web Apps</a></li>
    <li><a href="#">NetTuts</a></li>
    <li><a href="#">VectorTuts</a></li>
    <li><a href="#">PsdTuts</a></li>
    <li><a href="#">PhotoTuts</a></li>
    <li><a href="#">ActiveTuts</a></li>
    <li><a href="#">Design</a></li>
    <li><a href="#">Logo</a></li>
    <li><a href="#">Flash</a></li>
    <li><a href="#">Illustration</a></li>
    <li><a href="#">More...</a></li>
    </ul>
    </div>
    </div>
    </li>

    </ul>

    [ICODE]



    Here is all of the CSS for the menu bar

    [CODE]






    body, ul, li {
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    line-height:13px;
    text-align:left;
    }
    /* Navigation Bar */
    #menu {
    list-style:none;
    width:850px;
    margin-top:0px auto 0px auto;
    height:43px;
    padding:0px 20px 0px 20px;
    /* Rounded Corners */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /* Background color and gradients */
    background: #014464;
    background: -moz-linear-gradient(top, #0272a7, #013953);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
    /* Borders */
    border: 1px solid #002232;
    -moz-box-shadow:inset 0px 0px 1px #edf9ff;
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
    box-shadow:inset 0px 0px 1px #edf9ff;
    z-index: 3;
    }
    #menu li {
    float:left;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
    margin-top:7px;
    border:none;
    }
    #menu li:hover {
    border: 1px solid #777777;
    padding: 4px 9px 4px 9px;
    /* Background color and gradients */
    background: #F4F4F4;
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
    /* Rounded corners */
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
    }
    #menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color: #EEEEEE;
    display:block;
    outline:0;
    text-decoration:none;
    text-shadow: 1px 1px 1px #000;
    }
    #menu li:hover a {
    color:#161616;
    text-shadow: 1px 1px 1px #FFFFFF;
    }
    #menu li .drop {
    padding-right:21px;
    background:url("img/drop.png") no-repeat rightright 8px;
    }
    #menu li:hover .drop {
    background:url("img/drop.png") no-repeat rightright 7px;
    }
    /* Drop Down */
    .dropdown_1column,
    .dropdown_2columns,
    .dropdown_3columns,
    .dropdown_3-5columns,
    .dropdown_4columns,
    .dropdown_5columns {
    margin:4px auto;
    float:left;
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #777777;
    border-top:none;
    /* Gradient background */
    background:#F4F4F4;
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
    /* Rounded Corners */
    -moz-border-radius: 0px 5px 5px 5px;
    -webkit-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;
    z-index: 3;
    }
    .dropdown_1column {width: 140px;}
    .dropdown_2columns {width: 280px;}
    .dropdown_3columns {width: 290px;}
    .dropdown_3-5colums {width: 200px;}
    .dropdown_4columns {width: 560px;}
    .dropdown_5columns {width: 700px;}
    #menu li:hover .dropdown_1column,
    #menu li:hover .dropdown_2columns,
    #menu li:hover .dropdown_3columns,
    #menu li:hover .dropdown_3-5columns,
    #menu li:hover .dropdown_4columns,
    #menu li:hover .dropdown_5columns {
    left:-1px;
    top:auto;
    z-index:3;
    }
    /* Columns */
    .col_1,
    .col_2,
    .col_3,
    .col_4,
    .col_5 {
    display:inline;
    float: left;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
    z-index: 3;
    }
    .col_1 {width:130px;}
    .col_2 {width:270px;}
    .col_3 {width:410px;}
    .col_4 {width:550px;}
    .col_5 {width:690px;}
    /* Right alignment */
    #menu .menu_right {
    float:rightright;
    margin-right:0px;
    }
    #menu li .align_right {
    /* Rounded Corners */
    -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
    }
    #menu li:hover .align_right {
    left:auto;
    rightright:-1px;
    top:auto;
    }
    /* Drop Down Content Stylings */
    #menu p, #menu h2, #menu h3, #menu ul li {
    font-family:Arial, Helvetica, sans-serif;
    line-height:21px;
    font-size:12px;
    text-align:left;
    text-shadow: 1px 1px 1px #FFFFFF;
    }
    #menu h2 {
    font-size:21px;
    font-weight:400;
    letter-spacing:-1px;
    margin:7px 0 14px 0;
    padding-bottom:14px;
    border-bottom:1px solid #666666;
    }
    #menu h3 {
    font-size:14px;
    margin:7px 0 14px 0;
    padding-bottom:7px;
    border-bottom:1px solid #888888;
    }
    #menu p {
    line-height:18px;
    margin:0 0 10px 0;
    }
    #menu li:hover div a {
    font-size:12px;
    color:#015b86;
    }
    #menu li:hover div a:hover {
    color:#029feb;
    }
    .strong {
    font-weight:bold;
    }
    .italic {
    font-style:italic;
    }
    .imgshadow {
    background:#FFFFFF;
    padding:4px;
    border:1px solid #777777;
    margin-top:5px;
    -moz-box-shadow:0px 0px 5px #666666;
    -webkit-box-shadow:0px 0px 5px #666666;
    box-shadow:0px 0px 5px #666666;
    }
    .img_left { /* Image sticks to the left */
    width:auto;
    float:left;
    margin:5px 15px 5px 5px;
    }
    #menu li .black_box {
    background-color:#333333;
    color: #eeeeee;
    text-shadow: 1px 1px 1px #000;
    padding:4px 6px 4px 6px;
    /* Rounded Corners */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    /* Shadow */
    -webkit-box-shadow:inset 0 0 3px #000000;
    -moz-box-shadow:inset 0 0 3px #000000;
    box-shadow:inset 0 0 3px #000000;
    }
    #menu li ul {
    list-style:none;
    padding:0;
    margin:0 0 12px 0;
    }
    #menu li ul li {
    font-size:12px;
    line-height:24px;
    position:relative;
    text-shadow: 1px 1px 1px #ffffff;
    padding:0;
    margin:0;
    float:none;
    text-align:left;
    width:130px;
    }
    #menu li ul li:hover {
    background:none;
    border:none;
    padding:0;
    margin:0;
    }
    #menu li .greybox li {
    background:#F4F4F4;
    border:1px solid #bbbbbb;
    margin:0px 0px 4px 0px;
    padding:4px 6px 4px 6px;
    width:116px;
    /* Rounded Corners */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }
    #menu li .greybox li:hover {
    background:#ffffff;
    border:1px solid #aaaaaa;
    padding:4px 6px 4px 6px;
    margin:0px 0px 4px 0px;
    }

    [ICODE]


    This is probably more than enough code to understand the problem, but like I said i am also new at this.

    (I've taken out a fair portion of the menu code due to character restriction but I don't think it should make any difference)

    Thanks again!

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    This is probably more than enough code to understand the problem
    Much too much, and even that is an understatement. I would need a link to the live site, or the code stripped down to it essentials, preferably put in http://jsfiddle.net/ -- put it the html and the css and click the arrow button.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • Users who have thanked Frankie for this post:

    c12 (01-30-2013)

  • #3
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    You had the right idea about posting, but missed one keystroke.
    Code:
    This starts with [ c o d e ] (no spaces of course), but it ends with [ / c o d e ] and not [icode]
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • Users who have thanked jerry62704 for this post:

    c12 (01-30-2013)

  • #4
    c12
    c12 is offline
    New Coder
    Join Date
    Jan 2013
    Posts
    20
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Ok. Sorry about that. I wasn't sure what was an acceptable amount and I thought the '/' was an 'I' for some reason.

    I tried putting the code in jsfiddle, but i was not having the problem that I am with firefox.

    This is where the link with the mouseover tooltip appears in the html:

    Code:
    <h3>&nbsp;&nbsp;&nbsp;<a href="laserfire.html" title="Stuff right here" class="tooltip">LaserFire®</a></h3>
    Here is the CSS for the mouseover tooltip:

    Code:
    
    .tooltip{
    display: inline;
    position: relative;
    }
    .tooltip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
    }
    content: attr(title);
    
    .tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
    }
    This may be all that is necessary to understand the problem, but I'm not sure. It only began to happen after I inserted this code.

    There was just a lot of code for the menu bar.

    Just to reiterate. When I hover the mouse over the link, the menu bar completely disappears.

    Like I said it only happens in Firefox. I put the above code in jsfiddle along with the menubar and I did not have this problem, but when I put my entire home page in jsfiddle it did happen.

    I'm willing if necessary to cut it down piece by piece to find the problem, but some direction/advice or ideas in solving the problem would be very helpful. I've heard of there being CSS that can be directed specifically at Firefox or other browsers to solve little problems and I'm guessing thats going to end up being the prescribed method. Any ideas?

    Thanks again to you all.
    Last edited by c12; 01-31-2013 at 03:07 AM. Reason: Part of what i said was taken out

  • #5
    c12
    c12 is offline
    New Coder
    Join Date
    Jan 2013
    Posts
    20
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Alright I gotchya. Sorry for the excess code, I really wasn't sure what was necessary.

    I don't know why but the / looked like an I to me hah.

    So here is what is most likely necessary to find the problem. To the best of my knowledge at least.

    HTML for the mouse over tooltip

    Code:
    <head>
    
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <link rel="stylesheet" href="menu.css" type="text/css" media="screen" />  
    
    </head>
    
    <body>
    
    <h3>&nbsp;&nbsp;&nbsp;<a href="laserfire.html" title="Stuff right here" class="tooltip">LaserFire®</a></h3>
    
    </body>

    CSS for tooltip

    Code:
    
    .tooltip{
        display: inline;
        position: relative;
    }
    .tooltip:hover:after{
        background: #333;
        background: rgba(0,0,0,.8);
        border-radius: 5px;
        bottom: 26px;
        color: #fff;
        content: attr(title);
        left: 20%;
        padding: 5px 15px;
        position: absolute;
        z-index: 98;
        width: 220px;
    }
    content: attr(title); 
    
    .tooltip:hover:before{
        border: solid;
        border-color: #333 transparent;
        border-width: 6px 6px 0 6px;
        bottom: 20px;
        content: "";
        left: 50%;
        position: absolute;
        z-index: 99;
    }


    I know this is serious cut down of the code... Most of the previous was just the menubar, and this may or may not be enough. I tried putting it in jsfiddle and I did not have the problem I was having in firefox until I put my entire homepage with all CSS in.

    I may end up just having to narrow down the problem myself and I'm willing to, but if anyone has some potential helpful advice or ideas pointing towards the problem. I will be eternally grateful.

    Like I said it only happens in Firefox. When I hover the mouse over the link, the menu bar just disappears.

    I've heard of ways to modify the outcome using CSS code directed only at Firefox. I was thinking this may be a path I could take?

    Thank you all for the help.

  • #6
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Like I said it only happens in Firefox. I put the above code in jsfiddle along with the menubar and I did not have this problem, but when I put my entire home page in jsfiddle it did happen.
    Then we will need matters live, online, in their whole setting.


    I'm willing if necessary to cut it down piece by piece to find the problem, but some direction/advice or ideas in solving the problem would be very helpful. I've heard of there being CSS that can be directed specifically at Firefox or other browsers to solve little problems and I'm guessing thats going to end up being the prescribed method. Any ideas?
    Targeting CSS at IE only is quite easy, but targeting it at FF only is a lot of hassle. Why don't you first put it online and let us analyze it with Firebug?

  • Users who have thanked Frankie for this post:

    c12 (01-31-2013)

  • #7
    c12
    c12 is offline
    New Coder
    Join Date
    Jan 2013
    Posts
    20
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Re: Frankie

    I really appreciate the quick responses

    The only problem with putting it online is that I am rebuilding a site for an already active site that must stay active (for the company I work for). I just plan to complete it and switch it out.

    I'm trying to think of another way you all could see it.. Are there any free servers or something of the sort that I would be able to use?

  • #8
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Quote Originally Posted by c12 View Post
    I'm trying to think of another way you all could see it.. Are there any free servers or something of the sort that I would be able to use?
    Why don't you make a copy of the page, name that index2.ext and upload it? Then the normal visitors won't notice a thing. And only if everything is to your liking you upload it as index.ext.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #9
    c12
    c12 is offline
    New Coder
    Join Date
    Jan 2013
    Posts
    20
    Thanks
    10
    Thanked 0 Times in 0 Posts
    So I just solved the problem with the mouse over deleting the menubar. I'm not sure why, but I put the menu in the header section and it did the trick.

    But I'm still having the problem of the 2nd text tool tip showing up as well as the modified tool tip..

    I'm sure this is a very simple problem to solve.


  •  

    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
    •