There are numerous duplicates of "how to click through a div with CSS" but my situation seems to be a little different.
I'm using -webkit-appearance and -moz-appearance to make a div look like a text area, but this isn't perfect in some browsers... the bottom right corner doesn't show the nwse cursor like it does in some browsers. I want to overlay a div with cursor: nwse-resize, but I also want to be able to click through this div so that the faux text area can actually expand. pointer-events: none does what it is supposed to do... however, I lose my nwse cursor.. which was the entire point of this.
html (GWT UiBinder):
<div class="faux-text-area">
<div class="expando-div"/>
</div>
css:
.faux-text-area {
position: relative;
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
}
.expando-div {
position: absolute;
bottom: 0;
right: 0;
height: 10px;
width: 10px;
cursor: nwse-resize;
}
Adding pointer-events: none understandably removes my cursor CSS definition.
There is also Add CSS cursor property when using "pointer-events: none" but the accepted solution to this question is to simply put the cursor CSS on the parent element, but in my case... the parent element is the entire faux text area and I want only a portion of it to have a resize cursor. This solution will not work for me.
Are there any simple and elegant CSS solutions to making this div click through without pointer-events: none? I have a feeling I am stuck with a non CSS answer, given the limitations of webkit-appearance and moz-appearance, but I figured I'd ask the community first before doing heavier lifting.
Alternative approach (Not quite CSS only... but with a little JQueryUI needed):
I've removed:
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
And I've added:
resize: vertical;
Which makes the plain div appear as a text area (at least in Firefox and Chrome)... to fix in IE (recall I am developing in GWT):
private native void makeResizableInIE() /*-{
$wnd.$("my_divs_id").resizable();
}-*/;
Still not super thrilled that this requires an IE hack.. but with the previous CSS properties, there wasn't much of an equivocal hack like there is with the resize property.
Related
I am trying to position a Twitter and Facebook image next to my portrait on my website but in order to get the positioning correct i have to use divs. The problem is that when i add a div to the image and a link to it the div makes the image unable to be clicked and go to the link. I can't get rid of the divs because its the only way for my images to be positioned correctly. I will post a JSfiddle below with the code.
JSFiddle: http://jsfiddle.net/HeyItsProdigy/RVUhV/
Area of issue : <div id="facebook"><img src="fb.png" height="101" width="101" />
The problem isn't exactly as you describe. The issue is that your positioning is causing your Twitter element to overlap the others, which makes them un-clickable.
There's unfortunately not an easy solution. I think you're going to have to rethink your whole CSS structure, including eliminating the deprecated <center> tags to figure this one out. Good luck.
Use z-index:
#twitter {
position:relative;
bottom:290px;
left:168px;
z-index: 1;
}
#facebook {
position:relative;
top:83px;
right:168px;
z-index: 5;
}
jsfiddle
However, this type of CSS styling shouldn't be used in this manner. Using rules such as top, left, bottom, right etc should rarely be used for positioning, unless using absolute positioned elements.
You should look into using margin and padding as well as display properties for positioning your divs. Much of this code can be taken out.
I'm very sorry to tell you, but the answer is: do a modern HTML tutorial!
You should try Code Academy they have interactive course for beginners and intermediates with direct feedback. It seems you got stuck with an old HTML 3/4 book which won't do you any good.
But I also got an direkt answer for your link problem: this fiddle where you include the images as background-images and by using your classes and selectors efficiently you have to write(mostly copy+paste) very few lines if you want to add something.
You do the most with this CSS part:
.socialmedia a {
display: block; /* Because the image is probably higher than the text */
height: 50px; /* you have to set it to block and height 50px to show the image */
padding-left: 55px; /* make room for the background image(50px) and extra margin(+5px) */
padding-top: 12px; /* center in the middle of the image */
padding-bottom: 12px;
text-decoration: none;
}
Example g+:
CSS:
.g a {
background: url(logo_g_50x50.png) no-repeat;
}
HTML
<li class="g">+1 me on g+</li>
and done!
It's easier to read and even easier to maintain for later reuse or additions
Is it possible to not display an element, as with display:none, but continue to display the :before and/or :after?
I tried
#myspan {display:none}
#myspan:after {display:inline; content:"*"}
but that didn't work. I'm trying to have CSS replace the content of a span with an asterisk, without introducing jQuery.
No, it is not possible.
Pseudo elements are rendered like children:
<span id="myspan">whatever<after></span>
And display:none hides the element including all children.
EDIT 1
JavaScript is your best option in my opinion. Even without jQuery changing text is not hard:
document.getElementById("myspan").innerHTML = "*";
Demo
EDIT 2
However, if you really want to do it with CSS, you can use negative text-indent to hide the text and relative positioning to show the asterisk:
#myspan {
text-indent: -9999px;
display: block;
}
#myspan:before {
content: '*';
position: absolute;
top: 0;
left: 9999px;
}
Demo
I think a very easy approach to doing this is to exploit the visibility property. But note that a "hidden" element still takes up the space. But if you are okay with that, just make make the parent element "hidden" and pseudo element "visible":
#myspan {visibility:hidden}
#myspan: after {visibility:visible}
Once you have the visibility taken care of, feel free to play around with the position so that excess space is avoided.
Something like,
myspan {
visibility: hidden;
position: relative;
}
myspan:after {
visibility: visible;
position: absolute;
left: 10px;
}
It's definitely possible. Use font-size: 0px instead of display: none:
#myspan {
/* display: none; */
font-size: 0px;
}
#myspan:after {
/* display: inline; */
font-size: 16px;
content: "*"
}
A demo is here.
In this case you can only use px/pt for the display text font units.
Use:
#myspan {font-size:0}
#myspan:after {font-size:16px; content:"*"}
If you have a min-font size specified, it won't work (browser setting). I'd only use this method for things like previous and next buttons so that screen readers will read "Previous", but you want to replace it with a \276e. So plan for what it will look like with the text showing up.
As explained by #bookcasey, setting display: none on an element unavoidably hides the :after or :before pseudo-element too (because they are not really something displayed after or before an element but content added inside the element, after or before its real content).
But the goal of replacing an element’s real content by generated content is in principle possible, according to the old (2003) CSS3 Generated and Replaced Content Module draft, by simply setting content on the element, e.g.
#myspan { content: "*"; }
So far, only Opera supports this. But a special case where the replacing content is an image is supported by WebKit browsers, too:
#myspan { content: url(asterisk.png); }
It is possible, but you need to use visibility:hidden instead of display:none.
See the answers in the following question for more detail:
How can I replace text with CSS?
You need to break them into multiple content DIV blocks because the style is inherited by child elements. So it's not possible once the parent display style is defined.
Why on earth does the IMG element have the CSS color property?
After playing around in Firebug for 20 minutes, I couldn't figure out how it could be used.
It will color the alt text when a picture fails to load: demo.
IMG is no different than any other inline element. For instance, in most browsers, the color attribute sets the color of the alt text while the image is loading or when it can't otherwise be rendered.
<style>
img {
color: #f00;
width: 50px;
height: 50px;
background-color: #000;
position: absolute;
}
img:after {
content: "asdf";
}
<style>
<img />
asdf is red. (on Firefox, tested with firebug on this very page.)
Anyways, I'm pretty sure the CSS standard doesn't bind particular CSS rules to particular HTML tag elements.
Every element has every property, though some properties do not “apply to”, i.e. cannot have effect on, some elements (see clause Applies to in the CSS spec.). So the question is really this: Under which circumstances could the color property affect the rendering of an img element? As described in other answers, it could affect the rendering of alternative text or generated content. (In old browsers, though, alt text may be rendered using fixed routines that are immune to CSS rules.)
Amazing...something I have gotten to work in IE and NOT Firefox! Quite the turn of events, eh?
Anyway, here's the problem. Check out the following page in both IE and Firefox:
http://www.lolstrategies.com/test/button_sample.html
I'm using this file to put together the button.
(http://www.lolstrategies.com/test/composite__V153767378_.png)
Obviously this button is centered in only IE.. what gives?!
I'm using a span for the background that is under the text and another for the tip and then floating them together with float: left as you can see by viewing the source.
So, what can I do to get this span centered in Firefox?
Thanks in advance.. please let me know if there you have any questions about this that I can help answer!
Your span.buttonLarge contains two uncleared floated block-level elements, hence no centering. In order to fix this, you could apply display: inline-block and margin: 0 auto to it.
P.S. You don't have a DOCTYPE specified, that's why your current solution works in IE - it is rendering it in Quirks mode.
Remove float: left; from .primaryLargeButtonSpan and .primaryLargeButtonEnd
after that change display: block; to display: inline; from .spriteButton span.button_label
OR change it to display: inline-block; and then, set the background property to url("./composite__V153767378_.png") no-repeat scroll left -76px transparent;
You might notice some "defect" in the ending image though...
I'm having a problem with overriding some plugin CSS. Editing that CSS directly is not really an option, as it would make updating the plugin more risky.
The problem: an element has absolute positioning, and has top:0px in the original. I want to override it by bottom:0px.
For the sake of example
.element {position:absolute; top:0;}
/* in another file */
.my .element {bottom:0;}
On firefox this works ok (bottom:0 is the applied style), but safari/chrome don't seem to be get over the top:0.
I can work around this problem, but it would be nice to come up with a clean solution.
Use top: auto to "reset" top to its initial value.
bottom is a totally separate property to top (an element can have both a top and bottom), so perhaps you won't need bottom anymore.
Also, make sure your override selector is specific enough, but it doesn't sound like that's the problem in this case.
.my .element { position: inherit !important; top: auto; }