I have a table which shows a value when I hover over it.
It looks like this in Chrome:
And like this in Microsoft Edge:
I didn't change anything on it, it is probably the default setting but I tried to make it look like in Chrome (slim border) on Edge too but without success.
When I inspect the element I can access the width and the height which are set as default on 1. So I can only change the dimension of the tooltip but not the border thickness.
Any suggestions?
You can't control the title or alt tooltips. Those are drawn by the browser and that is the way Edge is doing it.
You can however add your own tooltips using some JavaScript/CSS and there are plenty of libraries that do that.
Related
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
In Google Chrome(34.0.1847.131), possibly other browsers too, we're having an odd rendering issue with a web font using MyFonts.
As shown in the screenshots below there is a pixel at the top of the text which is loading the default/previous colour.
When hovered the top pixel line is white (the normal state colour), when inactive the top pixel line is the default text (non-anchor) colour.
This happens on all parts of the site where using the font and only occurs when using the webfont.
I've tried adjusting text rendering modes and line heights, neither fixed the problem.
The font-size is set to 100% (on all elements) and this inherits 16px from the body element, interestingly changing this to 18px resolves the rendering problem.
Have tried with other standard fonts, not with another webfont yet. The font files, I believe, are loaded directly not remotely.
SOLUTION
Changed the anchor from display: inline; to display: inline-block; as the anchor wasn't fitting the text correctly.
Thanks
It's hard to say without looking at an actual example, but I think you might be experiencing this problem. The font metrics allow the font to run outside its container, and a bug in Chrome prevents these parts from recieving the hover color.
Try setting a background color on the element to see if there are any pixels actually running out of the element. To fix it, you'd need to make the element really wrap the text (by giving it a top padding, for example.)
I'm having some trouble with CSS in Firefox.
Here his the fiddle: http://jsfiddle.net/6Fq4z/2/
The div with .item-container class should fill vertically it's parent (td). It does in chome and IE. But not in Firefox.
But there is a strange behavior. Step to reproduce:
Open the fiddle in firefox
Inspect element and select the div with the class .item-container
change the display property to inline-table and press enter (it does not solve the problem)
then change another time this property back to inline-block and press enter. It now shows up as it should...
Can anyone explain me why this happen and if possible, how can I solve it?
It'l be better to use Firebug. After install right click on tag you want and in css section change values. With firebug you can run custom JS in your page.
Playing a bit with the height properties I came to the point that the problem might be with the height being assigned using percentiles and considering you are using table it might be some kind of a bug with rendering in Firefox (I tested on 31 and 29 versions both).
I fixed some heights properties using pixels and forked the fiddle that might help you further
A possible workaround
http://jsfiddle.net/6Fq4z/3/
I am trying to create an element with either :before or :after and position it at the bottom of its parent, halfway out of the element, to hide the box shadow there. This seems to work, except for IE.
Demonstration: http://jsfiddle.net/XV6pT/
The white border from :before should overlay the bottom border and its box-shadow. However, in Internet Explorer, the parts of the element below the bottom boundary of the button are not displayed.
There is no filter or similar which would set something to hidden (according to How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?). The CSS is copied as-is.
The general aim (maybe someone has a better idea) is, that below the button, there is a dropdown navigation, that should look like the dropdown and the button are "one part", so there should not be any border or box shadow between the button and the dropdown.
It seems that the problem occurs in IE9 and IE10. Switching from absolute to relative positioning also didn't help.
Any hints?
Take a look at this: Creating a CSS3 box-shadow on all sides but one
It involves a bit more html, but IE and pseudo-elements can drive you nuts. That answer also includes a shadow for the menu "baseline" but without deeply looking into it, I think it can be safely removed.
Good luck!
Hi I'm having troubles with a problem in chrome. I think it might be a bug but I can't find much info on it. Basically I want to apply border radius on an image. The border-radius will be 50% forming a circle. The reason I've set it as a % is because i wont explicity know the width/hieghtt of the image.
Any ideas why chrome doesn't display the border correclty? I haven't tested in FF < 4. but FF4 works well as does IE for a change
What are you trying to do? Do you want a circle to appear behind the image? That is what I see in FF. In Chrome, the circle is clipping the edges of the image.
According to the spec -- http://www.w3.org/TR/css3-background/#corner-clipping -- content is supposed to be truncated.
The content of replaced elements is
always trimmed to the content edge
curve.
Which, to me, means that Chrome is following the spec correctly on this.
Webkit doesn't currently clip corners of images. Remove the src tag from the image and you'll see that the border is being rounded correctly.
One workaround is you could set the background-image property in css: http://jsfiddle.net/tEzwJ/
I figured out a way around it, by adding the border and the border-radius onto the parent . I then applied the border radius to the image too. Although there is a minute gap It works in chrome now. I haven't tested it in FF3.6. But FF4 displays the same result