Printer Friendly Version
Email this thread to a friend
|
Featured Web Site Template |
|
Reflects user activity within the last 5 minutes
|
|
| Member |
Message |
butbut
Joined: Jan 10, 2005
# Posts: 19
|
Posted: 2005-Apr-07 15:38
Hello there...
i've made a css tab menu based on <ul>
I use the :link : visited : hover to change images.
when the tab is clicked a class is added to the <a href> called class="aktief"
this class needs to give the tab an active state (same as over state)
But...
the problem comes with IE (offcourse) my :visited (which must be a normal img state) overrules the class given to the active tab.
In Firefox this works fine.
What to do ??
Thanx in advance
Koen
Here my code for one tab:
---HTML----
<div id="tabs">
<ul>
<li><span id="tab01"><a href="#" class="aktief">
<!-- --></a></span></li>
<li><span id="tab02"><a href="#"><!-- --></a></span></li>
<li><span id="tab03"><a href="#"><!-- --></a></span></li>
<li><span id="tab04"><a href="#"><!-- --></a></span></li>
</ul>
</div>
----CSS----
#tabs a
{
width: 190px;
min-height: 30px;
height: 30px;
float: left;
display: block;
}
#tabs #tab01 a:link
{
background-image: url(../images/tab_Inwoners_But.gif);
background-repeat: no-repeat;
}
#tabs #tab01 a:visited
{
background-image: url(../images/tab_Inwoners_But.gif);
background-repeat: no-repeat;
}
#tabs #tab01 a:hover
{
background-image: url(../images/tab_Inwoners_Ro.gif);
background-repeat: no-repeat;
}
#tabs #tab01 a.aktief
{
background-image: url(../images/tab_Inwoners_Ro.gif);
background-repeat: no-repeat;
}
|
 |
lizardz
Joined: Nov 12, 2004
# Posts: 1394
|
Posted: 2005-Apr-07 21:19
Make a.aktief into a#actief, an id will tend to override better than a class.
Since only one item will be active. By the way, using image swapping with css tends to work extremely badly over dialup, the images aren't preloaded. You should take a look at that over dialup before going that route.
|
|
butbut
Joined: Jan 10, 2005
# Posts: 19
|
Posted: 2005-Apr-08 07:46
Thanx for that...
about the preloading: i was already trying to do this with javasript, but can this be done if i keep using the css for image swapping?
|
|
lizardz
Joined: Nov 12, 2004
# Posts: 1394
|
Posted: 2005-Apr-08 19:47
No, I experimented extensively with that, and you can't preload background images, neither with css or javascript as far as I know, at least I never got it to work, to preload images you need javascript to have access to the image array for the page, that's the array of images used by the img tag. background images are not part of that array.
There's no workaround for that I'm aware of, I gave up on that technique, now I make shaped tabs/nav items with transparent centers, and just change the background color on them to get a mouseover affect while still having a uniquely shaped nav item.
All css techniques I saw rely on the simple fact that most developers use broadband, so nobody notices how awful the performance is. Once the machines get older and slower, with IE it's not just slow loading, the rendering of the page actually fails on mouseover, that's using only css. This technique should not be used commercially for any reason in my opinion.
|
|
You are not permitted to post messages in this forum or topic, because of one or more of the following reasons:
- You have not yet logged in, or registered properly as a member
- You are a member, but no longer have posting rights.
- This is a private forum, for which you do not have permissions.
If you are a recent member, it's possible that you simply have not yet confirmed your account. Please
check your email for a message entitled 'JimWorld Forums: Confirm Your Account' and follow the instructions
contained within.
If you cannot find this message, click here to Re-Send it.
|
If you are still experiencing problem, please read the
Login Assistance
Article for some advice on what may be causing your login not to work properly.
|
Switch to Advanced Editor and ...
Create a New Topic
or Reply to this Thread
|
|
Inbox
