Website NOT showing menu hover in Internet Explorer ???

This is a discussion on "Website NOT showing menu hover in Internet Explorer ???" within the Web Page Design section. This forum, and the thread "Website NOT showing menu hover in Internet Explorer ??? are both part of the Design Your Website category.



 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices


Reply
 
LinkBack Thread Tools
  #1  
Old Apr 26th, 2006, 17:20
Junior Member
Join Date: Apr 2006
Age: 28
Posts: 29
Thanks: 0
Thanked 0 Times in 0 Posts
Question Website NOT showing menu hover in Internet Explorer ???

I seem to have Internet Explorer Compatibility Issue here.

My website can be seen perfectly well in Firefox but NOT in Internet Explorer. It can be seen on http://darsh25.tripod.com/alcohol.html

It's a CSS based website & on an online tuturial, I was told to download a file "csshover.htc" in order for my menu & submenus appear on Internet Explorer (cos of some compatibility issue).

The attached picture shows the hover effect of one of the topMenu link (Alcohol) & one of the leftMenu link (Whisky), which is what it should've been doing.

You might get some understanding from this article:
http://www.xs4all.nl/~peterned/csshover.html

Interesting thing (although quite peculiar) is, all these menu hover links works perfectly well BOTH in Internet Explorer & in Firefox, if I test it using these 2 browser at home, but as soon as I uploaded my website on Internet, these menu hover effects DOES NOT work in Internet Explorer.

Below is that part of the code within my Style Sheet (the entire style sheet code is also provided at the end).

/* This Code is for Microsoft Internet Explorer Browser
as it shows the effect of "li:hover" */

body { behavior: url(csshover.htc); }


Now, I've uploaded all my files on my tripod websice along with "csshover.htc" file, as soon as the mouse is rolled over top or left menu, I can't see it's "hover" effect at all in Internet Explorer, but it's working OK in Firefox.

My Style Sheet code is:


Code: Select all
/* CSS Document */

body 
{
background-image:url(background_champagne.gif);
background-attachment:fixed;
}

/* ........................................ Banner ........................................ */

div.banner
{
    width:40px;
    height:100px;
}


div.banner img
{
    width:40px;
    height:50px;
}

/* ......................................... Top Menu .................................... */

#topMenu
{
    background-color:transparent;
    cursor:default;
    text-align:center;
    width:980px;
    float:right;
}

#topMenu ul
{
    list-style: none;
    font-size:medium;
    float:right;
    position:relative;
    margin-left: 130px;
    width:850px;
    padding: 0;
}

#topMenu ul li 
{
    display: inline;
    border:1px solid black;
    width:210px;
    background-color:white;
    color:#FF00FF;
    float:left;
    position: relative;
    font-size:large;
}

#topMenu ul li:hover
{
    background-color:black;
}

#topMenu a
{
    display:block;
    text-decoration:none; 
    font-size:large;
    color:blue; 
}

#topMenu a:hover
{
    color:white;
    text-transform:uppercase;
}

body {behavior: url(csshover.htc);}


/* ....................................... Left Menu .......................................... */

#leftMenu
{
    background-color:transparent;
    cursor:default;
    text-align:center;
    width:100px;
    float:left;
}

#leftMenu ul
{
    text-align:center;
    list-style:none;
    margin:0px;
    position:relative;
    padding:0px;
    width:120px;
    border:thin solid red;
}

#leftMenu ul li 
{
    display: block;
    background-color:white;
    width:120px;
    border-bottom:thin solid red;
    color:blue;
    position: relative;
    font-size:large;
    line-height:50px; 
}

#leftMenu ul li:hover
{
    color:black;
    background-color:yellow;
    text-transform:uppercase;
}

#leftMenu ul li ul 
{
    position:absolute;
    display: none;
    text-transform:none;
    left:121px;
    width:123px;
    top:0px;
}

#leftMenu a
{
    display:block;
    position:relative;
    text-decoration:none; 
    background-color:white;
    line-height:20px; 
    font-size:large;
    width:123px;
    color:green;
    text-transform:none;
}

#leftMenu a:hover
{
    color:#00FFFF;
    background-color:black;
}

#leftMenu ul li ul {display:none;}
#leftMenu ul li:hover ul {display:block;}


/* This Code is for Microsoft Internet Explorer Browser 
as it shows the effect of "li:hover" */

body { behavior: url(csshover.htc); }


/* ........................... Left Menu Link Rollover Showing Image ....................... */

#leftMenu ul li img
{
position:absolute;
top:340px;
left:20px;
}

#leftMenu ul li img {display:none;}
#leftMenu ul li:hover img {display:block;}


/* ................................... Content ................................................ */

#content
{
    background-color:white;
    width:850px; 
    border:1px solid green;
    float:right;
}

#content h2
{
font-family:"Times New Roman", Times, serif;
text-align:justify;
margin:1em;
color:#990033;
text-decoration:underline;
}

#content h3
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:left;
font-size:large;
margin-left:20px;
color:blue;
text-decoration:none;
}

#content h4
{
font-family:"Courier New", Courier, monospace;
text-align:left;
font-size:large;
color:red;
margin-left:20px;
text-decoration:none;
}

#content h5
{
font-family:"Courier New", Courier, monospace;
text-align:left;
font-size:large;
color:fuchsia;
margin-left:20px;
text-decoration:none;
}

#content h6
{
font-family:"Courier New", Courier, monospace;
text-align:left;
font-size:medium;
color:black;
margin-left:20px;
text-decoration:underline;
}

#content table
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:left;
font-size:medium;
color:black;
margin-left:20px;
}

#content h2+p:first-letter
{
color:red;
float:left;
font-size:xx-large;
margin: 0 3px 3px 0;
}

#content p
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
text-indent:3em;
margin:1em 2em;
color:black;
}

#content ul
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
color:black;
margin:10px 50px;
list-style-image:url(list_icon.gif);
}

#content ul li
{
margin-top:15px;
}

#content ol
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
color:black;
margin:1em 1em 2em 3em;
list-style-type:decimal;
}

#content ol li
{
margin-top:20px;
}

#content img.left
{
float:left;
padding:10px;
}

#content img.right
{
float:right;
padding:10px;
}

/* ................................... Bottom Menu ......................................... */


#bottomMenu
{
    border:1px solid red;
    float:left;
    background-color:black;
    color:#FFFFFF;
    text-align:center;
    font-family:"Times New Roman", Times, serif;
    font-size:large;
    width:100%; 
    height:5%; 
    margin:0px;
}
Attached Images
File Type: jpg leftMenu.jpg (39.3 KB, 39 views)
File Type: jpg topMenu.jpg (36.2 KB, 48 views)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Apr 26th, 2006, 18:27
craig's Avatar
Reputable Member
Join Date: Sep 2005
Location: Preston, UK
Age: 21
Posts: 382
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Website NOT showing menu hover in Internet Explorer ???

Hover function is not supported by Internet Explorer, sorry, I think someone came up with a good work around, but i cant remember, search for similar "hover" queries on this site!

Craig
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Apr 26th, 2006, 19:57
Junior Member
Join Date: Apr 2006
Age: 28
Posts: 29
Thanks: 0
Thanked 0 Times in 0 Posts
Exclamation Re: Website NOT showing menu hover in Internet Explorer ???

Quote:
Originally Posted by craig
Hover function is not supported by Internet Explorer, sorry, I think someone came up with a good work around, but i cant remember, search for similar "hover" queries on this site!

Craig
I wonder why is it working perfectly well when playing it on my Internet Explorer after opening it straight from my PC, but ONLY doesn't work on the same Internet Explorer if played through the Internet itself (after I uploaded files onto tripod's web-space).

In fact, that's why I had to download a file "csshover.htc" so the codes within this particular file makes it possible for this CSS based website compatible on Internet Explorer browser. Even the article on website http://www.xs4all.nl/~peterned/csshover.html explains the same, as how to overcome this problem, so I presume although achieving the exact result isn't quite a plain sailing however, there's a fair chance of getting it done. Over the coming days, I'll be exploring into it.

By the way, any other way of getting the same same result, since I've seen many website having exactly the same hover effect as in my "leftMenu", while browsing their website on Internet Explorer ???

Last edited by j4mes_bond25; Apr 26th, 2006 at 20:04.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Apr 28th, 2006, 11:48
Most Reputable Member
Join Date: Apr 2006
Location: Cornwall, UK
Posts: 1,310
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Website NOT showing menu hover in Internet Explorer ???

Hi there,

I don't know if you have tweaked somethin but the sub-menus are showing for me in IE 6 on XP SD 2.

Cross browser styling issues need sorting. Menus look awful in IE.

You layout doesn't accomodate different viewing widths very well. Main text area need to be fluid in width.

In FF for example, with a viewing width of 820px plus the scroll bar, the main text is pushed down below the vavigation and is partially hidden off to the right.

You need to validate and clean-up your code. W3C validator for main page shows 83 errors.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old May 2nd, 2006, 23:35
masonbarge's Avatar
Highly Reputable Member
Join Date: Jan 2006
Location: Atlanta GA
Posts: 631
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Website NOT showing menu hover in Internet Explorer ???

I'm not sure exactly what you are after, but I have hover working for a css pop-up in IE which I think is what you're after, by using the display style in a span. The only thing I haven't been able to do is to make it show over another div to the right or left, but I haven't had time to fiddle with it today.

See the thread just above, "Rollovers and absolute positioning", and see if that helps out at all. It works like a charm for me. If someone finds a way to make it display on top of other divs, let me know.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old May 3rd, 2006, 21:39
Most Reputable Member
Join Date: Apr 2006
Location: Cornwall, UK
Posts: 1,310
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Website NOT showing menu hover in Internet Explorer ???

Hi James,

This line apeears twice in your code.
body { behavior: url(csshover.htc); }

In your #leftMenu ul li ul, reduce the left value by a px or two.
This will stop the sub-menus from disappearing when the cursor is just on the line between parent and sub.

If you add border-bottom: 0; to your #leftMenu ul definition, you will get rid of the extra line at the bottom of your menus.

You need to tweak the width of the bottom borders on the sub-menus as they don't meet the right-hand edge.

I strongly suggest you get rid of the pop-up drinks.





Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #7  
Old May 4th, 2006, 02:27
Rob's Avatar
Rob Rob is offline
Webforumz Founder
Join Date: Jul 2003
Location: Southern UK
Age: 34
Posts: 3,159
Blog Entries: 7
Thanks: 27
Thanked 19 Times in 16 Posts
Re: Website NOT showing menu hover in Internet Explorer ???

James....

You are running IE6, right?

IE7 beta is still very buggy, so dont expect it to work.
__________________
Click the 'Thanks!' button if this post has helped you

Rob - Webforumz Founder
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #8  
Old May 4th, 2006, 10:01
Junior Member
Join Date: Apr 2006
Age: 28
Posts: 29
Thanks: 0
Thanked 0 Times in 0 Posts
Exclamation Re: Website NOT showing menu hover in Internet Explorer ???

Quote:
Originally Posted by ukgeoff
Hi James,

This line apeears twice in your code.
body { behavior: url(csshover.htc); }

In your #leftMenu ul li ul, reduce the left value by a px or two.
This will stop the sub-menus from disappearing when the cursor is just on the line between parent and sub.

If you add border-bottom: 0; to your #leftMenu ul definition, you will get rid of the extra line at the bottom of your menus.

You need to tweak the width of the bottom borders on the sub-menus as they don't meet the right-hand edge.

I strongly suggest you get rid of the pop-up drinks.


Thanks for your time & help.

As per your recommendation, I've reduced the left value of menu & hence now the "sub-menu" stays rather than disappearing.

Additionally, I've added "border-bottom" with "0px" value, along with being able to tweak the width of the bottom borders on the sub-menus as they don't meet the right-hand edge.

You can see the changes on my website, since I've updated it back again.

Although, I wonder if you could explore further on your very last recommendation, as how do you mean by "pop-up" drinks.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #9  
Old May 4th, 2006, 10:02
Junior Member
Join Date: Apr 2006
Age: 28
Posts: 29
Thanks: 0
Thanked 0 Times in 0 Posts
Exclamation Re: Website NOT showing menu hover in Internet Explorer ???

Quote:
Originally Posted by Rob
James....

You are running IE6, right?

IE7 beta is still very buggy, so dont expect it to work.
Yes, I'm using IE6.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
website, showing, menu, hover, internet, explorer

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Internet Explorer 6.0 & 5.5 don't like me bodgit Web Page Design 0 May 10th, 2008 17:40
Internet Explorer 8 CloudedVision Webforumz Cafe 9 Feb 20th, 2008 23:05
Bloody Internet Explorer! JasonKing Web Page Design 2 Sep 8th, 2007 12:24
CSS Internet Explorer only Kropotkin Web Page Design 8 Sep 5th, 2007 12:34


All times are GMT. The time now is 03:23.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42