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=http://www.webdeveloper.com/forum/archive/index.php/"#category1">category2</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category3">category3</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category4">category4</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category5">category5</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category6">category6</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category7">category7</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category8">category8</a>
<h1>Specific Sites</h1>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category1">category2</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category3">category3</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category4">category4</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category5">category5</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category6">category6</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category7">category7</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category8">category8</a>
</div>Internet Explorer didn't implement hover on fields other than links until version 7.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...
JDoes 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?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!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.Yes, IE6/Win and IE5/Mac are old compared with Firefox, Opera 8, and Safari 2.
Opera is available for Linux and MacOS X as well. (<!-- m --><a class="postlink" href="http://www.opera.com/Download">http://www.opera.com/Download</a><!-- m --> /?custom=yes)
Firefox and Opera are the two browsers that are available on Windows, Linux, and MacOS X.I was told firefox has less popups than IE, is this true?Yes, Firefox has a built-in popup blocker that is enabled by default.If you're using IE6 on win2k or older OS, then yes. If you're using IE6 with SP2 on XP, then no.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?The CSS
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:
<div id="navigation">
<h1>General Sites</h1>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category1">category2</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category3">category3</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category4">category4</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category5">category5</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category6">category6</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category7">category7</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category8">category8</a>
<h1>Specific Sites</h1>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category1">category2</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category3">category3</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category4">category4</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category5">category5</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category6">category6</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category7">category7</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category8">category8</a>
</div>
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.
#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=http://www.webdeveloper.com/forum/archive/index.php/"#category1">category2</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category3">category3</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category4">category4</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category5">category5</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category6">category6</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category7">category7</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category8">category8</a>
<h1>Specific Sites</h1>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category1">category2</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category3">category3</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category4">category4</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category5">category5</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category6">category6</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category7">category7</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#category8">category8</a>
</div>Internet Explorer didn't implement hover on fields other than links until version 7.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...
JDoes 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?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!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.Yes, IE6/Win and IE5/Mac are old compared with Firefox, Opera 8, and Safari 2.
Opera is available for Linux and MacOS X as well. (<!-- m --><a class="postlink" href="http://www.opera.com/Download">http://www.opera.com/Download</a><!-- m --> /?custom=yes)
Firefox and Opera are the two browsers that are available on Windows, Linux, and MacOS X.I was told firefox has less popups than IE, is this true?Yes, Firefox has a built-in popup blocker that is enabled by default.If you're using IE6 on win2k or older OS, then yes. If you're using IE6 with SP2 on XP, then no.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?The CSS
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:
<div id="navigation">
<h1>General Sites</h1>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category1">category2</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category3">category3</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category4">category4</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category5">category5</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category6">category6</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category7">category7</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category8">category8</a>
<h1>Specific Sites</h1>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category1">category2</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category3">category3</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category4">category4</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category5">category5</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category6">category6</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category7">category7</a>
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#category8">category8</a>
</div>
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.