473,289 Members | 2,089 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,289 software developers and data experts.

CSS Drop Down Menu in IE7

Hi,

As I do not have IE7 on my computer, I was wondering if there is a
fault in my CSS Menu when using IE7.

Please can someone look at my site - http://www.worldofmonopoly.co.uk
and tell me if it works, and if it does not, tell me why it does not
work.

Thanks.

TycoonUK

-----------------------

Menu CSS File
..menu {
width: 956px;
font-size: 0.9em;
}

/* remove all the bullets, borders and padding from the default list
styling */

..menu ul {
padding: 0;
margin: 0;
list-style-type: none;
}

..menu ul ul {
width: 154px; /* */
}

/* float the list to make it horizontal and a relative positon so that
you can control the dropdown menu positon */

..menu li {
float: left;
width: 159px;
position: relative;
}

/* style the links for the top level */

..menu a,
..menu a:visited {
display: block;
font-size: 0.85em;
text-decoration: none;
color: #000000;
width: 154px;
height: 25px;
border: 1px solid #000000;
border-width: 1px;
background: #dddddd;
padding: 2px;
padding-left: 2px;
line-height: 29px;
}

/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a,
* html .menu a:visited {
width: 159px;
w\idth: 159px;
}

/* style the second level background */

..menu ul ul a.drop,
..menu ul ul a.drop:visited {
background: #dddddd;
}

/* style the second level hover */

..menu ul ul a.drop:hover {
background: #006699;
}

..meny ul ul :hover a.drop, {
background: #006699;
}

/* style the third level background */

..menu ul ul ul a,
..menu ul ul ul a:visited {
background: #dddddd;
}

/* style the third level hover */

..menu ul ul ul a:hover {
background: #006699;
}

..menu ul ul ul :hover a {
background: #006699;
}

/* hide the sub levels and give them a positon absolute so that they
take up no room */

..menu ul ul {
visibility: hidden;
position: absolute;
height: 0px;
top: 31px;
left: 0px;
width: 154px; /* */
}

/* another hack for IE5.5 */

* html .menu ul ul {
top: 33px;
t\op: 34px;
}

/* position the third level flyout menu */

..menu ul ul ul {
left: 159px; /* */
top: 0;
width: 154px; /* */
}

/* style the table so that it takes no part in the layout - required
for IE to work */

..menu table {
position: absolute; top:0; left:0;
}

/* style the second level links */

..menu ul ul a,
..menu ul ul a:visited {
background: #ffffff;
color: #000000;
height: auto;
line-height: 1em;
padding-left: 2px;
padding-top: 2px;
width: 154px /* */
}

/* yet another hack for IE5.5 */
* html .menu ul ul a,
..menu ul ul a:visited {
width: 159px; /* */
w\idth: 154px; /* */
}
/* style the top level hover */
..menu a:hover,
..menu ul ul a:hover {
color: #000000;
background: #006699;
}

..menu :hover a,
..menu ul ul :hover a {
color: #000000;
background: #006699;
}

/* make the second level visible when hover on first level list OR
link */

..menu ul li:hover ul,
..menu ul a:hover ul{
visibility:visible;
}

/* keep the third level hidden when you hover on first level list OR
link */

..menu ul :hover ul ul{
visibility:hidden;
}

/* keep the fourth level hidden when you hover on second level list OR
link */
..menu ul :hover ul :hover ul ul{
visibility:hidden;
}

/* make the third level visible when you hover over second level list
OR link */

..menu ul :hover ul :hover ul{
visibility:visible;
}

/* make the fourth level visible when you hover over third level list
OR link */

..menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}
--------------------------

Menu HTML File

--------------------------

<!-- Menu Start -->
<div class="menu">

<ul>

<!-- Menu UK -->

<li><a href="#">United Kingdom<!--[if IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul<!-- drop down menu items -->
<li><a class="drop" href="#">Original Board<!--[if IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">The Properties</a></li>
<li><a href="#">The Different
Styles</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>

<li><a href="#" target="_self">70th Anniversary</a></li>
<li><a href="#">Bristol</a></li>
<li><a href="#">Cambridge</a></li>
<li><a class="drop" href="#">Nottingham<!--[if IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">2001</a></li>
<li><a href="#">2003</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>

<li><a href="#">Northern Ireland</a></li>
<li><a href="#">Scotland</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Menu USA -->

<li><a href="#">United States<!--[if IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul<!-- drop down menu items -->
<li><a class="drop" href="#">Original Board<!--[if IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">The Properties</a></li>
<li><a href="#">The Different Styles</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>

<li><a href="#">Boston</a></li>
<li><a href="#">New York</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Europe -->

<li><a href="#">Europe<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul<!-- drop down menu items -->
<li><a class="drop" href="#">France</a><!--[if IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="#">French Board<!--[if IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">1936</a></li>
<li><a href="#">2003</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>

<li><a href="#">Lille</a></li>
<li><a href="#">Toulousse</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="#">Germany<!--[if IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="#">German Board<!--[if IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">1936</a></li>
<li><a href="#">2003</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>

<li><a href="#">Hamburg</a></li>
<li><a href="#">Munich</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>

<li><a href="#">Spain</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Rest of the World -->

<li><a href="#">World<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul<!-- drop down menu items -->
<li><a href="#">Argentina</a></li>
<li><a class="drop" href="#">Australia<!--[if IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="#">Australian Board<!--[if IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">1936</a></li>
<li><a href="#">2003</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>

<li><a href="#">Regionals/Specials</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>

<li><a href="#">China</a></li>
<li><a href="#">Japan</a></li>
<li><a class="drop" href="#">New Zealand<!--[if IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a
href="/world/newzealand/original/index.php">Original Board</a></li>
<li><a href="#">Starship 2001</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>

<li><a href="#">Russia</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Other Editions -->

<li><a href="#">Other Editions<!--[if IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul<!-- drop down menu items -->
<li><a class="drop" href="#">Cartoons<!--[if IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Looney Tunes</a></li>
<li><a class="drop" href="#">Pokemon<!--[if IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">1999</a></li>
<li><a href="#">2000</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>

<li><a href="#">Powerpuff Girls</a></li>
<li><a href="#">Sponge Bob Squarepants</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="#">Disney<!--[if IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Mickey Mouse 75th -
2004</a></li>
<li><a href="#">Original - 2001</a></li>
<li><a href="#">Pixar - 2005</a></li>
<li><a href="#">Pop-Up Castle - 2005</a></li>
<li><a href="#">Theme Park - 2002</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="#">Film / Television<!--[if IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="#">Batman
Franchise<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Batman and
Robin</a></li>
<li><a href="#">Batman</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>

<li><a href="#">Lord Of The Rings</a></li>
<li><a href="#">Star Trek</a></li>
<li><a href="#">Star Wars</a></li>
<li><a href="#">Spiderman</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="#">Sports<!--[if IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="#">American
Football<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">New England
Patriots</a></li>
<li><a href="#">Tampa Bay
Buccanneers</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="#">Football
(Soccer)<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Arsenal</a></li>
<li><a href="#">Chelsea</a></li>
<li><a href="#">FIFA World Cup
France 98</a></li>
<li><a
href="/other/sport/football/germany06/index.php">FIFA World Cup
Germany 2006</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="#">Major League
Baseball (mlb)<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Boston Red Sox</a></li>
<li><a href="#">Florida Marlins</a></li>
<li><a href="#">New York
Yankees</a></li>
<li><a href="#">Tampa Bay Devil
Rays</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>

<li><a href="#">Fishing</a></li>
<li><a href="#">National Hockey League
(NHL)</a></li>
<li><a href="#">Snowboarding</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>

<li><a href="#">Other Licensed</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Menu Extras and Information-->

<li><a href="#">Extras and Information<!--[if IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul<!-- drop down menu items -->
<li><a href="/index.php" target="_self">Home</a></li>
<li><a href="#">RSS Feed</a></li>
<li><a
href="http://www.worldofmonopoly.co.uk/blog/blogger.html"
target="_blank">Blog</a></li>
<li><a
href="http://www.worldofmonopoly.co.uk/store/index.php"
target="_self">Monopoly Shop</a></li>
<li><a href="/history/index.php"
target="_self">Monopoly History</a></li>
<li><a href="/board/index.php"
target="_self">Monopoly Board</a></li>
<li><a href="#" target="_self">FAQ</a></li>
<li><a href="/new/index.php" target="_self">New
Releases</a></li>
<li><a href="/sitemap/index.php" target="_self">Site
Map</a></li>
<li><a href="/extras/index.php" target="_self">Mailing
List / Guestmap</a></li>
<li><a href="/links/index.php"
target="_self">Links</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</div>

<!-- Menu End -->

<!-- Changeable Content Start -->
Apr 6 '07 #1
4 9254
Scripsit TycoonUK:

As I do not have IE7 on my computer, I was wondering if there is a
fault in my CSS Menu when using IE7.
Yes, there is. It is pointlessly complicated, and you are using browser
sniffing for specific browsers even without testing it on those browsers.
You are also setting dimensions in pixels, thereby potentially invoking a
mess when font sizes exceed your expectations. And you are setting grossly
overwide widths like 956 pixels.

Even if it "worked" for some values of "work", that would be by accident
only. Starting afresh is _much_ easier than trying to fix the sallad.

P.S. Posting a large bulk of code is a no-no in civilized Usenet groups like
this.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Apr 7 '07 #2
On 7 Apr, 08:17, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
Scripsit TycoonUK:
As I do not have IE7 on my computer, I was wondering if there is a
fault in my CSS Menu when using IE7.

Yes, there is. It is pointlessly complicated, and you are using browser
sniffing for specific browsers even without testing it on those browsers.
You are also setting dimensions in pixels, thereby potentially invoking a
mess when font sizes exceed your expectations. And you are setting grossly
overwide widths like 956 pixels.

Even if it "worked" for some values of "work", that would be by accident
only. Starting afresh is _much_ easier than trying to fix the sallad.

P.S. Posting a large bulk of code is a no-no in civilized Usenet groups like
this.

--
Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/
HI

It is difficult to read a code with so many conditional comments, but
it looks like you are ending the a-element two times in ie - every
time. You should put hoover on the li-element not the a-element. In
ie6 and below you use a small javascript to change the class on the
mouseover event. Check out http://www.alistapart.com/articles/dropdowns/.
The code used on "A List Apart" is also a bit easier to read :-)

I belive you can remove many ie hacks for ie7. There is a problem I
believe with z-index (still) and background position. A Google search
should sort that one out.

Tor

Apr 7 '07 #3
On Sat, 7 Apr 2007 09:17:13 +0300, "Jukka K. Korpela"
<jk******@cs.tut.fiwrote:
>Scripsit TycoonUK:

>As I do not have IE7 on my computer, I was wondering if there is a
fault in my CSS Menu when using IE7.

Yes, there is. It is pointlessly complicated, and you are using browser
sniffing for specific browsers even without testing it on those browsers.
You are also setting dimensions in pixels, thereby potentially invoking a
mess when font sizes exceed your expectations. And you are setting grossly
overwide widths like 956 pixels.

Even if it "worked" for some values of "work", that would be by accident
only. Starting afresh is _much_ easier than trying to fix the sallad.

P.S. Posting a large bulk of code is a no-no in civilized Usenet groups like
this.
Hi,

Thanks for your comments.
I have IE6 installed, but my wifes have IE7 on, but I have had trouble
with it, that is why I asked.

Also, I did a poll on my previous version on the site, and over 90% of
the replies (I had over 150 replies) said that as it was a specialist
site, it would be better at a 1024 width. Therefore I set it at 956
so, that if people had to scroll vertically, they would not have to
scroll horizontally.

TycoonUK
Apr 7 '07 #4
On 7 Apr, 23:22, TycoonUK <tycoo...@hotmailnospam.comwrote:
On Sat, 7 Apr 2007 09:17:13 +0300, "Jukka K. Korpela"

<jkorp...@cs.tut.fiwrote:
Scripsit TycoonUK:
As I do not have IE7 on my computer, I was wondering if there is a
fault in my CSS Menu when using IE7.
Yes, there is. It is pointlessly complicated, and you are using browser
sniffing for specific browsers even without testing it on those browsers.
You are also setting dimensions in pixels, thereby potentially invoking a
mess when font sizes exceed your expectations. And you are setting grossly
overwide widths like 956 pixels.
Even if it "worked" for some values of "work", that would be by accident
only. Starting afresh is _much_ easier than trying to fix the sallad.
P.S. Posting a large bulk of code is a no-no in civilized Usenet groups like
this.

Hi,

Thanks for your comments.
I have IE6 installed, but my wifes have IE7 on, but I have had trouble
with it, that is why I asked.

Also, I did a poll on my previous version on the site, and over 90% of
the replies (I had over 150 replies) said that as it was a specialist
site, it would be better at a 1024 width. Therefore I set it at 956
so, that if people had to scroll vertically, they would not have to
scroll horizontally.

TycoonUK- Skjul sitert tekst -

- Vis sitert tekst -
Hi

The answer is "no" - the drop downs did not work in ie7. I believe
you should check out the article I pointed out to you. The point of
drop downs is to put "hover" on li-elements, not a-elements. When you
put the code inside the a-element, everything inside becomes a link.
Not what you want.

Tor

Apr 7 '07 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: KK | last post by:
Drop-down menus are the hottest thing since Wonder Bread but . . . 1. Alot of people put them in the they-look-nice-but-you-cant-code-them-right-so-they-always-look-messed-up category (a la...
10
by: Haines Brown | last post by:
I've implemented the horizontal drop down menu discussed recently in this newsgroup, and it works nicely under Galeon and Mozilla, but not IE 5.0. Here are the problems: Under IE 5.0, the...
0
by: vikram.cvk | last post by:
Hello Experts, Im trying to design a CSS vertical drop down menu which should have the following functionality. Home About Us | -->Overview
2
by: hemanth.singamsetty | last post by:
Hello there, I've a drop down menu (created using CSS & Javascript -- see code below). My problem is, whenever I click a link on the menu the new page replaces the current page (and the menu...
4
by: simon.cigoj | last post by:
I have an javascript made menu and some forms with the dropdown element. When the menu opens and scrolls down the drop down is displeyed over the menu and obscures the menu choices. I have this...
1
by: phpnewb | last post by:
Hi, I know i'm doing it wrong, but I'm using a while loop right now to create several instances of a drop down menu. It gives me undesirable results. Can you tell me the right way to do it. Below are...
3
by: rsteph | last post by:
I have a javascript drop down menu that I borrowed from a website. It utilizes a little .css to help with formatting. The menu works great, and on all 3 of the browsers I'm concerned about; but I am...
1
by: Kaland | last post by:
Do the search engines follow links that are within forms (like the drop-down menu) so that those pages are indexed? Here is the code for a sample drop-down menu that I created. <form><select...
22
by: Archanak | last post by:
Hi, I am using 2-level CSS Drop Down Menu in my perl/CGI program. here is the code. #!c:/perl/bin/perl.exe use CGI qw(:standard);
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.