/    Sign up×
Community /Pin to ProfileBookmark

Hover in IE?

Copy linkTweet thisAlerts:
Aug 29.2005

I have a list of navigation links on the left top side of my page that I have styled to have a background effect and a text color change effect. These effects work in Safari and Firefox but of course when I try it in Mac IE 5 there is no hover effect. The website links on my page that I have applied hover effects to, text-decoration: none & color: red, work in Mac IE 5. Why do the website link hover effects work but not the navigation hover effects in my navigation bar? Thanks a lot for the help.

#navigation {
position: fixed;
width: 11em;
height: 100%;
border: 0;
margin: 0;
padding-top: 5em;
background-color:#333300;
list-style-type: none;
}

#navigation h1 {
padding-left: 0.25em;
color:#ffcc33;
font-size: 0.85em;
font-family: helvetica;
}

#navigation a {
font-size: 0.70em;
font-family: Trebuchet MS, verdana, geneva, sans-serif;
color: red;
display: block;
text-decoration: none;
padding-left: 0.50em;
border-bottom: solid black 1px;
}

#navigation a:hover {
color: black;
background-color:#ffcc33;
}

<div id=”navigation”>

<h1>General Sites</h1>
<a href=”#category1″>category2</a>
<a href=”#category3″>category3</a>
<a href=”#category4″>category4</a>
<a href=”#category5″>category5</a>
<a href=”#category6″>category6</a>
<a href=”#category7″>category7</a>
<a href=”#category8″>category8</a>

<h1>Specific Sites</h1>
<a href=”#category1″>category2</a>
<a href=”#category3″>category3</a>
<a href=”#category4″>category4</a>
<a href=”#category5″>category5</a>
<a href=”#category6″>category6</a>
<a href=”#category7″>category7</a>
<a href=”#category8″>category8</a>
</div>

to post a comment
CSS

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@felgallAug 29.2005 — Internet Explorer didn't implement hover on fields other than links until version 7.
Copy linkTweet thisAlerts:
@RockhoundAug 29.2005 — Isnt that what he is using the hover for...

To me it should work. I use the same technique in my homepage and it works fine in IE.

I will punch in the code when I get home and see if I can find an error.. do you have a link to see the error...

J
Copy linkTweet thisAlerts:
@asmythauthorAug 30.2005 — Does anyone know for sure if the hover on navigation links works in Mac or Windows IE?

Also my site does not come out correct on Mac IE. The navigation links on the left side have a background color that is supposed to extend all the way to the bottom of the window. In Mac IE the background color stops at the end of the last navigation link and becomes white. I have a black border separating the nav links from the main page. The white space that starts at the last nav link then extends across the very bottom of my main page to the far right. Can I prevent that from happening?
Copy linkTweet thisAlerts:
@WoDAug 30.2005 — As a Mac user I would recommend you quietly pretend IE5/Mac doesn't exist. We have this browser called Safari, dontchaknow, that isn't a steaming pile of horse excrement.

Seriously, though, any Mac user using Intarweb Explorer has it coming! Damned traitors!
Copy linkTweet thisAlerts:
@felgallAug 30.2005 — Modern Web Browsers:

Mac users have Safari and Firefox to choose from.

Windows users have Opera and Firefox to choose from.

Linux users have Konqueror and Firefox to choose from.

There are also a number of less propular browsers but those are the main two modern browsers for each platform.

By modern browsers I mean 8th generation browsers. The 7th generation Internet Explorer browser is not out yet.
Copy linkTweet thisAlerts:
@KravvitzAug 30.2005 — Yes, IE6/Win and IE5/Mac are old compared with Firefox, Opera 8, and Safari 2.

[url=http://www.opera.com/download/?custom=yes]Opera is available for Linux and MacOS X as well.[/url]

Firefox and Opera are the two browsers that are available on Windows, Linux, and MacOS X.
Copy linkTweet thisAlerts:
@TOTRESAug 30.2005 — I was told firefox has less popups than IE, is this true?
Copy linkTweet thisAlerts:
@KravvitzAug 30.2005 — Yes, Firefox has a built-in popup blocker that is enabled by default.
Copy linkTweet thisAlerts:
@JPnycAug 30.2005 — If you're using IE6 on win2k or older OS, then yes. If you're using IE6 with SP2 on XP, then no.
Copy linkTweet thisAlerts:
@asmythauthorAug 31.2005 — Can anyone answer my original question below for this thread?


My site comes out right on Safari & Firefox but does not come out correct on Mac IE. The navigation links on the left side have a background color that is supposed to extend all the way to the bottom of the window. In Mac IE the background color stops at the end of the last navigation link and becomes white. I have a black border separating the nav links from the main page. The white space that starts at the last nav link then extends across the very bottom of my main page to the far right. Can I prevent that from happening?
Copy linkTweet thisAlerts:
@The_Little_GuyAug 31.2005 — The CSS
<i>
</i>a.nav:link {text-decoration:none; color:#000000; background-color:transparent}
a.nav:visited {text-decoration:none; color:#000000; background-color:transparent}
a.nav:hover {text-decoration:underline; color:#6a74c3; background-color:transparent}
a.nav:active {text-decoration:underline; color:#000000; background-color:transparent}

The html:
<i>
</i>&lt;div id="navigation"&gt;

&lt;h1&gt;General Sites&lt;/h1&gt;
&lt;a class="nav" href="#category1"&gt;category2&lt;/a&gt;
&lt;a class="nav" href="#category3"&gt;category3&lt;/a&gt;
&lt;a class="nav" href="#category4"&gt;category4&lt;/a&gt;
&lt;a class="nav" href="#category5"&gt;category5&lt;/a&gt;
&lt;a class="nav" href="#category6"&gt;category6&lt;/a&gt;
&lt;a class="nav" href="#category7"&gt;category7&lt;/a&gt;
&lt;a class="nav" href="#category8"&gt;category8&lt;/a&gt;


&lt;h1&gt;Specific Sites&lt;/h1&gt;
&lt;a class="nav" href="#category1"&gt;category2&lt;/a&gt;
&lt;a class="nav" href="#category3"&gt;category3&lt;/a&gt;
&lt;a class="nav" href="#category4"&gt;category4&lt;/a&gt;
&lt;a class="nav" href="#category5"&gt;category5&lt;/a&gt;
&lt;a class="nav" href="#category6"&gt;category6&lt;/a&gt;
&lt;a class="nav" href="#category7"&gt;category7&lt;/a&gt;
&lt;a class="nav" href="#category8"&gt;category8&lt;/a&gt;
&lt;/div&gt;


If the hover code doesn't work, It probably is one of a few things, such as the way the links are orderd (a:link, a:hover, a:visited, a:active). Or it could be a fault in the coding.

I hope my code make your site look better, and work.
×

Success!

Help @asmyth spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...