How can I add a simple hover to a div that will be compatible with FF, IE7+ and chrome?
All I need is a simple text hover, and I am pretty sure that you can set it as a property of an HTML element but I cant seem to find it anywhere.
You're probably looking for the title attribute. This generally renders like a tooltip.
Related
This is in IE 11 with css properties
After disabling display property, the result looks like below
In first screenshot, icon is there but not it's not visible.
I don't want to remove display:table-cell property. I need this for responsiveness. Can somebody please provide me a better solution.
Don't change FA icons core css, they are best suited to be used as text, so all text manipulation properties will work just fine, everything else should be left as is. If you need to change some display, wrap icon with another element and apply css for it.
So I've got a page on a site that displays exactly like it should in both IE and Chrome, but not Firefox. The link is http://www.jakerevans.com/?page_id=61. In both IE and Chrome, the spinning animation (written with D3.js) displays fully through the padding-left and padding-top, but not in Firefox. Anyone have any idea how I can make this padding in Firefox transparent? Any other possible solutions? I'd really like to resolve this through CSS if possible, and not go back to the drawing board with the D3 code. Obviously I will if I have to though.
Thanks a lot for the help!!!
You need to explicitly set overflow: visible on your <svg> element.
The SVG specifications state that all SVG elements that create viewports should have overflow: hidden in the browser's default stylesheet. However, browsers disagree over whether this should include the padding area or not: if you follow the description in the SVG specs, as Firefox does, padding would not be included. However, general CSS/HTML layout does not consider content in the padding to be overflow, so Webkit/Blink/IE browsers do not clip it with overflow:hidden.
it doesn't seem to be the issue of the padding, it's like to be the firefox transform origin thing, see this Setting transform-origin on SVG group not working in FireFox
I've got a stylized input I'm working on in html/css that achieves the look I'm going for in Firefox, but the elements (input and span) seem to be rendering differently in Chrome. I have yet to test on IE.
The code is available at http://jsfiddle.net/WEZvu/. Any input would be appreciated!
Is this acceptable? http://jsfiddle.net/WEZvu/1/
Since your border and background-color is applied in the whole "element", putting them on the container seems a better idea.
I'm using Linux right now and no IE to test, but I think the look should be OK...
I'm working on a project in which I am using an image as a background for a menu. I have defined classes in my CSS stylesheet that dictate the appearance when items are or are not "selected", meaning the user is not on the page each item is linked to.
I have it structured with a div on top of the image with styles applied to it to make it have a semi-transparent white background, so it looks like that part of the image is highlighted. Each semi-transparent div also contains the text that makes up the link, with a color set to white. I would like the div to keep the opacity, while the text remains at an opacity of "1".
I have tried the method discussed in a similar question (CSS - Apply Opacity to Element but NOT To Text Within The Element) but the method does not seem to work for me.
I've posted the bit of code for the link on JSFiddle at http://jsfiddle.net/Cwca22/uG5y8/ if you'd like to take a look at it.
Thanks in advance for all the help.
If you're looking for a pure CSS solution, and are willing to change your markup a little, take a look at this example:
http://jsfiddle.net/jJ4MZ/3/
It treats each "link" as a combination of separate background and text elements, and then positions them over each other, so that only the background div uses transparency.
If I'm understanding you correctly, you want the background colour of the div to be partially transparent to show the image through, but keep the text opaque? That's simple :3
<div style="background-color: rgba(255,255,255,0.5);">Text</div>
If you want to provide support for browsers that don't allow this format, then you need:
<div style="background: #ffffff; background: rgba(255,255,255,0.5);">Text</div>
Old problem without any standard solutions yet! This is something known to be impossible with today's CSS. The only solution i know of is using JS. Using JS you can catch the mousemove of the affected H# and create/position an element. This new 'over' element should not be a child of the DIV with opacity 0.2.
Once i wrote a jsFiddle for a problem like this. Here it is http://jsfiddle.net/A53Py/5/
Create a same-level element which positions absolutely behind the elements without opacity. No need to tell it's cross browser.
Hope it helps
I have a simple horizontal menu which has <li> elements of different widths, when a user hovers over I would like to use the attached image to designate the hover, however I cannot work out the best way to do this.
the Image...
Can anyone post any code and suggest what I might need to do here.
Thanks
You would simply use the a:hover selector in your css, and add a background image. However, be aware, that stretching this image only works in modern browsers (IE9, Chrome, FF) that support CSS3.
This is how you make a menu;
http://jsfiddle.net/sg3s/49T6w/1/
When you style a menu it is important to make the anchors (a tags) display:block. That makes sure you have full power over their look and dimensions. Als if you use the anchors to make the menu it is backward compatible with older browsers that don't support :hover on block level elements (but do on anchors even if you make them a block since they're originally inline).
The background image is easy, just add it in the :hover class of the anchor. Gl