I have tooptips show up when hovering over a link. These tooltips show filtering options for column headers. A tooltip contains text, a drop down list or a text box. In Firefox and Chrome the CSS works fine, however in IE7+ there are problems.
The tooltip appears over top all other objects on the page (as it's supposed to) except the original anchor link and image that you hover over. These get rendered over top the tooltip and it's contents.
The tooltip, when containing a dropdown list, disappears when the mouse cursor opens the drop down list and moves onto the DDL's listing box. I'm assuming that when the cursor moves over the list, it no longer is hovering over the tooltip, and it closes. IE has problems with telling the tooltip that when hovering over the DDL's list, that its actually hovering over the tooltip itself.
My CSS is very straight forward:
ul li a:hover { background: #88f; border-style: none; }
.tooltip{
z-index:25;
border: none;
color: inherit;
}
.tooltip:hover { z-index:25; position:relative;}
.tooltip span.tooltip_actual { display: none; }
.tooltip:hover span.tooltip_actual {
display:block;
position:absolute;
top:-1em; left: -42em; width: 40em;
border:1px solid #000;
background-color: #fff; color:#000;
text-align: left; padding: 1em;
}
Has anyone run into this issue before and is there a work around?
EDIT: this is the tooltip bug:
EDIT #2: Here is an example of my code: http://jsfiddle.net/NAXrc/
IE7 has known bugs with z-index.
If you can provide a test case, I can probably give you a better answer.
Otherwise, all I can do is point you to these resources:
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
IE 6 & IE 7 Z-Index Problem
IE7 Z-Index Layering Issues
http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/
however in IE7+ there are problems.
These problems should not exist in IE8/9. Is your page not using IE8/9 Standards Mode?
If your page is using Compatibility Mode (which emulates IE7) or Quirks Mode, that would explain why versions newer than 7 are also exhibiting the problem.
Related
I'm trying to implement radio buttons and I style them so the buttons themselves wont show up.
This works great with any other browser that I tried except internet explorer.
.img > input[type=radio]{
display:none;
}
input[type=radio] + img{
cursor:pointer;
border:2px solid transparent;
}
input[type=radio]:checked + img{
border:2px solid #f00;
}
The above code works with internet explorer only if I stop hide the radio buttons with the display:none code. Then the styles below are getting applied and the rest of my jquery code works as well. However if the display:none is "active" and the radio buttons are not showing then internet explorer wont apply the other styles below and my jquery code wont execute either.
Any ideas on how to resolve this? Thanks in advance.
In IE, a radio button with display:none will not get checked. What you need to do is position the radio button element off the screen by specifying something like:
left: -9999px
position: absolute (or relative depending on your layout)
instead of:
display:none
I've found if I replace
display: none;
with the following (code below) the text fields still allow for selection without radio buttons displaying.
border:none;
width:0%;
height:0%;
font-size:0%;
I want to use to simulate a cursor by adding the following class to it.
.cursor {
border-left: 1px solid red;
margin-right: -1px;
display: inline;
position: relative;
z-index: 1;
}
It works perfectly fine in Firefox. However, nothing is shown in Safari. I've been trying many different values. It seems like border-left is not understood by Safari although w3c claims that it's supported by all major browsers.
Can someone please help me fix this problem?
Thanks,
It seems to work fine for me, using your exact code. I've created a jsFiddle here, which displays a red "caret" in Safari.
Is there a particular Safari version you're having problems with? Does the jsFiddle shown work for you? It uses only the code you've provided.
On further investigation, it seems that the span must have content in order to show the border. I'm not sure exactly why -- perhaps Safari is "optimising out" the empty span, or giving it zero height, or something like that.
This appears to be a WebKit issue, as the same behaviour occurs in Chrome. As a workaround, if you set a height on the span, it seems to work. If I change your CSS to:
.cursor {
border-left: solid 1px red;
margin-right: -1px;
display: block;
position: relative;
z-index: 1;
height: 1em;
}
...that is, adding a height to the span, then your border displays whether or not it has content. Therefore I guess what's going on is that without content, WebKit is giving no height to your span, and therefore no border. Which is perfectly sensible behaviour, really.
Here is your original jsfiddle, with a height added, that works in Safari and Chrome.
border-left style works on safari v1.0+
See my code snipped that I've just tested on Safari 5.0.2 and it worked:
http://jsfiddle.net/DqhfJ/1/
in fact all css tags that you provided - work in Safari 1.0+ , except display tag (it works in Safari 1.3.2+)
Working on a new site design in asp.net with master pages. Header of the page is a 35px tall "menu bar" which contains an asp menu control rendered as an unordered list.
The selected menu item is styled with a differenct colored background and 2px border around the left top and right sides. The bottom of the selected menu item should line up with the bottom of the menu bar so the selected "tab" looks as if it flows into the content beneath. Looks fine in firefox and IE but in chrome the "tab" seems to be 1 pixel higher than the bottom of the menu bar.
Just wondering if there is some sort of bug I dont know about.
I realize that you will most likely need code to help with this problem so ill post up the css as soon as possible.
EDIT:
here is the css for the menu...
div.hideSkiplink
{
width:40%;
float:right;
height:35px;
}
div.menu
{
padding: 0px 0px 0px 0px;
display:inline;
}
div.menu ul
{
list-style: none;
}
div.menu ul li
{
margin:0px 4px 0px 0px;
}
div.menu ul li a, div.menu ul li a:visited
{
color: #ffffff;
display: block;
margin-top:0px;
line-height: 17px;
padding: 1px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
color: #ffffff;
text-decoration: none;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: none;
border-left: 1px solid #fff;
}
div.menu ul li a:active
{
background:#ffffff !important;
border-top:2px solid #a10000;
border-right:2px solid #a10000;
border-bottom: none;
border-left:2px solid #a10000;
color: #000000 !important;
font-weight:bold;
}
div.menu ul a.selected
{
color: #000000 !important;
font-weight:bold;
}
div.menu ul li.selected
{
background:#ffffff !important;
border-top:2px solid #a10000;
border-right:2px solid #a10000;
border-bottom: none;
border-left:2px solid #a10000;
}
div.menu ul li.selected a:hover
{
border: none;
}
The selected classes are added to the li and a elements via jquery...
Here is a screenshot of the problem...
The chrome example is on the top and u can see 1px of red border below the tab.
On the bottom is the firefox image where everything looks OK.
EDIT:
After playing around with this a bit more, I have discovered that it is actually the "header" div itself that is growing by 1px in chrome... This seems very strange to me.
None of these answers solve the problem.
Set:
line-height: 1;
padding-top: 2px;
Because webkit & mozilla rendering engines implement line height differently do not use this it to manipulate measurement for single line items.
For items like menus, buttons and especially really small notification bubbles, reset the line-height to normal and use padding or margins to make them behave the same.
Here's a JSFiddle illustrating this issue:
http://jsfiddle.net/mahalie/BSMZe/6/
I just had this same problem, and I solved it by explicitly setting the line height and font size in <li> element that contains the <a> elements that are the tab links. Hope this helps someone in the future.
(edited html links)
This is a common issue I run into on some of my sites... when it's IE having the pixel difference, I can usually just add a pixel of margin/padding in my IE stylesheet. But when it's Safari/FireFox/Chrome, I usually just live with the pixel and make the FireFox crowd happy (for now—until Webkit rules the web!), even though it looks a little strange in the opposite browser.
However, you might also want to check out the line-height values (or add a value, if there isn't one already) on the containing ul or div element. Tinkering with that allowed me to get the padding exactly the same in FireFox, Chrome and IE.
Here is the solution that I found in this page :
button::-moz-focus-inner {
border: 0;
padding: 0;
}
I have been fighting with this problem for a little while now, and almost gave up on the pixel. However it's come to me in one of those eurika moments: if you get the tab lined up perfectly in Chrome (which leaves an overlap in Firefox), set the ul height to the height of the li (including any padding), you can remove the offending pixels in Firefox by setting overflow to hidden on the ul.
Hope this helps someone out there!
I had the same problem with my main tabs displaying them in Chrome, they were one pixel off in height and there for leaving an ugly slit between the tabs and the white background of the mainframe.
I solved the problem by giving the tab div an upper margin with a floated value. First tried margin-top:0.1px nothing then 0.2 etc. until with an upper margin of 0.5 everything displayed fine over all the major browsers.
I had the exact same issue, turns out chrome had zoom set to 110% and that was breaking the menu. I noticed it when I fired up chrome on another computer and it looked fine.
I had a similar issue and it was due to using ems for font sizes, margins and padding. The browsers were rounding the ems differently and causing intermittent off-by-1px issues all over the site depending on the length of content. Once I changed everything to pixel measurements my problems went away.
Hope this helps!
I've come across this problem in relation to text with transparent backgrounds.
I couldn't get any of the above solutions to work consistently so I ended up using a webkit hack to give those browsers a different line-height. Like so:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.your-class {
line-height:20px;
}
}
Eww, hacky! I try to avoid CSS hacks but I just couldn't find another way. I hope that helps someone.
I managed to solve this issue with a web font I was working with by setting the following:
.some-class {
display: inline-table;
vertical-align: middle;
}
Granted it's a bit hacky but does the job. It does mean though you will have target styles specifically for Internet Explorer
try using display:block with the a element"
eg...
<li>Link</li>
css:
li{line-height:20px;}/*example only*/
li a{display:block;}
I guess this is the only way , use different styles for different browsers the problematic sections
/* FOR MOZILLA */
#-moz-document url-prefix() {
.selector {
color:lime;
}
}
/* FOR CHROME */
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome, if Chrome rule needed */
.container {
margin-top:100px;
}
/* Safari 5+ ONLY */
::i-block-chrome, .container {
margin-top:0px;
}``
if line-height is used for vertically aligning text in a container (which it shouldn't), then consistent behaviour across browsers can be enforced like this:
line-height: 75px
height: 75px
overflow: hidden
you can also make different css for mozila:
-moz-height:2em;
one can also use:
#-moz-document url-prefix{
// your css
}
It's important to realize that web pages will always render differently in different browsers. Acheiving pixel perfection is futile, and nowadays I try to explain to my clients what kind of cost is involved to make every browser render the site exactly alike. More often now, they understand that IE6 and FF4 won't ever render any page the same way. We must try to make our clients understand and embrace the dynamics of the web.
Progressive enhancement and graceful degradation. Peace.
I might be a beginner in CSS, but I found the same problem in W3Cschools.com, in one of their examples.
http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav
this example is about image sprites. You can see in this example, in Chrome, the home icon and prev icon have the 1px divider line, which is not the case in Firefox.
It seems that in Chrome the pixel count is 1pixel different to that of Firefox.
when I hover the mouse over it, the cursor doesn't change into hand until you actually over over the text. (For example, if you pay attention to SO navigation, your cursor changes into hand as soon as you touch the gray area. I am talking about Questions, Tags, Users, Badges, Unanswered navigation)
when I click on it, it borders the link-text.. like it's dotted border or something by default. How do I get rid of that?
There are two ways of getting the hand cursor on the entire area; either you make the link take up the entire area (perhaps by being the entire area), or you add the style cursor:pointer; to the area. (Making the link cover the whole area is usually the better option, as that also make the entire area clickable.)
To get rid of the dotted border on links when they‘re clicked:
a:active {
outline: none;
}
For SO navigation, it is done in following way:
<li class="nav">
Questions
</li>
.nav a {
padding: 6px 12px;
}
The gray area you see is actually the link itself (achieve by setting the padding). To get rid of the border, you should specify by a:link:
.nav a:active { outline: none; }
For (1), use the <a> around your whole <div>, not just the text, and that will make the cursor change to the hand cursor when entering the div. Another way is to change the <a> to have a style similar to
a { display: block; width: 300px; height: 100px; background: orange }
the background is just for trying it here. It can be removed.
For (2), use
a { outline: none }
Try using the following in your CSS.
a:focus {outline: none;}
However, I believe older versions of IE will not honor this code.
I have been pulling my hair out trying to get Chrome to style my search input with a background image. Firefox has no problem, but I fear it's because it treats the input as a regular text input. Is this simply not possible?
Try this as a demo:
<input type="search" />
input[type="search"] {
background: transparent
url(http://google.com/intl/en_ALL/images/srpr/logo1w.png) no-repeat 0 0;
}
If it worked correctly, it should put Google's logo (or part of it) as the background image for the "Search" input. But as you will see when you look at this in Chrome, it DOES NOT WORK. Any ideas, or is this just one of HTML5's quirks? :\
You can get Chrome (and Safari) to play along better with your styles on an HTML5 search field (including background images) if you apply this in your CSS:
-webkit-appearance: none;
You may also want to change -webkit-box-sizing to...
-webkit-box-sizing: content-box;
...since it appears that Webkit defaults this to the border-box value (basically the old IE5 box model).
Be warned, there's still no (apparent) way to have any effect on the position/appearance of the field-clearing button, and since only Webkit generates that button, you may find some new cross-browser annoyances to deal with.
Complete solution to remove all extra design caused by browser. This will change the search field to normal input field
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
input[type="search"]{
-webkit-appearance: none;
-webkit-box-sizing: content-box;
outline:none;
}
Like you said, Mozilla treats search inputs as text. For Webkit browsers however (Chrome, Safari), the search input is styled as a client created HTML wrapper for the internal Webcore Cocoa NSSearchField. This is what gives it the round edges and the 'x' button to clear itself when there is text within it. Unfortunately it seems that not only are these extra features inaccessible by CSS/JS for the time being, but it also seems that there's no W3 specification for what CSS properties can be applied to this element as well as other new HTML5 elements. Until there is such a specification I wouldn't expect to have consistent behavior.
The cancel button can be styled with the following
input[type="search"]::-webkit-search-cancel-button {
/* Remove default */
-webkit-appearance: none;
/* Now your own custom styles */
height: 10px;
width: 10px;
background: red;
/* Will place small red box on the right of input (positioning carries over) */
}
Styling can be removed using
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
http://css-tricks.com/7261-webkit-html5-search-inputs/