2 replies [Last post]
TRMJeff
TRMJeff's picture
Offline
newbie
Texas
Last seen: 17 years 39 weeks ago
Texas
Joined: 2004-01-21
Posts: 8
Points: 0

I'm using a table for a navigation menu and this works in every version of every browser I've found except IE for Windows. It's a pretty small issue and certainly not a killer, but it is really annoying. Smile

When mousing over the table cell in every browser except Win IE, the background changes colors. In Win IE, you have to mouseover the actual text before the background changes EXCEPT in the very first table data cell where it works perfectly. What the hell???

Here's an example...

http://www.passadvisors.com/cf/contact.html

The navigation on the left should change colors when you mouseover the table cell.

Why in Win IE does it only work on the very top table cell and not the others???

I know that I've seen javascript add-ons for IE. Is this something I'll need to add and, if so, anyone have a sample of one and how it should be applied to the td??? If it is applied to the td, will I need to remove the css style and just use the javascript instead?

Thanks for the help!!!

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 48 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

IE Not Displaying Mouseover Background Correctly

I think the url is supposed to be http://www.passadvisors.com/cf/

Not sure but anyway - on the right is a menu as per the following

You will notice that SERVICES has both a ID and CLASS!!, and also in IE you do not have to hover over the text, while you do for all the others which only have an ID. I think you already have a solution but did not realise it.

<td id="indexnav" class="indexnavfirst"><a href="#">SERVICES</a></td>
</tr>
<tr>
<td id="indexnav"><a href="#">FINANCIAL</a></td>
</tr>
<tr>
<td id="indexnav"><a href="#">NEWS</a></td>
</tr>
<tr>
<td id="indexnav"><a href="#">FAQ</a></td>
</tr>
<tr>
<td id="indexnav"><a href="#">ABOUT PASS </a></td>
</tr>
<tr>
<td id="indexnav"><a href="#">CONTACT</a></td>

Regards
Day

The only way to learn is to do it yourself

TRMJeff
TRMJeff's picture
Offline
newbie
Texas
Last seen: 17 years 39 weeks ago
Texas
Joined: 2004-01-21
Posts: 8
Points: 0

IE Not Displaying Mouseover Background Correctly

Actually, the index page of that site is different from the internal pages like the one I posted, which is why I posted it, but they both have the same problem.

The reason the first TD has an id and a class is because the id defines everything in the table cell except the top border. Because the bottom border for every other cell is also the top border for the cell directly below it, only the very first cell requires a top border. That class does nothing but add a top border to the first TD.

There have been changes made to the navigation, however, in Win versions of IE, you still have to mouseover the actual word to get the background to change. Here is the CSS for that navigation area:

table#leftnav {
padding: 0px;
width: 164px;
border-top: 10px solid #103815;
border-right: 1px solid #468676;
border-bottom: none;
border-left: none;
background-color: #103815;
}
td#leftnav {
text-align: left;
vertical-align: middle;
margin: 0px;
padding: 0px;
width: 164px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
border-top: none;
border-right: none;
border-bottom: 1px solid #468676;
border-left: none;
background-color: #103815;
}
td#leftnav a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-color: #1B4F19;
text-indent: 10px;
width: auto;
margin: 0px;
text-align: left;
display: block;
padding-top: 4px;
padding-bottom: 4px;
}
td#leftnav a:hover {
background-color: #124010;
}
.leftnavtop {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #468676;
}