Rollover buttons with IE (including framesets) bug

[AJBopp]

I'm wrestling with CSS variations between Firefox and IE. I'm trying to
create rollover buttons in a menu frame. It is working perfectly in
Firefox but in IE only the first button is properly highlighted and
linked. The second button, has only a partial "hit area" at the top of
the image, although if you click the link, you can see the link border
is properly place around the image. The rest of the buttons have no
rolloever state or link at all.

As I say, all of this works perfectly in Firefox. You can see the web
page at:

http://www.wesleyumc-vinton.org/beta/index.html

And yes, I know that there are other problems with pages as you load
them. One thing at a time. Let's fix the rollovers first :)

Here is the relavant CSS code that I'm using to create the rollover
buttons;

/* This hides the text that we use for the menu links */
#menu a i { visibility: hidden; }

/* This positions the hover images vertically */
a#Home { top: 187px; left: 0; }
a#Action { top: 233px; left: 0; }
a#Learning { top: 279px; left: 0; }
a#Groups { top: 325px; left: 0; }
a#Links { top: 371px; left: 0; }

/* Define the hover images */
a#Home:hover { background-image: url(img/home_btn_glow.jpg);
background-repeat: no-repeat; }
a#Action:hover { background-image: url(img/action_btn_glow.jpg);
background-repeat: no-repeat; }
a#Learning:hover { background-image:
url(img/learning_btn_glow.jpg); background-repeat: no-repeat; }
a#Groups:hover { background-image: url(img/groups_btn_glow.jpg);
background-repeat: no-repeat; }
a#Links:hover { background-image: url(img/links_btn_glow.jpg);
background-repeat: no-repeat; }

/* This allows the hover image to hide again after you move away
from it */
a#Home:hover,
a#Action:hover,
a#Learning:hover,
a#Groups:hover,
a#Links:hover {border: none; }

As a final note, Let me say that this was all working fine in IE until,
for design reasons, I decided to go with frames on the page.

Anyway, can someone point out to me a hack to make IE behave properly?

Thanks!

AJ

[Beauregard T. Shagnasty]

AJBopp wrote:

I'm wrestling with
the Submit button? Five identical posts? <lol> Look into getting a
real newsreader...
CSS variations between Firefox and IE. I'm trying to
create rollover buttons in a menu frame. It is working perfectly in
Firefox
No, it is not.
http://k75s.home.att.net/show/wesley.jpg
This screenshot was made just after clicking on the "Action" item. Also
notice you haven't assigned a background color, so my ugly aqua is used.
but in IE only the first button is properly highlighted and
linked. The second button, has only a partial "hit area" at the top of
the image, although if you click the link, you can see the link border
is properly place around the image. The rest of the buttons have no
rolloever state or link at all.

As I say, all of this works perfectly in Firefox. You can see the web
page at:

http://www.wesleyumc-vinton.org/beta/index.html

And yes, I know that there are other problems with pages as you load
them. One thing at a time. Let's fix the rollovers first :)
Sorry, I don't do rollover buttons.
Here is the relavant CSS code that I'm using to create the rollover
buttons; <snip>

/* This hides the text that we use for the menu links */
#menu a i { visibility: hidden; }

/* This positions the hover images vertically */
a#Home { top: 187px; left: 0; }
a#Action { top: 233px; left: 0; }
a#Learning { top: 279px; left: 0; }
a#Groups { top: 325px; left: 0; }
a#Links { top: 371px; left: 0; }
Why do you need absolute positioning? If you used a list instead of
links floating in a div, you may have better luck.
/* Define the hover images */
a#Home:hover { background-image: url(img/home_btn_glow.jpg);
background-repeat: no-repeat; }
a#Action:hover { background-image: url(img/action_btn_glow.jpg);
background-repeat: no-repeat; }
a#Learning:hover { background-image:
url(img/learning_btn_glow.jpg); background-repeat: no-repeat; }
a#Groups:hover { background-image: url(img/groups_btn_glow.jpg);
background-repeat: no-repeat; }
a#Links:hover { background-image: url(img/links_btn_glow.jpg);
background-repeat: no-repeat; }

/* This allows the hover image to hide again after you move away
from it */
a#Home:hover,
a#Action:hover,
a#Learning:hover,
a#Groups:hover,
a#Links:hover {border: none; }
Way too complicated, I think.

Your code for the menu frame is malformed. You have HTML between the
<head> and the <body> sections, so browsers have to guess what you mean.

You should visit:
<http://validator.w3.org/check?verbose=1&uri=http%3A//www.wesleyumc-vinton.org/beta/index.html>
and
<http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.wesleyumc-vinton.org/beta/index.html>
As a final note, Let me say that this was all working fine in IE until,
for design reasons, I decided to go with frames on the page.
Sorry, I am a member of the "frames are evil" contingent. Google for it.
Anyway, can someone point out to me a hack to make IE behave properly?

If I were you, I would make sure it worked in a modern browser first.

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

[AJBopp]

Yeah, Google kept telling me the request timed out :(

CSS variations between Firefox and IE. I'm trying to
create rollover buttons in a menu frame. It is working perfectly in
Firefox

No, it is not.
http://k75s.home.att.net/show/wesley.jpg
This screenshot was made just after clicking on the "Action" item. Also
notice you haven't assigned a background color, so my ugly aqua is used.
Yes it is. Remember, I'm just talking about the rollover state here. I
know that there are problems with the pages displaying correctly. That
will be easily solved with deleting some things out of the style sheet.
But the problem that has my immediate focus is just getting the buttons
to work.
Why do you need absolute positioning? If you used a list instead of
links floating in a div, you may have better luck.
Well as you can tell from looking at my HTML and CSS, this is all
pretty new to me and I'm learning as I go. However, I believe that I
need absolute positioning so that the rollover image occupies exactly
the same space as the normal background image.
Way too complicated, I think.
Too complicated? How so? It's easy enough even for me to understand,
and I don't understand much at this point :) All I'm doing is defining
a hover image for each menu item, and ensuring the original image
returns once the rollover state is no longer in effect.
Your code for the menu frame is malformed. You have HTML between the
<head> and the <body> sections, so browsers have to guess what you mean.
Thanks for catching that. However, moving this code to either the
<head> or the <body> section has no effect on how the page functions in
either browser.
Sorry, I am a member of the "frames are evil" contingent. Google for it.
I'm not a big fan of frames either, but they solve certain problems
that I haven't been able to fix with CSS. And I am NOT going to a
scripting language to do things. One of the things frames gets me that
CSS doesn't (I don't think) is the ability to create a 1000 pixel long
(or wide) gradient image for the background, with no scrollbars
uglifying things (which is what I need for the menu bar down the left
side).
If I were you, I would make sure it worked in a modern browser first.

I HAVE made sure it works in a modern browser. It's the browser 90% of
the people use that I have to make it worth with now.

[Beauregard T. Shagnasty]

AJBopp wrote:

Yeah, Google kept telling me the request timed out :(

CSS variations between Firefox and IE. I'm trying to
create rollover buttons in a menu frame. It is working perfectly in
Firefox

No, it is not.
http://k75s.home.att.net/show/wesley.jpg
This screenshot was made just after clicking on the "Action" item. Also
notice you haven't assigned a background color, so my ugly aqua is used.

Yes it is. Remember, I'm just talking about the rollover state here. I
know that there are problems with the pages displaying correctly. That
will be easily solved with deleting some things out of the style sheet.
But the problem that has my immediate focus is just getting the buttons
to work.

Ok, well the buttons seem to do their job, at least in my several
browsers, though in IE the yellow parts only seem to load for the first
two of them. Can't say why.
Why do you need absolute positioning? If you used a list instead of
links floating in a div, you may have better luck.

Well as you can tell from looking at my HTML and CSS, this is all
pretty new to me and I'm learning as I go. However, I believe that I
need absolute positioning so that the rollover image occupies exactly
the same space as the normal background image.

Way too complicated, I think.

Too complicated? How so? It's easy enough even for me to understand,
and I don't understand much at this point :) All I'm doing is defining
a hover image for each menu item, and ensuring the original image
returns once the rollover state is no longer in effect.

I would try to use a list - <ul><li> - and use just one image: a button
with no words on it, as background for the <li>'s. Then I would use
plain text links, with

a:link { color: white }
a:visited { color: gray }
a:hover { color: yellow }
a:active { color: somethingelse }

to show the changes. (Must be in that order: link, visited, hover,
active - we'll bypass focus for the moment)

The Home images seem to have a different sized "M" as that one jumps
when hovering.

Your code for the menu frame is malformed. You have HTML between the
<head> and the <body> sections, so browsers have to guess what you mean.

Thanks for catching that. However, moving this code to either the
<head> or the <body> section has no effect on how the page functions in
either browser.

At this moment, I still see the "<div class="left">" section *between*
the </head> and the <body>. It should be after the <body>.

Also, maybe it would work as you expect if you fixed the CSS errors?
<http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.wesleyumc-vinton.org/beta/index.html>
Different browsers may try to correct the errors .. differently.

Sorry, I am a member of the "frames are evil" contingent. Google for it.

I'm not a big fan of frames either, but they solve certain problems
that I haven't been able to fix with CSS. And I am NOT going to a
scripting language to do things. One of the things frames gets me that
CSS doesn't (I don't think) is the ability to create a 1000 pixel long
(or wide) gradient image for the background, with no scrollbars
uglifying things (which is what I need for the menu bar down the left
side).

The nav frame has no scrollbar, so (as you saw in my screenshot) I only
see Home, Action, Learning, and the top half of the word Groups. Many
users will not realize that area is scrollable, and will never find the
Links choice.

For those with smaller monitors and browser windows, giving them two
areas necessary to scroll is a penalty. You should be able to do this
layout with a simple two-column CSS design. Where only one scroll is
necessary.

If I were you, I would make sure it worked in a modern browser first.

I HAVE made sure it works in a modern browser. It's the browser 90% of
the people use that I have to make it worth with now.

No, I said *modern* browser, not a popular one (operating system
component). IE6 is over five years old, and does not do complicated CSS
very well. <g>

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

[AJBopp]

> > I HAVE made sure it works in a modern browser. It's the browser 90% of

the people use that I have to make it worth with now.

No, I said *modern* browser, not a popular one (operating system
component). IE6 is over five years old, and does not do complicated CSS
very well. <g>

That's what I meant. The hover buttons worked OK with a modern browser
(Firefox) but not very well with IE, which 90% of the people use. Much
as I'd like to, I just can't ignore IE and hope it will go away :)

[Beauregard T. Shagnasty]

AJBopp wrote:

I HAVE made sure it works in a modern browser. It's the browser 90% of
the people use that I have to make it worth with now.

[Beauregard wrote:] No, I said *modern* browser, not a popular one (operating system
component). IE6 is over five years old, and does not do complicated CSS
very well. <g>
That's what I meant.

Well heh, then I misinterpreted your statement.
The hover buttons worked OK with a modern browser (Firefox) but not
very well with IE, which 90% of the people use.
Put a big "Get Firefox!" graphic and link on your page. <g>
Much as I'd like to, I just can't ignore IE and hope it will go away
:)

Ahh, yes. We can wish, eh?

No thoughts on my suggestion to change to a list with only one graphic?

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

[AJBopp]

> No thoughts on my suggestion to change to a list with only one graphic?

Well, yes, I'm going to look into that as soon as I get home, provided
I feel well enough (seem to have picked up a bit of a bug today). I've
run across some things like listamatic.com that should help out too.

I like very much the idea of cutting down the number of graphics the
user has to load, as well as minimizing the number of graphical buttons
I have to manage. So I will investigate this link thing and see if I
can get it to work. I'm also determined to ditch frames, so I'll be
seeing what I can do to correct that error in judgement as well.

Thanks much!

AJ