CSS side menu -- validated and still doesn't work in IE

[Deborah]

Thanks to all who've replied. I understand about the small font, and
will work on that next, after I solve this problem.

www.simi-therapy.com/badstylesheet is the page
http://www.simi-therapy.com/badstyle...screen-alt.css

I've cleaned up my HTML completely, and both it and the CSS page now
completely validate at w3.org . This page works great in Mozilla and
Opera, but not IE. (The pages below the index page come up unstyled,
because I didn't change their stylesheet addresses)

If you double-click on one of the sidebar links, the first word of the
body text next to it highlights. I'm not very spatial, and I'm
definitely a CSS rookie, but I'm thinking that there must be a
"container" problem and I just can't see what it is.

Again, all help is very much appreciated.

Deborah

[Deborah]

Someone elsewhere gave me this suggestion, and it has made the links
work, but now the appearance on hover is inconsistent.

added a line to this area

#side-bar {
width: 14em;
margin: 2.5em 0 0 1.25mm;
float: left;
clear: left;
position: relative; <!--added on suggestion; now links work but
hover inconsistent -->
}

Now I need to figure out why the hover varies, and I've lost the very
top of the side-bar that should say Answers to Questions. Still, it is
progress.

Deborah wrote:

Thanks to all who've replied. I understand about the small font, and
will work on that next, after I solve this problem.

www.simi-therapy.com/badstylesheet is the page
http://www.simi-therapy.com/badstyle...screen-alt.css

I've cleaned up my HTML completely, and both it and the CSS page now
completely validate at w3.org . This page works great in Mozilla and
Opera, but not IE. (The pages below the index page come up unstyled,
because I didn't change their stylesheet addresses)

If you double-click on one of the sidebar links, the first word of the
body text next to it highlights. I'm not very spatial, and I'm
definitely a CSS rookie, but I'm thinking that there must be a
"container" problem and I just can't see what it is.

Again, all help is very much appreciated.

Deborah

[Beauregard T. Shagnasty]

Deborah wrote:

Someone elsewhere gave me this suggestion, and it has made the links
work, but now the appearance on hover is inconsistent. position: relative; <!--added on suggestion; now links work but
hover inconsistent -->

I see that you have added exactly that to your style sheet. It will
break it as those are HTML comment markers, not /* CSS */ comment
markers. An error in the CSS and browsers are free to ignore parts or
all of the style sheet.

--
-bts
-Warning: I brake for lawn deer

[Deborah]

Aargh! OK, that's fixed now. Still very interesting effect in IE. Back
to the puzzle.

Beauregard T. Shagnasty wrote:

Deborah wrote:

Someone elsewhere gave me this suggestion, and it has made the links
work, but now the appearance on hover is inconsistent.

position: relative; <!--added on suggestion; now links work but
hover inconsistent -->

I see that you have added exactly that to your style sheet. It will
break it as those are HTML comment markers, not /* CSS */ comment
markers. An error in the CSS and browsers are free to ignore parts or
all of the style sheet.

[kchayka]

Deborah wrote:

Thanks to all who've replied. I understand about the small font, and
will work on that next,
Please do. Even at IE's Largest text size, it's just barely tolerable
for my reading pleasure.
www.simi-therapy.com/badstylesheet is the page
http://www.simi-therapy.com/badstyle...screen-alt.css

Presuming your problem is still with odd IE :hover effects on the menu...

You have apparently already found the answer, you just haven't applied
it everywhere it needs to be, yet. ;)

IE has a convoluted box model. If you spend some time at
<URL:http://www.positioniseverything.net/explorer.html>
you may learn something about its oddities. Note that there are 2 common
methods of avoiding many IE peculiarities:
position:relative; and
zoom:1.0;

Apply position:relative to elements that are behaving strangely, or
their containers. If that doesn't do the trick, try zoom:1.0. One of
those is very likely to fix it. In your case, adding position:relative
to rule
#side-bar a
seems to do it.

BTW, are you aware that
..doNotDisplay {
display: none;
}
makes the element invisible to the most-used screen readers? Thus it is
creating the very problem you thought you were avoiding. You no doubt
got this display:none trick from an old tutorial. It doesn't work.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.