I am struggling with a CSS popup and hoping someone can help.
We have various tds that have this popup within their cell, in firefox, chrome etc (the usual) it works fine. However in the older browsers below IE8 it is having problems.
It seems that the :hover is lost when the mouse moves out of the cell, even if it moves over the popup area (which is situated just below the cell). You are probably saying yes that is what it should be doing but a child element of the parent that is hovered in firefox keeps the :hover class on the parent.
The popup div is positioned absolute and given a margin-left of -999px; (This is ok)
On :hover of the parent div element the margin-left is set to -125px (half of width of popup div, so it is centered - also ok)
All this is fine and works perfect in modern browsers as previously stated.
HTML Snippet
<tr>
<td>
<div class="tooltip">
<span class="events">CONTENT</span>
</div>
</td>
<td>
<div class="tooltip">
<span class="events">CONTENT</span>
</div>
</td>
<td>
<div class="tooltip">
<span class="events">CONTENT</span>
</div>
</td>
<td>
<div class="tooltip">
<span class="events">CONTENT</span>
</div>
</td>
<td>
<div class="tooltip">
<span class="events">CONTENT</span>
</div>
</td>
</tr>
CSS Thusfar
#page-content .block_calendar_month { overflow: visible; }
.tooltip { border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; }
.tooltip span { margin-left: -999em; position: absolute; }
td.day:hover { background-color: #fbf16b; }
.tooltip:hover span { font-size: 12px; position: absolute; left: 0em; z-index: 5000; top: 1em; margin-left: -125px; width: 250px; }
.tooltip:hover span div { }
.events {padding: 0.8em 1em; }
Hope someone can give me some advice, as I have lost a few hours trying to solve this.
I haven't touched IE6 in a while, but from working with IE7 I can tell you it does some funky stuff with tables and z-index. I found that the best solution when working with tooltip is to not use tables. Why not strip out the table code and have:
<div class="tooltip">
<span class="events">CONTENT</span>
</div>
Also, I am not sure what plugin you are using (in fact, it looks like you aren't using any), But if you use JQuery Tools tooltip plugin, you can set the popup's offset distance as a JSON parameter. Read more http://jquerytools.org/demos/tooltip/dynamic.html.
If you are going to keep the current implementation, I'd recommend toggling between display:block and display:none for the tooltip.
Related
I have referred to many options but still I am not able to apply CSS to my parent container. My table structure is like:
<td>
<div id="div1">
<div id="div2" class="colorMe"></div>
</div>
</td>
Now according to above structure if div2 has class colorMe then I want to color the entire td background in yellow.
I have used CSS like this but not working:
td > div> div.colorMe {
background-color:yellow;
}
Can you please tell me how I can color my td using css?
There is currently no possibility to apply CSS Rules to a parent element. There is in fact the :has Pseudoclass, which is exactly for this kind of issues, but at the moment (Nov 2017) it is not supported by any browser. The only way to achieve this would be with Javascript.
I know that you mentioned only using css but adding some javascript event to change a class is a very well documented approach. There are dozens of examples online and including the the script in your file takes no extra work if you use vanilla.
Here is a small example of changing a parent div's color on a click event
var box2 = document.querySelector('.color2');
box2.addEventListener("click", function() {
this.parentNode.style.backgroundColor = "white";
});
div {
width: 100px;
height: 100px;
border: 2px solid black;
}
.color1 {
background-color: red;
}
.color2 {
background-color: rebeccapurple;
width: 50px;
height: 20px;
}
<div class="color1">
<div class="color2"></div>
</div>
You can kind of emulate the behavior you need with the following trick:
td {
position: relative; /* make the cell a container for positioned children */
}
.colorMe::before { /* cover this container with colored pseudo element */
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color:yellow;
z-index: -1;
}
table { /* just to make the example prettier :) */
width: 100%;
height: 100px;
table-layout: fixed;
}
<table>
<tr>
<td>
Just a TD
</td>
<td>
<div id="div1">
<div id="div2" class="colorMe"></div>
</div>
</td>
<td>
Just a TD again
</td>
</tr>
</table>
It won't work, however, if you need to position something absolutely from the .colorMe element itself.
I am trying to modify the z-index of the http://tympanus.net/Development/ScatteredPolaroidsGallery/ . The demo I am refering to is in the third / final example shown.
When the polaroid is flipped I am unable to select the text in chrome or Safari, but I can in firefox.
Chrome and Firefox
I just need a way to be able to select the text in chrome/safari. This way I can then be able to add hyperlinks and call to action buttons that are currently hidden behind the z-index.
The div in question is 'photostack-back'
HTML
<section id="photostack-1" class="photostack photostack-start">
<div>
<!-- Polaroid with backside -->
<figure>
<a href="http://goo.gl/fhwlSP" class="photostack-img">
<img src="img/2.jpg" alt="img02"/>
</a>
<figcaption>
<h2 class="photostack-title">Happy Days</h2>
<!-- optional backside -->
<div class="photostack-back">
<p>Fish don't fry in the kitchen and beans don't burn on the grill. Took a whole lotta tryin' just to get up that hill. Baby if you've ever wondered - wondered whatever became of me. </p>
</div>
</figcaption>
</figure>
</div>
</section
CSS
.photostack-back {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fff;
font-family: "Give You Glory", cursive;
color: #a7a0a2;
padding: 50px 40px;
text-align: left;
font-size: 22px;
line-height: 1.25;
z-index: 1;
}
Here is the tutorial Scattered Polaroids Gallery
I figured out that this was not a z-index issue but a backface-visibility issue.
I used veinjs to inject the following code in photostack.js
vein.inject('figure', {'backface-visibility' : 'visible !important'});
and the css
figcaption {
backface-visibility: hidden;
}
So I'm simulating a table layout with a div and a couple spans inside it. I'd like the span on the right to indent any text that wraps. I've tried a few things and can't get it to work. Any help would be appreciated.
jsFiddle: http://jsfiddle.net/2Wbuv/
HTML
<div class="display-element">
<span class="display-label">Field 1</span>
<span class="display-field">This is my string of data, some times it is pretty long. Sometimes it is not. This one is.</span>
</div>
<div class="display-element">
<span class="display-label">Field 2</span>
<span class="display-field">This is another string of data.</span>
</div>
CSS
.display-element {}
.display-label {display: inline-block;
width: 100px;
padding-left: 5px;}
.display-field {display: inline;}
Check this out: http://jsfiddle.net/2Wbuv/2/
.display-element {
}
.display-label {
display: inline-block;
width: 100px;
padding-left: 5px;
}
.display-field {
display: inline-block;
padding-left: 50px;
text-indent: -50px;
vertical-align: top;
width: 200px; /* for testing purposes only */
}
<div class="display-element">
<span class="display-label">Field 1</span>
<span class="display-field">This is my string of data, some times it is pretty long. Sometimes it is not. This one is.</span>
</div>
<div class="display-element">
<span class="display-label">Field 2</span>
<span class="display-field">This is another string of data.</span>
</div>
It sounds like you want a hanging indent. CSS something like this should do the trick:
.hanging-indent
{
text-indent : -3em ;
margin-left : 3em ;
}
But since your <span> is an inline element, the text-indent property, as well as other CSS properties pertaining to a block, is meaningless.
The CSS 3 draft specifies a hanging indent. If supported by Browsers, the following should work:
.hanging-indent
{
text-indent: 3em hanging each-line;
}
Unfortunately neither hanging nor each-line values are currently supported in modern browsers as the specification for CSS Text Module Level 3 is still a Draft.
The feature is implemented with a browser specific prefix for WebKit and Chromium. For Firefox there is an open Bug you may vote on.
If anyone can suggest a better place than stackoverflow for css questions please let me know.
I have an outer div with background and border and then I need to have two columns within the colored box. Some reason when I place the floating divs inside the outer div, the outer div does not grow.
Here is my HTML:
<div class="tip_box">
<h3>Send</h3>
<hr />
<form id="email_form">
<div class="three-columns">
<div class="contact_form_input">
<h6>Your Name</h6>
<input type="text" name="name_text_box" class="form_input" id="name_text_box" />
</div>
<div class="contact_form_input">
<h6>Your Email</h6>
<input type="text" name="email_text_box" class="form_input" id="email_text_box" />
</div>
</div>
<div class="three-columns">
<div class="contact_form_input">
<h6>Recipient Name</h6>
<input type="text" name="name_text_box" class="form_input" id="Text1" />
</div>
<div class="contact_form_input">
<h6>Recipient Email</h6>
<input type="text" name="email_text_box" class="form_input" id="Text2" />
</div>
</div>
</form>
</div>
<p>This is where your message will go. Anything you want, as long as you want. Make it personal; make the recipient know you care.</p>
Here is my CSS:
.three-columns {
width: 290px;
float: left;
margin-right: 45px;
}
.tip_box {
padding: 20px;
margin: 20px 0px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 10px;
border-radius: 7px;
padding-left: 55px;
background: #eee;
font-style:italic;
background: #eff7d9 url(../images/icons/tip.png) no-repeat scroll 10px 15px;
border: 1px solid #b7db58;
color: #5d791b;
}
Screenshot:
http://dl.dropbox.com/u/2127038/cssissue.png
Non-float blocks containing float blocks will not automatically expand, since float blocks are taken outside the normal flow (or at least specially outside the flow). One way to correct that is to specify the overflow property to hidden or auto.
.tip-box { overflow: auto; }
See quirksmode for more.
Add following HTML after <div class="tip_box"></div>:
<div class="clear"></div>
Here is the CSS:
.clear{
clear:both;
}
It will surely work.
.tip_box { overflow:hidden; zoom:1; }
this establishes new block formatting context in ie7+ and other browsers, triggers haslayout in ie6 to contain floats
You're going to need what is commonly known as a clearfix. In this case a overflow: hidden on the containing element will do - see: http://www.jsfiddle.net/yijiang/zuNwH/2
.tip_box {
overflow: hidden;
}
As an aside, you might also want to use label elements instead of h6 to markup labels for your form elements, and use a list instead of individual divs for containing each label - input pair, and reduce the amount of class attribute you use by relying on more complex selectors for your CSS file.
<li>
<label for="recipient_email">Recipient Email</label>
<input type="text" name="email_text_box" id="recipient_email" />
</li>
In this case I wouldn't float the divs left, I would make them display: inline or inline-block.
Your 3 columns will turn into 2 columns, then 1 column if the browser window shrinks.
For example I have a 200px div containing three buttons, the text is only minimal so the buttons don't fill the horizontal space available. Is it possible to..
Make the last button stretch to occupy all the remaining space?
The First button to stretch to fill the remaining space pushing the last two buttons along?
The middle button to stretch to fill the remaining space pushing the last button along?
I've realised that the real issue is buttons won't stretch until you give them an explicit width (ie, width:100%). You still need the table-cells though to constrain that 100% to a 'what will fit' model. You could just set 33% on each button but that won't work if your buttons are being added dynamically (unless you calculate the percentages on the server).
METHOD 1 (doesn't work): Buttons don't expand to fit the row (ie, display:table-cell appears to be ignored).
<div style="display:table;width:200px">
<div style="display:table-row">
<button style="display:table-cell">1</button>
<button style="display:table-cell">2</button>
<button style="display:table-cell">3</button>
</div>
</div>
For IE prior to IE8 you'll need to feed a real table or a compatibility script like IE8-js. The basic concept is easy enough though:
<!--[if ie lt 8]>
<script><!--pseudo-code, not real js-->
for (el in getElementsByTagName('button')) {
if el.style.find('display:table-cell') {
el.innerHTML = '<td><button>'+el.innerHTML+'</button></td>'
}
}
</script>
<![endif]-->
METHOD 2 (works): Hmmm.. Well for whatever reason the display:table-cell style does not work on button elements. I was able to do it with some extra markup though.
<div style="display:table;width:500px;">
<div style="display:table-row">
<div style="display:table-cell"> <button style="width:100%">1938274</button> </div>
<div style="display:table-cell"> <button style="width:100%">2</button> </div>
<div style="display:table-cell"> <button style="width:100%">3</button> </div>
</div>
</div>
I admit it ain't pretty but it will ensure all of the horizontal space is filled. It can be cleaned up a bit by using classes like in this demo I put together. Still, when combined with IE's shortcomings this is probably a case where I'd say ignore the purists and just use a table:
<style>table button {width:100%}</style>
<table style="width:500px;">
<tr> <td><button>1938274</button> <td> <button>2</button> <td> <button>3</button> </tr>
</table>
Similar to Roberts:
HTML
<div id="container">
<button id="one">One</button><button id="two">Two</button><button id="three">Three</button>
</div>
CSS
div#container {
border: solid 1px;
width: 200px;
}
div#container button {
width: 33%;
}
div#container button:last-child {
width: 34%;
}
That doesn't allow for a fluid layout: #container width must be known, then you do the math.
To allow for a fluid layout you need to hop into the world of absolute positioning:
div#container {
border: solid 1px;
width: 50%; /* resize your browser window to see results */
position: relative;
}
div#container button {
position: absolute;
width: 50px;
}
button#one {
top: 0;
left: 0;
}
button#two {
top: 0;
left: 55px;
}
button#three {
width: auto !important; /* get rid of the 50px width defined earlier */
top: 0;
left: 110px;
right: 0px;
}
Watch out for the height of #container. It's gone since all it's children in this example are absolutely positioned--you can see that from the border.
Can't you just set the widths like so...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test css button stretch</title>
<style>
#btn_container
{
width: 200px;
}
#btn_container button
{
width: 20%;
}
#btn_container button.stretch
{
width: 58%;
}
</style>
</head>
<body>
<div id="btn_container">
<p>last button stretch...</p>
<button type="button">eat</button>
<button type="button">drink</button>
<button class="stretch" type="button">sleep</button>
<br>
<p>first button stretch...</p>
<button class="stretch" type="button">eat</button>
<button type="button">drink</button>
<button type="button">sleep</button>
<br>
<p>middle button stretch...</p>
<button type="button">eat</button>
<button class="stretch" type="button">drink</button>
<button type="button">sleep</button>
</div>
</body>
</html>
This seems to get the desired effect, is fluid (if the div button container's width is changed or set to a %), and works in IE, Firefox and Opera.
edit: removed the redundant btn class; bumped up the width % for the stretch class; added the doctype. Left the types on, could technically haved removed for just an example, but meh.
#rpflo: the types are in there because my buttons in this example are not submit buttons. If these were part of a form and were submitting, I'd have left them off since the default is type=submit. (W3C HTML BUTTON)