<a> position set, but initially positions up too high in IE6 until refresh

[ifubad]

http://www.waiming.com/pages/product.php?title=old_fisherman

 

The problem only seems to be in IE6. Where the icon size question mark images should be below the large image, next to certain words, but if you click on the Next >> button, you will see SOME pages displaying those images high up near the top of the large image, but if you move the mouse over each image or refresh and cache the page, then they automatically move to the correct location.

 

Any ideas, so that I may try to zoom in on the problem, if it's fixable. Thnx

 

Here's the code on the a:hover pop up section

 

a.tip {
    position: relative;
    }

a.tip img {
    border: none;
}

a.tip span {
    display: none;
    }

a.tip:hover span {
    display: block;
    position: absolute;
    top: 30px;
    left: 20px;
    border: 1px solid black;
    text-decoration: none;
    background-color: #FFF3D9;
    color: black;
    white-space: nowrap;
    padding: 0 .25em;
    -moz-border-radius: 5px;
    }

a.tip:hover {
    border: none;
    z-index: 999;
    }


<a class="tip" href="#"><img src="../images/icn_quickhelp.gif"><span>Printed on museum quality paper.</span></a>

 

 

 

[dbrimlow]

I'm not clear what the issue is ... can you post a "screen shot" of the problem in IE5?

 

However, before even attempting to debug css IE evils, it is absolutely crucial that your page validate.

 

In your case, first let me say that your markup is extremely clean and very well formed. And BIG kudos for using an html 4.1 strict doctype!

 

You have two issues keeping you from validating ...

 

First, your form input elements are not contained by a proper block level tag - form elements belong within proper semantic tags - paragraphs, lists, etc..

 

Second, those missing "alt" tags on images can kill you every time.

 

I NEVER attempt debugging a specific browser/IE issue until the page validates. There are enough issues IE can cause without dealing with it using its own defaults or kicking into quirks.

 

Absolute positioning in IE will ALWAYS require a separate "IE-Only.css" called via a conditional comment (or a hack in your main css to change the positioning).

 

The non-anchored :hover element doesn't work in ie6, so beware your naming conventions to make sure they use correct anchor syntax.

 

[DarkWater]

You can see your validation errors here:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.waiming.com%2Fpages%2Fproduct.php%3Ftitle%3Dold_fisherman

[ifubad]

Second, those missing "alt" tags on images can kill you every time.

 

FIXED: First, didn't want to use alt because IE 6 pops up the tooltip, which interferes with my own pop up. But, just to validate that part, I threw the alt back in.

 

First, your form input elements are not contained by a proper block level tag - form elements belong within proper semantic tags - paragraphs, lists, etc..

 

That's the problem I've been having. I even let w3c cleanup up html, so it is now exactly what w3c and you suggested, in <li> tags (the form for the View Cart for now http://www.waiming.com/), but still won't validate?? Not sure what I'm missing

 

The non-anchored :hover element doesn't work in ie6, so beware your naming conventions to make sure they use correct anchor syntax.

 

Which non-anchored element are you referring to? The <span>?

[ifubad]

Ok, I figured out the form problem. I'll post again after everything validates.

 

thnx

[ifubad]

Ok, no more validation erros.

 

The positioning works in IE6, the a:hover works with the pop up span. Just with random pages, that the problem occurs. Here are the captures, left is where they should be, right is where they randomly get positioned, if mouse over or refresh, then they will move to the correct location.

 

 

[bronzemonkey]

To get rid of your horizontal scrollbar:

 

#mainNav1 {overflow:hidden;}

 

The problems with you tooltips might be down to some IE6 issues with changing the display from none to block on hover.

An alternative is to not change the display value of the element but to position it far offscreen (-9000px/em) and then pull it back when hovered over.

 

------------------------------

 

Just to discuss the alt attribute on images. alt attributes should be a text alternative that conveys the meaning of a non-decorative image. If the image is decorative then you leave the alt attribute empty (alt="").

 

The alt attribute is not there to provide a "description" of the image (e.g. "dog picture" or "man holding a glass") and nor should it repeat text that is already present.

 

You might decide that your images of the paintings are decorative, to show the painting to a potential customer, and thus the alt attribute should remain empty because the technical information is listed below. But you might think that the image of the painting is conveying information that is important to a customer, and therefore, you would want the alt attribute to contain a textual alternative to the visual content that conveys some of the info/meaning of the paintings to anyone who cannot see the image (for whatever reason). For example, the alt text of the image would not be "old fisherman" when the title is already "old fisherman"...it could be a paragraph:

 

This painting of an old fisherman, looking towards the viewer while he works his baskets, is characterised by the warm smile he wears and the exquisite detail that the artist has put into the contours of his face.

 

If the alt text is good, and appropriate, then if you read the html document as pure text you should barely be able to tell which is "alt text" for non-decorative images. It should read as part of the document...no different to any other content that you'd write.

 

[ifubad]

I know about the overflow:hidden, it's just that the Policy page where the height of the main container is not that tall, and some of the pop up images will extend pass the bottom. I should do something with that page, so that I can use the overflow:hidden to get rid of the H scrollbar.

 

Thanks for explaining the alt, much appreciated, all fixed. That's why forum rules. Learn more here and from web search than someone going to college, alway had.

 

I'll test the positioning method right now.

[bronzemonkey]

I know about the overflow:hidden, it's just that the Policy page where the height of the main container is not that tall, and some of the pop up images will extend pass the bottom.

 

I was talking about the page that you linked to. The horizontal scrollbar is due to the way you've centred the menu. If you just add the style that I posted above then it will stop the menu (only) creating a horizontal scroll.

[ifubad]

that's what I was referring to, the centering of the floated menu is causing the h scroll, which is on every page. I just need to change some minute things within the policy page, so that I can apply overflow:hidden for all pages.

[ifubad]

The problems with you tooltips might be down to some IE6 issues with changing the display from none to block on hover.

An alternative is to not change the display value of the element but to position it far offscreen (-9000px/em) and then pull it back when hovered over.

 

Just tried changing positions instead, same problem. I noticed another issue with IE6 (not 7), it now highlight the <<Previous Next>> text and stay highlighted, starting from about the middle to the right, if you just move the mouse over those text. One way to de-highlight is to mouse over the menu tabs. I recall a prior change was a color value for one of the pseudo class

 

Before, I had the the pseudo class set as follows

 

a:visited {color: #9D0000;}

a:hover, a:active {color: #C40000;}

 

now that the problem seemed to be fixed, they are set to, and clicked next from 1 to 57, no icon or text highlighting problems.

 

a:visited {color: #9D0000;}

a:hover, a:active {color: #9D0000;}

 

 

Thnx for the suggestion though, it was worth giving it a try. IE really is freakin pisser.

[ifubad]

heck, it's doing it again. I give up, moving on... Thnx to all.