I have a few hover buttons, using a:hover and in firefox it looks great, but for some reason, in IE 6,7,8 when you put your mouse over it, it puts up a thin gray border around the image and stays there even when you take your mouse off---until you refresh page and then the gray border disappears. Why is this? How can I get rid of it?
Hi, my car is making a strange noise when I turn left. It's a Toyota. Why is this? How can I get rid of it? Can you post some code? : ) It's useful to know that it's affecting all versions of IE, but could it be that you're putting all of them in Quirks Mode? It's not any typical problem I know of right off the top of my head, so it's likely particular to your code.
Yeah, but I assumed someone would recognize the bug itself, rather than need code... If I knew what code was causing the gray borders, I'd fix it myself. #navigation { background-image: url(images/Navigation_background.png); background-repeat: repeat-x; height: 42px; line-height:3.3em; font-size: 82%; font-weight: bold; clear: left; font-family: Arial, sans-serif; text-transform: Capitalize; padding: 0; position: relative; } ul.nav-links { margin: 0; padding: 0; height: 42px; position: relative; } ul.nav-links li { height:42px; padding:0; display: block; float: left; margin: 0; width: 90px; position: relative; background: transparent url('images/navigation_separator.png') right no-repeat; list-style: none; } #navigation .navlinks .menu-item a:hover{ background:url('images/Navigation_hover.png') right no-repeat; display:inline; float:left; height:42px; width: 90px; margin: 0; padding: 0; list-style: none; min-width:90px; text-align:center; position: relative; } Code (markup): I don't see what code could be causing it. I only use a:hover, so IE will work fine. I don't know what could cause gray borders.
Is it possible that another element from your site is causing this? IE sucks, especially the older versions of it. Fortunately 8 seems to behave more like Firefox when it comes to code. Why not try adding a "border: 0;" in your code to see if that makes a difference? @ Stomme poes - That's not a good analogy by the way.
It wasn't really an analogy, it's just what I heard. I have this thing, what's causing it? Though I understand that it could have been a real obvious, known IE bug and nobody would need the code for it, but I said as well in my post, that it wasn't anything I recognised. The CSS alone doesn't tell me very much, who or what is .menu-item?? The anchor is set to float on :hover, what is it BEFORE you hover (regular "a")? Does this problem happen on a test page with NOTHING but this menu? That can rule out any other elements, strange scripts, or whatever that could be causing it. That the :hover has a "float: left" declaration makes me think it's a rendering error based on that, but who knows? Is the page in Standards or Quirks mode? Is IE8 in regular mode or "compliance mode"? Haslayout often does behaviour like this, and IE8 no longer has Haslayout but I think it must imitate it for "compliance mode". Make a test page, with your currect doctype, and just the menu HTML and the menu's CSS, and if the problem still occurs, it should be pretty easy to figure out what it is (but for now, assuming you have a proper doctype and all that, why not remove the float: left from the hover declaration? Changing a state on hover like that can make all sorts of goofy after-affects). Trying out the border: 0 isn't a bad idea, but my gut says this isn't an actual border showing up, esp since it's sticking. Sticking in IE was usually a Haslayout issue, or something very similar to Haslayout... we ran into sticking dropdowns in IE7 when we didn't have enough "triggers" in the dropdown sections (there's a whole story behind this if you are interested). This not-quite-Haslayout thing could still be present in IE8, I don't know.
Well the CSS I have is so complex that I don't know what part is causing it, if I were pasting the CSS code it would be huge file. It happens in ALL IEs (6,7,8). I'll try the border: 0 idea. CSS menu-item is obviously... obviously... a menu item... like a li or a. The menu is a horizontal menu, with a background image that repeats, and then another background image on each "a" that puts in the separator image, and then a final hover image on a:hover. It's not difficult to understand. As far as the ambiguity of my post... Simple, if you know the IE bugs, then you'll know what might cause an image to be shown in Firefox, and disappear in IE or when a border shows up on hover in IE, versus not showing up in Firefox. The idea of the post is not for you to go through line by line each code, why would I torture you like that? The idea is that if you know this bug you might say what IE might do that might cause this.
Quote re-ordered. For the last six years or so my primary job has been making IE play nice with the other children, so I am well versed in IE foibles. Like Sp, I do not recognize an IE bug; at least not from your description. Which is it, li or a? What element(s) has/have the background image? What separator image? Are the list items float, inline, or inline-block? You see, nothing's obvious; at least not from your description. If the css is that large, and you can't figure out who's doing what to whom, maybe you've been throwing, er, stuff at the wall to see what would stick. How are we supposed to give you any help if you can't even identify the associated styles. For a complex problem, the best way to seek help is to start with a minimal test case. Short of that, post a link so we can see this in action. gary
That's the thing I'm having problems minimizing it. Once I finally minimize it for sure, I'll show you the exact code thats causing the problem. MEanwhile all I can say is: 1) #nav (a div) has a background image, repeating x, that goes through the entire page. 2) li has the background-separator image (a little 2 px line), on each end of the menu item. 3) a has the same background-separator image. 4) a:hover has a new image (big button size, 42 px wide) that is a highlighted version. In the whole website, the navigation is fine, except when you hover your mouse over it in IE, and then it takes on a permanent 'gray border' 1px wide that won't go away UNTIL refresh. If I separate the menu and css out in my attempt to minimize. It turns out, that IE puts a huge blank white box around the links (leaving only the separator and the background images on the left and right of the list. Imagine the equal sign being the background image and the separator being |. ==== | | | | |=== This is what happens in IE. In firefox: =====|==|==|==|==|== I'll show you a more minimized code in a little while.
Usually when I'm trying to minimise code to post somewhere, I often find the problem myself. And, as a bonus, sometimes I can get away with not having to add back in all the original code (if it's that bad, esp if it was written by someone else who is rather, um, verbose in their code) to have a working copy. It still smells like something to do with that change in state. I'll tell ya I've seen various stickings in IE that had to do, not with Haslayout really but it's related to that "trigger" IE has with pseudo classes. I can think of no good reason to have a state listed on a :hover. You have a:hover { float: left; } try to remove that. If the anchors are supposed to be floated, then float them in their initial state: a { float: left; } and then let the hover do nothing more than show your new background image. IE has a sticking issue with menus when someone is supposed to either change state on :hover, or change position (if they were absolutely positioned submenus for instance, and going from off-screen to on-screen, there was a guy here with a DHTML menu that would stick "on" in IE7 and Suzy did track it down to the "trigger"). Possibly maybe a shortcut to determining the cause, besides removing the float: left from the :hover, is to add a separate declaration with just a thuper-thecret whisper for IE: a:hover { position: relative; } (or, something you are not declaring anywhere else in the menu, so you could also do visibility: visible, or change the font-weight to bold or change the background colour) This would NOT be in the same place where the float: left and other :hover stuff is declared; it would be its very own declaration. Even if this fixed the problem, it's not a fix for the real problem of spaghetti; it's a test to see if you're sniffing in the right direction. *edit good lord, it's not one of those "override" template thingies, is it?? Those are the work of the devil himself I swear. And very hard to minimise because of all the references to things, repeated endlessly.
I still haven't had the time to minimize it, but yes I'll give your suggestions a go, although I don't think those are the reason. But I'll try my best to minimize the li styles. Once I establish a small minimal example, I'll attach it here.