CODEWITHSUNDEEP
htmlcsstooltip
rmbX66t1
rmbX66t1

Reputation: 23

CSS/HTML Tooltip Positioning Not Working in Mozilla Firefox

So, I've gone ahead and added a tooltip on a small lead generation form I've been working on. Everything is going well; however, it seems the positioning on one element is not functioning properly, in Mozilla Firefox. When testing in Chrome, Internet Explorer, and Safari everything goes fine. In Firefox, the tooltip is not placed just above the image that calls it, but rather off to the right and up.

Here is what it should look like:

http://img84.imageshack.us/img84/3930/correctx.jpg

Here is what is shouldn't look like:

http://img198.imageshack.us/img198/5223/incorrectw.jpg

Below is the related code, HTML:

        <div id="contact_container">
            <h1><a data-tooltip="Click to hide/display the content below." href="#"><img class="information_icons" src="images/information_icon.png"></a>How can we contact you?</h1>   
            <input id="phone_number" name="phone_number" type="text" />
            <input id="alternate_phone_number" name="alternate_phone_number" type="text" />
            <input id="email_address" name="email_address" type="text" />
            <div class="vertical_filler_small"></div>
            <h2 id="contact_time_subtitle"><a data-tooltip="Click to hide/display the content below." href="#"><img class="information_icons_small" src="images/information_icon_small.png"></a>When should we call?</h2>
            <fieldset id="contact_time">
                <div class="contact_time_containers" id="contact_time_morning"><input id="contact_time_radio_morning" name="contact_time" type="radio" value="morning" /><span class="contact_time_options">Morning</span></div>
                <div class="contact_time_containers" id="contact_time_afternoon"><input checked="checked" id="contact_time_radio_afternoon" name="contact_time" type="radio" value="afternoon" /><span class="contact_time_options">Afternoon</span></div>
                <div class="contact_time_containers" id="contact_time_evening"><input id="contact_time_radio_evening" name="contact_time" type="radio" value="evening" /><span class="contact_time_options">Evening</span>
            </fieldset>
        </div>

And the CSS:

    body{background:#0d2635 url('../images/background.jpg') no-repeat center top;font-family:Arial,Helvetica,sans-serif;margin:0;text-align:center;}
    h1{color:#fff;cursor:pointer;font-size:18px;font-weight:bold;margin:0;}
    h2{color:#ff0;cursor:pointer;font-size:14px;font-weight:bold;margin:0;text-indent:3px;}
    input[type="text"]{-khtml-border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;background-image:url('../images/background_text_inputs.jpg');border-color:#195d82 #11415c #6198b7 #1e74a6;border-radius:8px;border-width:1px;color:#aaa;float:left;font-size:12px;font-weight:bold;height:25px;line-height:100%;margin-top:8px;outline:none;padding:0;text-indent:5px;}
    input[type="text"]:focus{color:#fff;border:1px solid #ff0;}
    input[type="radio"]{cursor:pointer;}
    img{border:none;}
    img.information_icons{left:-2px;position:relative;top:4px;}
    img.information_icons_small{left:-2px;position:relative;top:3px;}

        div#contact_container{float:left;width:300px;}
            input#phone_number{float:left;margin-right:10px;width:140px;}
            input#alternate_phone_number{float:left;width:140px;}
            input#email_address{float:left;margin-right:10px;width:280px;}
            div.vertical_filler_small{float:left;height:10px;width:300px;}
            fieldset#contact_time{border:none;display:block;float:left;}
                div.contact_time_containers{cursor:pointer;float:left;margin-right:5px;}
                    span.contact_time_options{color:#ccc;font-size:14px;font-weight:bold;margin:0;}

    a[data-tooltip]:link,a[data-tooltip]:visited{position:relative;text-decoration:none;}
    a[data-tooltip]:before{content:"";visibility:hidden;}
    a[data-tooltip]:after{-moz-border-radius:10px;-moz-box-shadow:0 8px 6px -6px black;-webkit-border-radius:10px;-webkit-box-shadow:0 8px 6px -6px black;background-color:#294466;border:1px solid #0f2e4d;border-radius:10px;box-shadow:0 8px 6px -6px black;color:#ff0;content:attr(data-tooltip);left:-16px;font-size:12px;padding:5px 15px;position:absolute;top:-20px;visibility:hidden;white-space:nowrap;}
    a[data-tooltip]:hover:before,a[data-tooltip]:hover:after{-moz-transition:visibility 0s linear .1s;visibility:visible;}

Upvotes: 1

Views: 1329

Answers (1)

Sandeep Sharma
Sandeep Sharma

Reputation: 11

Try Something Like This in CSS:


 #contact_container { Position:relative; }

 a[data-tooltip] { Position:absolute; top:0px; /* Set Top Position According to your style*/ Left:0px; /* Set LeftPosition According to your style*/ }

Hope it work for you...

Upvotes: 1

Related Questions