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;}
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...
Related
Below is my html where i have dropdowns and textboxes along with this in my webpage.The issue is when tabbing from one control to another control all the controls are getting tabbed and highlighted expect the below one.
<div class="cls" id="Col" onclick="Toggle(this);">Highlight me in border</div>
<input type="button" value="Add1" id="btnAdd1" onclick="Add1();" style="width: 120px;" class="newAddNew Tab" />
<input type="button" value="Add2" id="btnAdd2" onclick="Add2();" style="width: 120px;" class="newAddNew Tab" />
css
.Tab:focus{
outline: none;
box-shadow: 0px 0px 5px 2px #61C5FA !important;
}
I'm new to HTML and I'm trying to replicate Google's home page for practice purpose.
My code is like this:
<div align="right" style="border: 1px solid">
Gmail Images Sign in
</div>
<!-- Google Text -->
<div align="center" style="font-size: 500%; border: 1px solid">
<font color="#4885ed">G</font>
<font color="#db3236">o</font>
<font color="#f4c20d">o</font>
<font color="#4885ed">g</font>
<font color="#3cba54">l</font>
<font color="#db3236">e</font>
</div>
<div align="center" style="font-size: 500%; border: 1px solid">
<input type="Text" size="50" />
</div>
<div align="center" style="font-size: 500%; border: 1px solid">
<input type="button" value="Search" size="100" /> <input type="button" value="I'm feeling lucky" size="100" />
</div>
And I'm getting following output:
Output Screenshot
I'm not getting why there is space above my TextBox and above the Buttons.
How do I remove these spaces?
Any help would be appreciated.
Regards,
Parikshit
You've set font-size: 500% so the line height (of the line in the inputs sit on the baseline of) is very tall.
Don't do that.
To avoid coming into any problems with basic css styling when getting to use to browser display try using this every time you use css:
CSS:
*{
padding:0px;
margin:0px;
border:solid black 0px;
color:#5f5;
text-decoration:none;
box-sizing:border-box;
overflow-x:hidden;
}
It is a good way as this helps gain more control of how you want your page to look the only downfall is that using this means you may have to set the attributes from here again into the other css styles as this effects everything.
It may seem like too much but can help in the long run.
My site has a pop-up which acts like a modal but isn't a modal, and it drops into view when a user clicks this link/label
<a class="loginbtn"><label class="loginbin" for="lightbox-two">LOGIN</label></a>
It works fine on my PC and mobile, but not on my tablet (Samsung Galaxy Tab GT p7500R). The popup uses pure CSS to function, and I've provided a fiddle here.
Simply click "Login" and a window drops down. Perhaps there is something in the CSS preventing it from working on tablets (or maybe only mine). Do you know the problem? Thank you
Reference HTML
<a class="loginbtn"><label class="loginbin" for="lightbox-two">LOGIN</label></a>
<aside class="lightbox">
<input type="checkbox" class="state" id="lightbox-two" />
<article class="content">
<form id="loginform" name="loginform" method="POST" class="login" action="#">
<input name="emailaddy" id="emailaddy" type="email" class="feedback-input" placeholder="My Email"/>
<div id="formResponse" style="display: none;"></div>
<button type="submit" name="loginsubmit" class="loginbutton">Login</button>
</form>
</article>
<label class="backdrop" for="lightbox-two"></label>
</aside>
CSS
.state{position:absolute;top:0;left:-100vw}
.state:checked ~ .content{-webkit-transform:none;-ms-transform:none;transform:none;margin-top: 10%;overflow:auto; border-radius: 9px; background-color: black;}
.state:checked ~ .backdrop{bottom:0;opacity:1;z-index:1}
.lightbox{position:fixed;top:0;right:0;left:0;height:0;padding:0 20px}
.lightbox .content{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:hidden;position:relative;z-index:2;max-width:500px;max-height:95vh;margin:20px auto;padding:20px;background:#fff;-webkit-transform:translateY(-200%);-ms-transform:translateY(-200%);transform:translateY(-200%);-webkit-transition:.3s -webkit-transform ease-in-out;transition:.3s transform ease-in-out;border:1px solid rgba(0,0,0,0.1)}
.lightbox .header,.lightbox .footer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
.lightbox .header .h,.lightbox .footer .h{margin:0}
.lightbox .header .button:not(:first-child),.lightbox .footer .button:not(:first-child){margin-left:auto}
.lightbox .header{padding-bottom:10px}
.lightbox .footer{padding-top:20px}
.lightbox .main{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}
.lightbox .backdrop{position:fixed;z-index:-1;top:0;right:0;bottom:100%;left:0;opacity:0;background:rgba(0,0,0,0.3);-webkit-transition:.3s opacity ease-in-out;transition:.3s opacity ease-in-out}
So after some digging I am not sure what the issue is here. I have a text field that is overlaid with a div. The div contains a ul with multiple li representing currently applied filters to a table. The overlay is supposed to catch the clicks to open a menu and hold any new filters.
EDIT:
To clarify the need is for IE9 specifically. For some reason the overlay is not what comes to the foreground. I can click on specifically the li and get the behavior I am expecting but there are space between and at the end that the overlay appears not to be present.
--My code--
HTML:
<!-- Start filter row-->
<div class="row collapse">
<div class="small-3 medium-2 large-1 columns">
<span class="prefix">Current Filters:</span>
</div>
<div class="small-9 medium-10 large-11 columns">
<div id="manager_filter_overlay" class="filter_overlay">
<ul>
<li class="filter_item">Status: Active</li>
<li class="filter_item">Start Date: 07/MAR/2014</li>
<li class="filter_item">End Date: 07/APR/2014</li>
</ul>
</div>
<input type="text" onkeydown="return false;" style="z-index:0;">
</div>
<div class="filter-menu">
<div class="arrow-up"></div>
<div class="filter-menu-container">
<ul>
<li>
<label>Status:
<select>
<option>
Active
</option>
<option>
Deleted
</option>
</select>
</label>
</li>
<li>
<label>Start Date:
<input type="text" placeholder="DD/MMM/YYY">
</label>
</li>
<li>
<label>End Date:
<input type="text" placeholder="DD/MMM/YYY">
</label>
</li>
</ul>
<div class="row">
<div class="large-12 center columns">
<input type="button" class="button tiny blue" value="Search">
<input type="button" class="button tiny blue" value="Reset">
<input type="button" class="button tiny blue" value="Save">
</div>
</div>
</div>
</div>
</div>
<!-- End filter row-->
CSS:
.filter_overlay{
position:absolute;
height:37px;
width:100%;
/*border:1px solid black;*/
}
.filter_overlay:hover{
cursor:pointer;
}
.filter_overlay ul{
margin:0;
list-style: none;
margin-left:5px;
}
.filter_overlay ul li{
display:inline-block;
/*border: 1px solid blue;*/
margin-top:10px;
padding-right:5px;
font-size:12px;
}
All browsers except IE9 seem to be doing what I would expect. When hovering over the text box anywhere my cursor is a pointer I click and my drop down show (JS not included it is very basic and not anything I think is impacting the issue). In IE9 however when hovering only a pointer is shown when over an li and when outside of that it is able to get to the text field.
Not sure what exactly you're talking about, but I moight, lol.
Anyway, if you want the default cursor everywhere, try this:
*:hover {
cursor: default;
}
or if just over the bullet points, try:
li:hover {
cursor: default;
}
Hope this works :D
After some further looking into this appears to be related to the background. Without it based on the two threads below there are z-index issues. While they suggest using
background:white; filter:alpha(opacity=1);
I was not able to see an results from this.
All I did was added the background and a 1px border.
IE z-index trouble on element with transparent background
z-index problem in IE with transparent div
Here i have some code from my website I'm making. I'm having trouble styling the links within css. I'm not sure why they won't change. Also the reason I've used class is because i have this code repeated 4 times (don't worry about why :P) Btw I've also tried putting the 'a' infront of .profileLinks that didnt work either :(
Here is the external CSS style sheet
#trends .profileLinks a:link{
color:#0000FF;
text-decoration:none;
background: transparent;
}
#trends .profileLinks a:visited {
text-decoration: none;
color: #0000FF;
background: transparent;
}
And here is the Html Code
<div id="trends">
<h1> Trends... </h1>
<img src="logo.png" alt="Profile Image" height="59" width="68">
<a class="profileLinks" href="#" title="User's Profile Name"> Mark Fonacier </a>
<a class= "commentLinks" onClick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" ><i>Comment</i></a>
<br/>
<p>
PostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPost
</p>
<a onClick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" ><i>Comment</i></a>
<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
<form method="post" action="">
<textarea name="comments" cols="60" rows="2" placeholder="Enter your comments here..." maxlength="1000">
</textarea>
<input type="submit" value="Submit" />
</form>
</div>
<br/>
This selector,
#trends .profileLinks a:link
will only work for child <a> tags of elements with a class of profileLinks, whereas your <a> are the elements with the class applied to it. Change it like so:
#trends a.profileLinks:link
Same goes for the other rule.
Do you have any other stylesheet overridden to yours?
Try this
#trends .profileLinks a:link {
color:#0000FF !important;
text-decoration:none;
background: transparent;
}
Hey try this one Just defined color to all links. Change the link color to your desire one.