Please Help; IE Browser Compatibility Issue

[FearlessChicken]

I’m working in Dreamweaver using css to create a vertical navagation bar. I’m using an unordered list. I’m created an id to style the ul and a seperate id for each of the buttons at the li level. I’m using the a:link, a:hover, and a:focus properties to create unique Up, Hover, and Down states from graphics for each of my four buttons.

In IE, initially it the buttons show up as expected. But, once you click on them, the Up state dissapears and won’t come back. Further, if I give the href a value (not “#”) to link up to something, when I run it the down graphic is missing for that button. The only state working correctly seem to be the hover and focus states.

I was going crazy trying to figure it out until I had the sense to try it in a different browser. So, I downloaded Firefox, and it works fine. So, I know my code is solid and it’s just an issue with IE. Is there a way to fix it in IE ?

Here’s my code:





• About
• Blog
• Portfolio
• Contact

[Senff]

You need to wrap your code in tags for us to see it properly.

[FearlessChicken]

Thanks; I’ll do that now.

[Senff]

The FOCUS state is not the same as the DOWN state — I believe you want the ACTIVE state instead of HOVER.

(Your issue also occurs in my Firefox. The button will not leave the focus state until you focus on anything else specifically).

If you did intend the focus state, make sure you have your doctype declared, that’s required to make it work in IE8. In fact, it’s recommended all the time.

[FearlessChicken]

Hi Senff, I really appreciate the help. I have actually tried incorporating the active state. But, the same issue exists in IE. Again, it works absolutely fine in Firefox. Sorry, the doctype is declared–good catch. I just accidentally truncated it. I doulble checked and that’s the only code missing in my posting.

I found a litte info online and tried it but it didn’t work either. The problem still persists.

Here’s what I found online:
Disappearing background imagesIE has a very freaky bug where it likes to make background images (and sometimes even text – particularly if there are floated elements around) disappear. This often happens when you scroll up and down on a web page and you can usually make the background re-appear by refreshing the page.

Obviously you won’t want your site visitors to have to refresh a page to see a background image in full! A freaky solution to this freaky problem is to insert the CSS command, position: relative into the CSS rule containing the background image:

.foo {
background: url(filename.jpg);
position: relative
}

Occasionally this won’t work, so another solution is to assign a width or a height to the element with the background image. You may not want to assign a height or width, so a solution is to assign a height of 1% for Internet Explorer. Because IE interprets height as min-height (see point 2 above) this CSS rule won’t affect the appearance:

.foo {
background: url(filename.jpg);
height: 1%
}
html>body .foo {
height: auto
}

The height: 1% CSS command is cancelled out by the height: auto CSS command. Internet Explorer doesn’t understand html>body, so by inserting this in front of the second CSS rule this whole CSS rule is ignored by IE.

[Senff]

You have a link to your site where we can see things in action?

I would strongly advise against using code that IE doesn’t understand — who’s to say future versions will also not understand this? If you MUST use IE-only code, use conditional tags or even a whole conditional stylesheet.

[FearlessChicken]

I don’t have a link to my site yet; just starting. Can I attach screen shots somehow on this discussion board?

[FearlessChicken]

Gotchya on the conditional tags and IE code. I can’t be the only person that’s encountered this issue; it must be a known issue. And, there must be a workaround/fix. IE seems to be the only browser with an issue.

[FearlessChicken]

Oh, also I’ve found three tutorials on youtube for sprites where they are dong the exact same thing I’m doing. they aren’t using IE when running thier code. So, it’s a sound coding approach.

[xpy]

What version of IE we are talking about? Are you sure the problem is with the background-image? Did you try with other properties like background-color?

[FearlessChicken]

It’s IE version 8. Also, I tried what you suggested about using background color instead of an image. I set the background color in the a:link to orange and removed the graphic. Then, when I click on the link and move I cursor away, the background color dissapears or goes to white. So, it doesn’t seem to be specific to the image. Here’s some more info. the background image/color only dissapear when I click the link and move my cursor away. If I click on one of the other three links the background doesn’t dissapear. Also, if I click and drag my cursor away, it doesn’t dissapear. Finally, when I give the href for that link a value other than “#” when you first run it the background color or graphic aren’t there.

My code is at the ul li level. I wonder if the graphic or link isn’t dissapearing but rather it’s being covered over by the link itself at the ul a level.

[iamshad]

Hey FearlessChicken, I am having a similar issue. I’m using sprite images for my horizontal navigation and in all other browsers (FireFox, Chrome, Safari, Opera) seams to read this well. But in IE 7 & 8 it removes the images leaving a link only. I’m not sure what I’m doing wrong. (frustrating)

[FearlessChicken]

Hi iamshad, I appreciate the feedback. Yes, it’s strange that it’s only having issues in IE. One thing I discovered is that it’s not just the images. If I change the background to a color rather than an image, the color dissapears. Perhaps you could try this and see if it’s the same for you. Thanks.

[iamshad]

You’re right. I may not have any other choice but to try it. Hopefully IE gets better with the new release (when ever that is). Thanks for the input FearlessChicken! (cheers)

[Senff]

Your color disappears because you haven’t defined a VISITED state.

I stripped your code and only kept the relevant code for the button, and I came up with this: http://jsfiddle.net/senff/HzBjd/

In Firefox, the button turns green when you click on it, but will not go back to blue (rest state) unless you put the focus somewhere else.
In IE, the button turns green when you click on it, but it will stay green unless you actually click anywhere in the window (hence, the button will be losing the focus), and then the background will be white (because this is the :visited state, which is not defined). Also, I’m not 100% sure, but I think FOCUS is not supported by IE7 in the first place.
In Chrome, the button won’t even go green when you click on it.
In Safari, same thing.

So….

If we change “FOCUS” to “ACTIVE”, we get this: http://jsfiddle.net/senff/HzBjd/2/

This works better in most browsers. In IE7 it still keeps the focus, and IE7 treats “ACTIVE” as “FOCUS”. There is nothing you can do about this unless you want to use some Javascript. The other issue is still that IE8/IE9 go back to a white background, so we’ll have to define the “VISITED” state: http://jsfiddle.net/senff/HzBjd/3/

[Author]

Posts