slide out menu wont work in Internet Explorer

[BigShieldsy]

I am new to the whole html and css however i have been building a website for my football for a while now thanks to this website and forum.

The webisite so far seem to be fine in both firefox and chrome. However when checking internet explorer i have now came across an issue that i cant find a answer for.The website houses a menu system on the left hand side of the screen and when the user hover's their pointer over the required menu option another level should appear to show options for that menu header. (The html code for the menu will be added at the end of the comment along with the css style for the menu.) However with internet explorer the second level menu will not appear and i dont know why.

 

If some could explain why this is happening or give me an idea into fixing the issue.

 

 

HTML menu code

<div class="box"> <img src="../Pictures/Main-Site/Menu.jpg" width="140px" style="margin-left:6px; margin-top:2px; margin-bottom:4px;"/> <br/> <div id="menuwrapper"><!-- Navigation System --> <ul><!-- LEVEL ONE --> <li><a href="index.html">Home</a></li> <li><a href="Squads.html">Squads</a> <ul><!-- LEVEL TWO --> <li><a href="SaturdaySquad.html">Saturday Squad</a></li> <li><a href="SundaySquad.html">Sunday Squad</a></li> </ul> </li> <li><a href="Fixtures.html">Team Fixtures</a> <ul><!-- LEVEL TWO --> <li><a href="SatFixtures.html">Saturday Team</a> <!--<ul> LEVEL THREE <li><a href="SatLeagueCup.html">League Cup</a></li> <li><a href="SatLeagueCup.html">GDSML Cup</a></li> <li><a href="SatFixtures.html#September">September</a></li> <li><a href="SatFixtures.html#October">October</a></li> <li><a href="SatFixtures.html#November">November</a></li> <li><a href="SatFixtures.html#December">December</a></li> <li><a href="SatFixtures.html#January">January</a></li> <li><a href="SatFixtures.html#February">February</a></li> <li><a href="SatFixtures.html#March">March</a></li> <li><a href="SatFixtures.html#April">April</a></li> </ul>--> </li> <li><a href="SunFixtures.html">Sunday Team</a> <!--<ul> LEVEL THREE <li><a href="SunFixtures.html#August">August</a></li> <li><a href="SunFixtures.html#September">September</a></li> <li><a href="SunFixtures.html#October">October</a></li> <li><a href="SunFixtures.html#November">November</a></li> <li><a href="SunFixtures.html#December">December</a></li> <li><a href="SunFixtures.html#January">January</a></li> <li><a href="SunFixtures.html#February">February</a></li> <li><a href="SunFixtures.html#March">March</a></li> <li><a href="SunFixtures.html#April">April</a></li> </ul>--> </li> </ul> </li> <li><a href="#">League Tables</a> <ul><!-- LEVEL TWO --> <li><a href="SatLeagueTable.html">Saturday League</a></li> <li><a href="SunLeagueTable.html">Sunday League</a></li> </ul> </li> <li><a href="Sponsors.html">Sponsors</a> <ul><!-- LEVEL TWO --> <li><a href="http://www.carringtondean.com" target="_blank">Carrington Dean</a></li> <li><a href="http://www.musicmagpie.com" target="_blank">Musicmagpie</a></li> <li><a href="http://www.turnbullmccarron.com" target="_blank">Turnbull and McCarron</a></li> </ul> </li> <li><a href="#">About Us</a> <ul><!-- LEVEL TWO --> <li><a href="ContactUs.html">Contact Us</a></li> <li><a href="http://www.facebook....100003892391812" target="_blank">FACEBOOK</a></li> </ul> </li> <!--<li><a href="Members_Area/index.html">Members</a> <ul> <li><a href="Members_Area/join_form.php">New Members</a></li> <li><a href="Members_Area/login_form.php">Sign In</a></li> <li><a href="lost_pw.php">Lost Password</a></li> <li><a href="password_change.php">Change Password</a></li> </ul> </li>--> </ul> </div> <br/> <img src = "../Pictures/Main-Site/RoyalArmsScotland.png" width = "120" height = "130" style="margin-left:10%;"/> </div>

 

CCS Style for the menu

 

.left-sidebar{ float:left;}.box { float:left; background: navy; /*width: 160px;*/ font-family: Times New Roman; /*font-size: large;*/ color:white; margin-left:30px; margin-right:30px; border-right:solid 1px yellow; border-left:solid 1px yellow;}A:LINK { color: white; border-bottom: none;}A:VISITED { color: white; text-decoration: none; border-bottom: none;}A:HOVER { Color: none;}/* We remove the margin, padding, and list style of UL and LI components */#menuwrapper ul, #menuwrapper ul li{ margin:0; padding-left:1px; list-style:none; /*text-align:center;*/}#menuwrapper a:hover, a:active{ color:navy;}#menuwrapper li:hover > a{ color:navy;}/* We apply background color and border bottom white and width to 150px */#menuwrapper ul li{ background-color:navy; /*border-left:solid 1px yellow;*/ width:150px;}/* We apply the background hover color when user hover the mouse over of the li component */#menuwrapper ul li:hover,ul li:active{ background-color:white; color:navy; position:relative; }/* We apply the link style */#menuwrapper ul li a{ padding:5px 15px; display:block; text-decoration:none;}#menuwrapper ul li a:hover{ padding:5px 15px; display:block; text-decoration:none;}#menuwrapper ul li a:active{ color: navy; padding: 5px 15px; display: block; text-decoration: none; font-size: 14px;}/**** SECOND LEVEL MENU *** *//* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */#menuwrapper ul li ul{ position:absolute; display:none;}/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width. */#menuwrapper ul li:hover ul{ left:150px; top:0px; display:block; border:solid 1px yellow;}/* we apply different background color to 2nd level menu items */#menuwrapper ul li ul li{ background-color:blue; border-bottom:solid 1px yellow;}/* We change the background color for the level 2 submenu when hovering the menu */#menuwrapper ul li:hover ul li:hover{ background-color:white; color:navy;}/* We style the color of level 2 links */#menuwrapper ul li ul li a{ color:yellow; display:inline-block; width:150px;}/* LEVEL 3 */#menuwrapper ul li:hover ul li ul { position:absolute; display:none;}/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width. */#menuwrapper ul li ul li:hover ul { left:150px; top:0px; display:block; border:solid 1px yellow;}/* we apply different background color to 3rd level menu items */#menuwrapper ul li ul li ul li{ background-color:blue; border-bottom:solid 1px yellow;}/* We change the background color for the level 3 submenu when hovering the menu */#menuwrapper ul li ul li:hover ul li:hover{ background-color:white; color:navy;}/* We style the color of level 2 links */#menuwrapper ul li ul li ul li a{ color:white; display:inline-block; width:120px;}

 

hopefully someone can get the bottom of this its been driving me nuts for days now lol

[newseed]

_{I've tested your code IE7, 8, 9 & 10 and it works fine for me. It's possible that you have something else in your html/css that you are not sharing that is causing a problem. The first thing I would look for is what do you have showing that is to the right of the left menu? If you have a slideshow or flash using positioning then it's possible that the slideshow (or whatever) is overlaying on top of the left menu's flyout.}

 

_{You can copy the code you have posted on this forum and test it on a separate page so you can see that it does indeed works.}

Edited July 23, 2013 by newseed

[BigShieldsy]

Thanks newseed for the responce it is nice to see that there is someone willing to help in this matter.

 

I will be looking into that but i only have a div next to the menu which houses all the information in relation to what page the user will be on.

 

I would have gave you the website address but i have recently took it off the web the now until i get this issue solved. No point in paying for a website that does not work on the main brower given with pc's and laptops.

 

if there was a way to show you the code files i would happly do so. Is there any possible way of solving this by bring the menu to the front if it is hiding?

 

once again thanks for the help in this matter

[BigShieldsy]

HI newseed after taking your information i have looked over the coding i have for the div that is next to the menu the only thing i can see is the fact i have a float:left in the css for the div.

 

Could this possible be the issue?

[newseed]

Still not enough info. I was looking for something with positioning or javascript or flash. It's hard to knows what it actually happening without a url of your site. Upload the whole thing to a temp site folder and provide a url. I should be able to see what's going on then.

[BigShieldsy]

Hi newseed sorry that wasnt what you were looking for. Im new to the whole website building and still learning as i go (best way for it lol)

 

Anyway I have started up an old online account for the website and have uploaded about 90% of the site (not all pictures have been uploaded). Here is the address

http://bellgrovetemp.site11.com/ I have left the default.php in there as well so you can see the file set up i am using aswell i hope this will help.

 

Just click on Main_Site if you wish to view the website running.

[newseed]

You page is going into quirks mode for IE which is why the menu is not working. The correct doctype should be <!DOCTYPE html>

 

Also, you have some css style links that are not inside the head tags:

 

<!DOCTYPE>

<html>

<!-- ************************ STYLE SHEETS *************************** -->

<link rel="stylesheet" type="text/css" href="../Stylesheets/Main_Sheet.css"/>

<link rel="stylesheet" type="text/css" href="../Stylesheets/Menus/Menu_System.css"/>

<link rel="stylesheet" type="text/css" href="../Stylesheets/Pages/index_page.css"/>

<!-- ***************************************************************** -->

<!-- ************************ JAVASCRIPTS *************************** -->

　

<!-- ***************************************************************** -->

<head>

 

Move your <head> tag to be just after the <html> tag.

 

Change those two things and I think you menu will begin to work.

[BigShieldsy]

Newseed your an absolute star :D Thank you very much for your help!!!!

 

I cant believe it was that easy though lol.

 

Now i can get on with getting the website upload properly again

 

once again thank you so much