Hovering the div will trigger the mouse over effect on the child button.
Clicking on the div (outside) the button also triggers the buttons onMouseDown.
Example code:
<DIV style="DISPLAY: table; background-color:#F5DFE8; width:500px;">
<button onMouseDown="alert('hello')";">Button</button>
</DIV>
A fiddle for testing it yourself: http://jsfiddle.net/N2c8t/15/
Been googling my tail off, any known solution to this? Other than just not using display:table obviously. :) Thanks!
note: Tagged this with IE8 and IE9 as those are the browsers I have tried so far.
It almost seems like IE is treating the button as display: table-row no matter what actual display setting is put (and thus filling the whole div). Running interference with another element solved it (if this is a viable solution for you):
<DIV style="DISPLAY: table; background-color:#F5DFE8; width:500px;">
<span><button onMouseDown="alert('hello');">Button</button></span>
</DIV>
But perhaps better still (less intrusive), keeping your same original html and adding a psuedo-element to the div also solved it:
div:before {
content: '';
display: block;
width: 0;
}
Related
I'm trying to override a CSS attribute that is preventing me from centering a chart I have in a div.
I've seen lots of posts on these but not with importing a chart.
The chart I'm trying to center is from the google visualization API, but I should be able to solve this with just HTML and CSS.
Because the chart comes from Google, there is some code that I need to override, specifically a div that has position: relative
In the inspector, I can uncheck position: relative and the chart centers.
Problem is, I didn't write that code and when I try to override it like this:
#electricalLineChart div div{
position: static!important
}
It still favors the original position.
Here's the css:
#electricalLineChart{
width: 80%;
margin: auto;
}
Here's the html:
<div style="overflow-x:auto;">
<table class="container">
<tbody id="electrical-tables">
<tr id="odd-cells">
<td><div id="electricalLineChart"></div></td>
</tr>
</tbody>
</table>
</div>
I CANNOT use align= "center" in the HTML because it ruins the functionality of my chart.
I think you have other issues since setting a width and margin auto shouldn't be impacted by having position: relative on an element.
But, you probably need to increase the CSS selector specificity to override the incoming CSS. I would inspect the element with dev tools an copy the FULL CSS selector it displays. Then you need to ADD a tag to the hierarchy. Usually, you can do this by adding an ID to the body.
#electricalLineChart div div{
position: static!important
}
should become something like
#mySite #electricalLineChart div div{
position: static !important;
}
This makes your rule MORE SPECIFIC than the incoming CSS so yours will win.
Also make sure you have a space between the value and the ! as well as a ; at the end.
So stopped trying to override stuff because it wasn't working and literally just tried
#electricalLineChart{
display: flex;
justify-content: center;
}
And it works now.
Sometimes I just hate CSS.
I display a few images of varying width and height, and I'd like to be able to add a class or two, say new or hot that would add small overlay star or something.
Normally this would be solved by making a div with the intended image being the background, but having my images all of unknown size, I'm getting stuck trying to figure out how to achieve this. Current HTML is of structure: <a><img></a>
I'm looking for a CSS feature that doesn't exist:
img.new { foreground:transparent url('/images/new.png') no-repeat bottom right }
I'm really hoping to solve this without databasing my image sizes, and without using javascript. But if you have a JS/jquery approach that's elegant, I'm all ears.
I'm not sure how well this would work for you, but if you can add the class to your <a> element instead of your <img>:
<a class="new" href="..."><img src="..." alt="alt text"></a>
Then you can try adding an a:after pseudo-element positioned absolutely over your <img> and giving it the overlay icon as a background image:
a.new {
display: inline-block;
position: relative;
}
a.new:after {
display: block;
position: absolute;
content: '';
width: /* width of overlay image or anything you choose */;
height: /* height of overlay image or anything you choose */;
right: 0;
bottom: 0;
background: transparent url('/images/new.png') no-repeat;
}
There's a bit of an issue with the positioning of the overlay image as the <a> is made an inline block for positioning to work, but you can always give it a little bottom offset to make up for it. Here's a fiddle to show you what I mean.
Without knowing more details about your setup, there are a few things that come to mind that you can do:
Use img.new:after (Some Quirksmode info on it.). It does have some browser support limitations, though. If you don't mind that some of the older browsers don't support this, then I recommend this one. I've used it before with nice results (and you could also fall back to JavaScript wrapped in IE conditional comments if you really need to, since IE appears to be the only browser out after the feature that doesn't support it).
If you're not using overflow:hidden, you might be able to set it as the background of either your image, its anchor tag, or even the next parent up. This, of course, depends on your exact design.
Use an absolutely positioned div or span within your anchor tag and display only on anchors with the .new class. So, something like this:
<a class="new">
<span class="newBanner">
<img/>
</a>
<style>
.newBanner {
display: none;
position: absolute;
top: 0;
right: 0;
}
.new .newBanner {
display: block;
}
</style>
This last one's kind of rough and will likely need tweaked, but the point is in the styling, specifically the .new .newBanner { display: block; } part. Again, it depends largely on your exact design, so the more information you can give us, the better help we'll be able to give you.
I'm attempting to create a max-width bounding box which will both wrap text (on spaces, no word-breaking allowed) and shrinkwrap to the width of the longest line of text. For a demo of the various shrinkwrap methods, see http://www.brunildo.org/test/IEMshrink-to-fit.html
I chose the "float" method, but in my testing, none of the methods accomplished my desired effect.
In the example code below (also available with live-preview at jsbin), I show what happens when you let the words wrap themselves, and what happens when you insert a <br /> line break tag. Using <br /> manually results in exactly the effect that I'm looking for, while omitting it wraps the text correctly, but forces the white box to take the entire max-width as its width, which I'd like to avoid.
<style>
div#wrapper { background: #ddd; padding: 10px; }
header { display: block; float: left; max-width: 320px; background: #fff; margin-bottom: 20px; clear: both; }
#wrapper:after { content: " "; clear: both; display: table; }
</style>
<div id="wrapper">
<header>
<h1>Diane Von Furstenberg</h1>
</header>
<header>
<h1>Diane Von<br />Furstenberg</h1>
</header>
</div>
Here's a screenshot of the problem with some elaboration:
I've created a JS method to manually insert the <br /> tag as a stopgap measure, but I imagine there must be some way to do this properly using only CSS/HTML. Thanks for the help!
Changing the display of the h1 to table-caption is close to what you want, in Google Chrome. But it's not perfect and I can't really recommend that as a solution wholeheartedly, mainly due to not testing it in any other browsers.
Not sure if browser behavior has changed since the earlier 'table-caption' answer was posted, but it does not currently work (using Chromium 41):
In reality, it seems the desired behavior is not possible with pure CSS (as of 2015). Further explanation and a lightweight Javascript workaround are available in another SO question: max-width adjusts to fit text?
I have the following code
<a href="http://google.com">
<div style="float:left;">
Test
</div>
<div style="float:left;">
testing
</div>
</a>
The link works correctly (clicking anywhere in the div navigates to the link) but in IE7 the div doesn't appear to be clickable. When hovering over the div the cursor does not change to a hand.
The hover works as excepted in IE8, Firefox, chrome
My guess is that there is the usual ugly IE hack for this :-(
a {
display: block;
background: #eee;
overflow: hidden;
cursor: pointer;
}
the link still works, even without the pointer changing, however IE7 does like it better if hasLayout is set to to true (overflow:hidden; which also contains the floats in other browsers), and then just tell it to have the right cursor.. it needs help ;)
This should work unless you've got some extra markup:
http://jsfiddle.net/Cd4PK/
However this is bad markup. You should not have block elements (divs) within inline elements (a). Try using a span?
href cannot be ...... or empty
edit:
try:
a
{
display: inline-block;
}
How to make foo invisible using CSS (CSS3 if needed) while keeping bar and fizz visible?
<table>
<tr>
<td>
<textarea>bar</textarea>
<input type='button' title='fizz' />
foo
</td>
</tr>
</tbody>
Making foo in the same color as background is acceptable, but the trick is - background is an image, hence - foo must be transparent instead of solid color.
JavaScript isn't an option either.
Changing HTML is not an option either.
Any ideas?
This worked fine in IE8 and Firefox (IE7 left little dots for words, which I guess if you set the font-color to something that blends with the background image, it might do fine. Note that this does not affect either the text-area or the input for any text in them.
td {font-size: 0;}
ADDED ON EDIT
WOW I mean, really! This worked on IE7-8, Firefox, and Safari
td {visibility: hidden}
td textarea,
td input {visibility: visible;}
As a side note, I tested this with elements wrapped in div rather than a table, I even did a div in a div and the inner div shows while other content is hidden.
Apparently, the visibility property acts on the element, and (unlike opacity) propagates to the child elements by inheritance, so that if one explicitly sets a child element visibility it no longer inherits the hidden but uses its own setting of visible and the fact that the wrapper is hidden does not matter.
EDIT: Scott's is better. Use his.
I don't think a proper solution is going to be pretty.
td {
position: relative;
left: 9001px;
}
textarea {
position: relative;
right: 9001px;
}
If you don't have to support IE then setting the text to transparent is easy:
table {
background-color: cyan;
}
td {
color: rgba(255,255,255,0);
}
td textarea, td input {
color: #000;
}
You need to put it inside a container like a div then hide the container ..
Set the size of the td to be the same as the size of the textarea (via CSS width and height), then set overflow: hidden on the TD so that the text you want to hide is outside the bounding box?
whoops... should've read the OP a bit more closely. Guess the following won't work after all, since changing the html isn't an option.
Set a css class on the container you want to hide (the textarea?):
...
<textarea class="hideme">bar</textarea>
...
and the following css:
.hideme {
display: hidden;
}
'hidden' makes the element disappear (it's literally not displayed), but still is still accounted for in the document flow and takes up the space it normally would. If you want it to literally be gone and not have any effect on the document, then use display: none.
How about the reverse of Amber's suggestion -
Set overflow to overflow: hidden on the TD, fix the size where it is right now and add a huge padding-bottom on the textarea or button.