473,890 Members | 5,224 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

CSS text and image rollovers: two issues

I've got a couple of errors on my site that I'm not sure how to fix. I'm
using simple CSS for both text rollovers and my horizontal navbar, and
here's what happens. First, the site:

www.sunbadgeco.com/sunmetal/index.htm

#1 {
In IE6, rolling over an image in the navbar makes it "light" up. Clicking on
the image takes you to another page (which is not finished). Then clicking
the Back button keeps the image you just clicked on "lit" up, and that's the
problem. If you then click on the screen, the image behavior returns to
normal.

It's the same with the text rollover at the bottom. Clicking on a link
brings you correctly to the page, but clicking the Back button keeps the
underline on the link.

This does not happen in Mozilla FireFox 0.8! It appears to work fine...
}

#2 {
In Mozilla Firefox 0.8 (latest), the navbar images fail to appear
completely - except for a small transparent bar at the bottom of the image,
where I can see that the rollover does indeed work. But nearly all of it is
black.

Yet, the above problem with the links remaining in "active" state after
hitting the Back button are gone with this browser.
}

The NavBar CSS (I have a transparent 1x1px .gif the same size as the image
so that the _inactive state image appears on the site until you hover over
it):

a#artists:link, a#artists:visit ed {
background: #000 url(../images/artists_inactiv e.jpg) no-repeat;
}
a#artists:hover , a#artists:activ e {
background: #000 url(../images/artists_active. jpg) no-repeat;
}

etc. with contact and about images.
Jul 20 '05 #1
15 3107
"Applebrown " <ap********@gam ebanshee.taketh is.andthisout.c om> wrote:
I've got a couple of errors on my site that I'm not sure how to fix. I'm
using simple CSS for both text rollovers and my horizontal navbar, and
here's what happens. First, the site:

www.sunbadgeco.com/sunmetal/index.htm

#1 {
In IE6, rolling over an image in the navbar makes it "light" up. Clicking on
the image takes you to another page (which is not finished). Then clicking
the Back button keeps the image you just clicked on "lit" up, and that's the
problem. If you then click on the screen, the image behavior returns to
normal.

It's the same with the text rollover at the bottom. Clicking on a link
brings you correctly to the page, but clicking the Back button keeps the
underline on the link.

This does not happen in Mozilla FireFox 0.8! It appears to work fine...
}
This is normal behaviour in IE. If you click on a link and the go back
the link is still in the active state (hence any :active styles will
apply). At least some version of Opera behave the same way, Gecko and
other browsers do not.
#2 {
In Mozilla Firefox 0.8 (latest), the navbar images fail to appear
completely - except for a small transparent bar at the bottom of the image,
where I can see that the rollover does indeed work. But nearly all of it is
black.

Yet, the above problem with the links remaining in "active" state after
hitting the Back button are gone with this browser.
}

The NavBar CSS (I have a transparent 1x1px .gif the same size as the image
so that the _inactive state image appears on the site until you hover over
it):

a#artists:link , a#artists:visit ed {
background: #000 url(../images/artists_inactiv e.jpg) no-repeat;
}
a#artists:hove r, a#artists:activ e {
background: #000 url(../images/artists_active. jpg) no-repeat;
}


You've set the line-height for the parent element to 1px. So there
links are only 1px tall. The spacer gifs you've included spill outside
of the line box but the background image is only applied to the <a>
element itself which is constrained to the line box.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>
Jul 20 '05 #2

"Steve Pugh" <st***@pugh.net > wrote in message
news:e2******** *************** *********@4ax.c om...
"Applebrown " <ap********@gam ebanshee.taketh is.andthisout.c om> wrote:
I've got a couple of errors on my site that I'm not sure how to fix. I'm
using simple CSS for both text rollovers and my horizontal navbar, and
here's what happens. First, the site:

www.sunbadgeco.com/sunmetal/index.htm

#1 {
In IE6, rolling over an image in the navbar makes it "light" up. Clicking onthe image takes you to another page (which is not finished). Then clickingthe Back button keeps the image you just clicked on "lit" up, and that's theproblem. If you then click on the screen, the image behavior returns to
normal.

It's the same with the text rollover at the bottom. Clicking on a link
brings you correctly to the page, but clicking the Back button keeps the
underline on the link.

This does not happen in Mozilla FireFox 0.8! It appears to work fine...
}
This is normal behaviour in IE. If you click on a link and the go back
the link is still in the active state (hence any :active styles will
apply). At least some version of Opera behave the same way, Gecko and
other browsers do not.


Is there a workaround for it? I'd rather that it works as intended.
#2 {
In Mozilla Firefox 0.8 (latest), the navbar images fail to appear
completely - except for a small transparent bar at the bottom of the image,where I can see that the rollover does indeed work. But nearly all of it isblack.

Yet, the above problem with the links remaining in "active" state after
hitting the Back button are gone with this browser.
}

The NavBar CSS (I have a transparent 1x1px .gif the same size as the imageso that the _inactive state image appears on the site until you hover overit):

a#artists:link , a#artists:visit ed {
background: #000 url(../images/artists_inactiv e.jpg) no-repeat;
}
a#artists:hove r, a#artists:activ e {
background: #000 url(../images/artists_active. jpg) no-repeat;
}


You've set the line-height for the parent element to 1px. So there
links are only 1px tall. The spacer gifs you've included spill outside
of the line box but the background image is only applied to the <a>
element itself which is constrained to the line box.


Thanks, I'm sure that explains it, but how do I fix it in FireFox and why
does it work in IE?
Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>

Jul 20 '05 #3
"Applebrown " <ap********@gam ebanshee.taketh is.andthisout.c om> wrote:
"Steve Pugh" <st***@pugh.net > wrote:

This is normal behaviour in IE. If you click on a link and the go back
the link is still in the active state (hence any :active styles will
apply). At least some version of Opera behave the same way, Gecko and
other browsers do not.


Is there a workaround for it? I'd rather that it works as intended.


No. It is working as intended by the browser manufacturer. The only
way around is to not use IE or Opera as your browser. Users of those
browsers are presumably used to it working this way and don't have any
problem with it.
You've set the line-height for the parent element to 1px. So there
links are only 1px tall. The spacer gifs you've included spill outside
of the line box but the background image is only applied to the <a>
element itself which is constrained to the line box.


Thanks, I'm sure that explains it, but how do I fix it in FireFox and why
does it work in IE?


Not just Gecko, Opera also displays only part of the image (though
more than 1px, possibly due to my minimum font-size setting).

Take out the line-height: 1px; and set the height of the <a> elements
to the height of the background image. You may need to tweak a few
other things as well.

IE gets it wrong. IE does that. A lot.
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>


Did you like my signature so much you had to quote it back to
everyone?

Steve

--
"Grab reality by the balls and squeeze." - Tempus Thales

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>
Jul 20 '05 #4

"Steve Pugh" <st***@pugh.net > wrote in message
news:id******** *************** *********@4ax.c om...
"Applebrown " <ap********@gam ebanshee.taketh is.andthisout.c om> wrote:
"Steve Pugh" <st***@pugh.net > wrote:

This is normal behaviour in IE. If you click on a link and the go back
the link is still in the active state (hence any :active styles will
apply). At least some version of Opera behave the same way, Gecko and
other browsers do not.
Is there a workaround for it? I'd rather that it works as intended.


No. It is working as intended by the browser manufacturer. The only
way around is to not use IE or Opera as your browser. Users of those
browsers are presumably used to it working this way and don't have any
problem with it.


You are implying that because it was intended there cannot be a workaround.
Are you saying they intended it that way merely because it's worked that way
for a long time? There are often, I dare say usually, workarounds or hacks,
whether the manufacturer intends a behavior or not. I'm a long-time user of
IE and a) have not noticed this before (- perhaps as a user I did not think
of it, and as a designer I do), and b) I do have a problem with it on my
website, so you presume incorrectly.
You've set the line-height for the parent element to 1px. So there
links are only 1px tall. The spacer gifs you've included spill outside
of the line box but the background image is only applied to the <a>
element itself which is constrained to the line box.


Thanks, I'm sure that explains it, but how do I fix it in FireFox and why
does it work in IE?


Not just Gecko, Opera also displays only part of the image (though
more than 1px, possibly due to my minimum font-size setting).

Take out the line-height: 1px; and set the height of the <a> elements
to the height of the background image. You may need to tweak a few
other things as well.


Thanks. Line-height wasn't the culprit though. I had to add "font-size:
35px" to all the links and it worked.
Jul 20 '05 #5

"Applebrown " <ap********@gam ebanshee.taketh is.andthisout.c om> wrote in
message news:aQEvc.6556 97$oR5.158008@p d7tw3no...

"Steve Pugh" <st***@pugh.net > wrote in message
news:e2******** *************** *********@4ax.c om...
"Applebrown " <ap********@gam ebanshee.taketh is.andthisout.c om> wrote:
I've got a couple of errors on my site that I'm not sure how to fix. I'musing simple CSS for both text rollovers and my horizontal navbar, and
here's what happens. First, the site:

www.sunbadgeco.com/sunmetal/index.htm

#1 {
In IE6, rolling over an image in the navbar makes it "light" up. Clicking
on
the image takes you to another page (which is not finished). Then clickingthe Back button keeps the image you just clicked on "lit" up, and
that's
theproblem. If you then click on the screen, the image behavior returns to
normal.

It's the same with the text rollover at the bottom. Clicking on a link
brings you correctly to the page, but clicking the Back button keeps

theunderline on the link.

This does not happen in Mozilla FireFox 0.8! It appears to work fine...
}


This is normal behaviour in IE. If you click on a link and the go back
the link is still in the active state (hence any :active styles will
apply). At least some version of Opera behave the same way, Gecko and
other browsers do not.


Is there a workaround for it? I'd rather that it works as intended.


It does work as intended--by the Microsoft developers. Has the W3C expressed
any intention about whether the active link on a page should still be active
when you return to the page via the Back button? Personally, I think IE's
behavior is preferable. "Back" is "back"--you're returning to a page you
were already looking at, and it's in the state it was in when you left it.
You don't have to wonder, "Wait, what link did I click the last time I was
here?" because you can see for yourself. If you're tabbing your way through
the page (if you can't use a pointing device, for example), you can continue
where you left off, instead of having to start at the top of the page all
over again.
Jul 20 '05 #6

"Applebrown " <ap********@gam ebanshee.taketh is.andthisout.c om> wrote in
message news:BIFvc.6595 98$Ig.445890@pd 7tw2no...

"Steve Pugh" <st***@pugh.net > wrote in message
news:id******** *************** *********@4ax.c om...
"Applebrown " <ap********@gam ebanshee.taketh is.andthisout.c om> wrote:
"Steve Pugh" <st***@pugh.net > wrote:
>
> This is normal behaviour in IE. If you click on a link and the go back> the link is still in the active state (hence any :active styles will
> apply). At least some version of Opera behave the same way, Gecko and
> other browsers do not.

Is there a workaround for it? I'd rather that it works as intended.
No. It is working as intended by the browser manufacturer. The only
way around is to not use IE or Opera as your browser. Users of those
browsers are presumably used to it working this way and don't have any
problem with it.


You are implying that because it was intended there cannot be a

workaround. Are you saying they intended it that way merely because it's worked that way for a long time? There are often, I dare say usually, workarounds or hacks, whether the manufacturer intends a behavior or not. I'm a long-time user of IE and a) have not noticed this before (- perhaps as a user I did not think of it, and as a designer I do), and b) I do have a problem with it on my
website, so you presume incorrectly.


A regular IE user doesn't expect links and controls on your web site to
operate *differently* from those on any other web site. Even if they think
that the regular behavior is "wrong"--for the small percentage that even
think about it at all--they still know at least what to *expect*, so the
risk of confusion greatly outweighs the marginal bit of extra sunshine you
might bring to their lives if they actually care about this and are
overjoyed to the point of tears to see five pages out of a hundred billion
work the way that they think they should.

Jul 20 '05 #7
"Applebrown " <ap********@gam ebanshee.taketh is.andthisout.c om> wrote:
"Steve Pugh" <st***@pugh.net > wrote in message
news:id******* *************** **********@4ax. com...
"Applebrown " <ap********@gam ebanshee.taketh is.andthisout.c om> wrote:
>"Steve Pugh" <st***@pugh.net > wrote:
>>
>> This is normal behaviour in IE. If you click on a link and the go back
>> the link is still in the active state (hence any :active styles will
>> apply). At least some version of Opera behave the same way, Gecko and
>> other browsers do not.
>
>Is there a workaround for it? I'd rather that it works as intended.
No. It is working as intended by the browser manufacturer. The only
way around is to not use IE or Opera as your browser. Users of those
browsers are presumably used to it working this way and don't have any
problem with it.


You are implying that because it was intended there cannot be a workaround.


It is such a basic part of how the browser works, and completely
outside of the scope of CSS, that there will be no CSS workaround. You
may be able to do something with JavaScript (i.e. when the page loads,
put the focus on another element) but you need to be careful of making
the situation worse (i.e. substituting a real usability problem for a
trivial visual effect).
Are you saying they intended it that way merely because it's worked that way
for a long time?
No. I'm saying that it was intended to work that way. Certainly in the
case of Opera this is true. Opera works on a 'fast' back functionality
which returns users to the page in exactly the same state it was in
when they left it. I wouldn't want to guess whether Microsoft's
reasoning is the same.
There are often, I dare say usually, workarounds or hacks,
whether the manufacturer intends a behavior or not.
Set :active to be the same as :link. It is much more important to
ensure that :link and :visited are different (which you fail to do).

Or add onfocus="blur() " to the links. That way the :active style will
never be used and the dotted focus rectangle will never be seen. But
keyboard users will have a hard time using your site. Again you've
swapped a minor visual difference for a real problem. (The
non-standard hidefocus attribute is more accessible but only gets rid
of the focus rectangle, not the styles).
I'm a long-time user of
IE and a) have not noticed this before (- perhaps as a user I did not think
of it,
Exacty my point. Why do you think any of the visitors to your site
will notice it?
and as a designer I do), and b) I do have a problem with it on my
website, so you presume incorrectly.


You can use Mozilla, then you no longer need be bothered by it.
Problem solved.
>> You've set the line-height for the parent element to 1px. So there
>> links are only 1px tall. The spacer gifs you've included spill outside
>> of the line box but the background image is only applied to the <a>
>> element itself which is constrained to the line box.
>
>Thanks, I'm sure that explains it, but how do I fix it in FireFox and why
>does it work in IE?


Not just Gecko, Opera also displays only part of the image (though
more than 1px, possibly due to my minimum font-size setting).

Take out the line-height: 1px; and set the height of the <a> elements
to the height of the background image. You may need to tweak a few
other things as well.


Thanks. Line-height wasn't the culprit though.
I had to add "font-size: 35px" to all the links and it worked.


As line-height and font-size are both used in determining the height
of a line box (and in a rather complex fashion) it's not a simple case
of either/or.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>
Jul 20 '05 #8
On Thu, 03 Jun 2004 13:29:05 GMT, Applebrown
<ap********@gam ebanshee.taketh is.andthisout.c om> wrote:
as a designer I do), and b) I do have a problem with it on my
website


However, as a web author, you do need to get over this. It is not harming
the usability of the site - in fact, for many users any successful attempt
to circumvent this browser behavior will reduce usability.

Let it go. There are bigger battles to fight.
Jul 20 '05 #9

"Steve Pugh" <st***@pugh.net > wrote in message
news:h1******** *************** *********@4ax.c om...
No. It is working as intended by the browser manufacturer. The only
way around is to not use IE or Opera as your browser. Users of those
browsers are presumably used to it working this way and don't have any
problem with it.
You are implying that because it was intended there cannot be a workaround.
It is such a basic part of how the browser works, and completely
outside of the scope of CSS, that there will be no CSS workaround. You
may be able to do something with JavaScript (i.e. when the page loads,
put the focus on another element) but you need to be careful of making
the situation worse (i.e. substituting a real usability problem for a
trivial visual effect).


I completely agree. I'd hate to introduce Java with a clean page if it
doesn't need to be there.

Are you saying they intended it that way merely because it's worked that wayfor a long time?


No. I'm saying that it was intended to work that way. Certainly in the
case of Opera this is true. Opera works on a 'fast' back functionality
which returns users to the page in exactly the same state it was in
when they left it. I wouldn't want to guess whether Microsoft's
reasoning is the same.
There are often, I dare say usually, workarounds or hacks,
whether the manufacturer intends a behavior or not.


Set :active to be the same as :link. It is much more important to
ensure that :link and :visited are different (which you fail to do).


For most sites I would agree. While having a separate visited link may be
more important on a site with more than just four pages including its main
page, for a site with mainly a front page and an artists page, and
especially with binary graphical links rather than text, the functionality
would become more confusing than helpful. For instance, how would I
represent a previously visited page without introducing a new graphic and
increase the load? Would it be an "in between" light, or simply turned
off -- either of which do not make good sense? More importantly, with only
three links on the navbar, introducing a new graphic would represent more
confusion than help in my opinion. Let's not forget that _nearly_ everyone
can remember one or two pages without needing the visual "I've already been
there" cue.

and as a designer I do), and b) I do have a problem with it on my
website, so you presume incorrectly.


You can use Mozilla, then you no longer need be bothered by it.
Problem solved.


It doesn't matter what I use. It matters what customers use and what
constitutes good design. Though I suspect I'll have to live with it if I
want the graphics.
Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
6174
by: Randell D. | last post by:
Folks, I'm still learning javascript - I've invested in a couple of books and reading online as much as possible. I'm pretty sure what I am suggesting is possible though I'm trying to weigh up the faults that might go with the suggestion... all opinions welcome. My question: I have a list of links that go to pages that have a similar layout. Could I have a text swap, similar to what I've seen with image swaps (or an image switch)...
10
7038
by: idiotprogrammer | last post by:
Hi, there, I'm trying to do something, and part of the problem is that I don't know how to describe the effect. One block will have a list of links stacked over one another and separated by p tags. When the user hovers over any link inside this block, a description of a link will appear slightly to the right of the link (let's say 1 inch
1
1393
by: markus.daab | last post by:
Hi! I need help, I am creating a Virtual Tour through our highschool, and I have an image map and depending on where the cursor goes (blue hallway, gym, etc.) I need a different Picture, plus a link. How can I do that? (I can use Dreamweaver MX or fireworks or contribute) HELP, I need it ASAP!
5
5186
by: jedbob | last post by:
I used Adobe Imageready to build a simple rollover navigation bar, where the text will change color on a mouse over. The working example can be found at: http://www.akujunkan.com/test/NavBar.html However, when I try to incorporate the javascript and code into another table, the rollover stops working: http://www.akujunkan.com/test/index.html
4
3064
by: lindsey.crocker | last post by:
I have this links list with background images set on them which changes when they roll over. The <td> is set valign="middle" however as soon as you apply the rollover to the link, the text jumps to the top of the <td> instead of staying middle. I can not put padding on the top as some links are 2 lines and some are 1 line.
2
4348
by: tripathy.asish | last post by:
Hi, I'm new here and was just hoping that some of you experts could help me! I would like to create a photo page using 'rollovers' however am finding it increasingly hard to find any information. I would like it to display around 10 thumbnails all leading to one big picture so when you hover over the image with the mouse it displays the picture in big. I have searched the net, however have only found info on 'rollovers'
8
3807
by: Nathan Sokalski | last post by:
I have several System.Web.UI.WebControls.HyperLink Controls which I want to display as rollover images. I know how to make these manually using the <a> and <img> tags or the <a> tag and a System.Web.UI.WebControls.Image Control or a HyperLink and Image Controls, but the onMouseOver and onMouseOut attributes must be in the <img> tag. If I were to use the HyperLink's ImageUrl property and add the attributes using the...
7
2467
by: simchajoy2000 | last post by:
Hi, I am just a javascript beginner so maybe this is a simple problem but I am trying to do some rollovers on images in a separate <div>. Here is the relevent piece of my code: <html> <head> <script type="text/javascript"> if (document.images) {
2
3455
by: Casimir | last post by:
I am looking into making pure CSS image rollovers. Do you have any clever (and robust) CSS rollover-tricks? Or links to such "in the wild"? I have figured out two methods for this, but have yet to do proper testing on browser support. Method I:
0
9979
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9823
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
11234
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10463
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9637
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5854
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
6049
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4681
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4275
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.