I need some advice on a simple CSS tooltip. I have a calendar on a site that is rendered within a table. People can add events to this calendar. I have added CSS so that when you hover over a date, it will display the event, or events for that date. Within the table, I have this for each date cell with an "event":
<td class="eventDate" id="2011-08-24" title="2011-08-24">
24
<span class="tooltip">
<img class="infoImg" src="./images/info.png" width="16" height="16">
<i>Today's Events</i>:
<br>
This is an event.
<span class="noOfDays">[ 3 days ]</span>
</span>
</td>
And, this is what I have for my CSS (found the technique via a Google search):
td.eventDate {
position: relative;
z-index: 24;
background-color: #afafaf;
color: #000;
padding: 2px 4px 2px 4px;
text-align: right;
font-size: 36px;
font-family: Georgia;
}
td.eventDate:hover {
z-index: 25;
cursor: default;
}
td.eventDate span.tooltip {
display: none;
}
td.eventDate:hover span.tooltip {
display: block;
position: absolute;
top: 5.3em;
left: 28.5em;
width: auto;
color:#3e3e3e;
border:1px solid #3e3e3e;
background-color: #efefef;
padding: 4px 8px 4px 8px;
font-family: Candara, Tahoma, Geneva, sans-serif;
font-size: .4em;
font-weight: 700;
text-align: left;
z-index: 100;
}
span.noOfDays {
font-size: 11px;
padding: 0px 0px 0px 6px;
}
This works perfectly for any Mozilla based web browser; however, when I move to Safari, Chrome or IE (I haven't tried it in Opera yet), it is all wonky. For one thing. the size of the tooltip box seems constrained to the size of the table cell, making my events wrap all over the place. Also, the positioning of the tooltip box when it is "revealed" seems relative to the table cell in which the event span is placed, and not aligned with the top-right of the calendar table.
Can anybody see what I am doing wrong? Should this not be working in Mozilla either? Are there any other very simple, and lightweight tooltip techniques I can use that you would suggest? I was trying to stay away from JavaScript/JQuery/etc. as I wanted to keep this pretty light, but I may have to switch over if I cannot get this to work with CSS. Any, and all advice is appreciated.
Thanks for taking the time to read, and have a great day. :-)
Why not use a simple jquery tooltip script. easy to implement and will be set up under 1 minute.
try Tiptip or Qtip in google. Will safe you some time
Related
I have css implementation for <input type="file"> which styles the button and this is my code:
::-webkit-file-upload-button {
cursor: pointer;
margin-top: 25px;
display: inline-block;
padding: 6px;
padding-right: 29px;
padding-left: 29px;
transition: all 1s ease;
color: #darkGray;
text-transform: capitalize;
font-size: 15px;
z-index: 1;
position: relative;
border-radius: 25px;
background-color: transparent;
border: 2px solid #red;
}
But this only works on Chrome and I would like to know how would I do it for other browsers?
There's a standard ::file-selector-button pseudo-element now, see https://github.com/w3c/csswg-drafts/issues/5049. Firefox supports it, and future versions of Safari and Chrome will too.
Here is how you can implement custom styling for the "file" input type: https://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/
Most people tell you to completely do away with the button stuff and use another button to engage the click(); function on the file chooser.
But that may soon be outdated wizardry, as you found out. The equivalent of what you are doing on IE (v10 and above) starts this way:
input[type="file"]::-ms-browse {
background-color: #ffffff00;
margin: 0px;
padding: 0px;
border: 0px;
}
input[type="file"]::-webkit-file-upload-button {
background-color: #ffffff00;
margin: 0px;
padding: 0px;
border: 0px;
}
<input type="file"/>
There are two most important reasons why you should continue to go with your direction
Less hackery, why make it hard if you can do it simpler nowadays?
On Chrome and FF, the file chooser becomes automatically a drop target, that adds huge usability value.
Now I am still researching how I can make the button 3d shading go away, so I can make the button invisible and leave only the simple drop target field.
Styling file inputs is notoriously difficult, as most browsers will not change the appearance from either css or javascript.
You can pass through click events from labels and style the label in whichever way you want.
<label id="add-computer-button" for="fileupload">Add from computer
<input id="fileupload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">
Here is the demo: https://jsfiddle.net/dinesh_feder/jww69rnf/
I'm working on a website for a client and I have 3 boxes that go across horizontally near the bottom of the home page. Reading New Sermons, Tidbits, and Prayer Requests. For some reason the text that I have spanning across the boxes(images) does not want to follow my property and rule of the display:block. I've tried the \9 and the *display:block; to see if those work but it's not. Any other suggestions?
The website is http://lordjesuschurchofgod.com
Here is the code that is giving me trouble
body.home .notices .title {
position: relative;
top: -85px;
display: block;
text-align: center;
color: #fff;
text-shadow: 2px 2px 2px #666;
font-weight: bold;
overflow:hidden;
}
I would like to apply this css on my .FileUpload button , but It only works on IE and not on Chrome and I still don't know what is wrong with it. Someone as got an idea ?
Thanks for helping
.FileUpload
{
width: 90px;
float: left;
color: black;
font-family: Segoe UI,Arial, Sans-Serif;
border: 1px solid #C7D2D8;
height: 30px;
text-decoration: none;
display: inline;
background: white;
margin: 10px 10px 10px 540px;
text-align: center;
padding: 4px 0;
letter-spacing: -1;
border: none;
cursor: pointer;
}
AFAIK it is not possible to style an <input type="file">, for all browsers. But you could replace the upload-field with javascript and the replacement can by styled as much as you want.
You'll get an example of such a replacement script in this blog entry.
You can try using jquery instead, this would be cross browser compatable then, more info here > http://jqueryui.com/demos/button/#default
either that or there are several examples here on different methods of achieving what you want http://speckyboy.com/2010/05/26/20-awesome-jquery-enhanced-css-button-techniques/
I have a menu div that appears just fine in IE9 and Firefox, but in chrome and IE8, the contents of the div are not following actual div itself when the div is moved:
IE9/FF:
Chrome:
As far as I can tell, i don't have any css conflicts or issues with flow. I may be missing something though (obviously). Any help would be greatly appreciated. TIA
Here is the current div hiearchy:
<div id="mainBody">
<div id="mainMenu" class="mainMenu">
<asp:Menu class="menuItems">
<--- menu items jargon here --->
</asp:Menu>
</div>
</div>
And the css:
body
{
background-color: #E7EDEB;
}
.textBox
{
margin: 1px;
}
#mainBody
{
border: 1px solid #000000;
width: 1000px;
background-color: #FFFFFF;
margin-left: 10%;
margin-right: 10%;
padding: 0px;
font-family: Calibri;
letter-spacing: .03em;
}
.mainMenu
{
border: 1px solid #000000;
background-color: White;
margin: 0px;
position: relative;
width: 600px;
left: 50px;
bottom: 25px;
height: 30px;
}
.MenuItems
{
vertical-align: middle;
font-family: Calibri;
font-size: large;
text-decoration: none;
text-align: left;
color: #000000;
margin: 3px;
}
div#mainContent
{
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
margin: 0px;
width: 1000px
}
UPDATE:
I removed the asp menu control from the div and replaced it with plain text. It looked much more like you would expect, so it's leading me to believe it has something to do with the control itself. I haven't applied any styles to the control itself so im still lost.
Try adding styling to your skiplink:
#ctl04_SkipLink {
position:absolute;
left:-9999px;
}
It's caused by your hidden anchor before the ul. Haven't figured out why yet.
EDIT: Actually, it appears its your hidden image inside that anchor.
Being an ASP control issues, I didn't think I'd ever figure it out. It turns out that it WAS an issue with the way ASP was rendering the control. Thanks to Rob, we were able to narrow it down to a SkipLink. Since the page is personal, I don't need to worry about skiplinks so I opted to disable it completely. The way to do it in ASP is simply to set SkipLinkText to "" in the menu control.
For anyone else that comes across this, there are a few other tricks shown here:
http://forums.asp.net/t/976796.aspx/1
Thanks guys
Try to add
top:0;
to .mainMenu and reload it a few times ;)
I'm having issues with rounded corners in IE8. I've tried a few methods without success.
Here is my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
padding: 2px;
margin: 2px;
color: #505050;
line-height: normal;
}
p {
margin: 4px;
}
.categoryheading3 {
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
background-color: #297BB6;
color: #FFFFFF;
font-size: 16px;
font-weight: 700;
padding: 8px 0;
text-align: center;
margin: 0px;
}
.leftcolumn {
width: 174px;
padding: 8px;
float: left;
display: inline-block;
background-color: transparent;
/*--min-height: 500px*/
overflow: hidden;
}
.lefttop {
display: inline-block;
width: inherit;
margin: 0 5px 2em 0;
float: left;
width: 160px;
background-color: #FFFFFF;
border: 2px solid #297BB6;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="leftcolumn">
<div class="lefttop">
<H4 class="categoryheading3">Heading</H4>
<p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text </p>
</div>
</div>
</body>
</html>
Which produces this in Firefox:
But this in IE8:
If anyone has any tips I'd be very grateful!
edit: Joseph helped by suggesting to use pie.htc, however I'm still struggling with this element not working:
.categoryheading3 {
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
behavior: url(PIE.htc);
background-color: #297BB6;
color: #FFFFFF;
font-size: 16px;
font-weight: 700;
padding: 8px 0;
text-align: center;
margin: 0px;
}
Internet Explorer (under version 9) does not natively support rounded corners.
There's an amazing script that will magically add it for you: CSS3 PIE.
I've used it a lot of times, with amazing results.
Rounded corners in IE8
Internet Explorer 8 (and earlier versions) doesn't support rounded corners, however there are few other solutions you may consider:
Use Rounded Corners Images instead (this generator is a good resource)
Use a jQuery Corner plugin from here
Use a very good script called CSS3 PIE from here (Pro's & Con's here)
Checkout CSS Juice from here
Another good script is IE-CSS3 from here
Even though CSS PIE is the most popular solution, I'm suggesting you to review all other solutions and choose what works best for your needs.
Hope it was useful. Good Luck!
I didnt know about css3pie.com, a very useful site after seeing this post:
But what after testing it out it didnt work for me either. However I found that wrapping it in the .PHP file worked fine. So instead of:
behavior: url(PIE.htc);
use this:
behavior: url(PIE.php);
I put mine in a folder called jquery, so mine was:
behavior: url(jquery/PIE.php);
So goto their downloads or get it here:
http://css3pie.com/download-latest
And use their PHP file. Inside the PHP file it explains that some servers are not configured for proper .HTC usage. And that was the problem I had.
Try it! I did, it works. Hope this helps others out too.
http://fetchak.com/ie-css3/ works for IE 6+. Use this if css3pie doesn't work for you.
PIE.htc worked for me great (http://css3pie.com/), but with one issue:
You should write absolute path to PIE.htc. It hasn't worked for me when I used relative path.
As Internet Explorer doesn't natively support rounded corners.
So a better cross-browser way to handle it would be to use rounded-corner images at the corners. Many famous websites use this approach.
You can also find rounded image generators around the web. One such link is http://www.generateit.net/rounded-corner/