CSS Drop Down Menu in IE7

[TycoonUK]

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:visi ble;
}

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

..menu ul :hover ul ul{
visibility:hidd en;
}

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

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

..menu ul :hover ul :hover ul{
visibility:visi ble;
}

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

..menu ul :hover ul :hover ul :hover ul {
visibility:visi ble;
}
--------------------------

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="#">Origin al 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="#">Bristo l</a></li>
<li><a href="#">Cambri dge</a></li>
<li><a class="drop" href="#">Nottin gham<!--[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="#">Northe rn Ireland</a></li>
<li><a href="#">Scotla nd</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="#">Origin al 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="#">Toulou sse</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="#">German y<!--[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="#">Hambur g</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="#">Argent ina</a></li>
<li><a class="drop" href="#">Austra lia<!--[if IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td ><![endif]-->
<ul>
<li><a class="drop" href="#">Austra lian 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="#">Region als/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">Orig inal Board</a></li>
<li><a href="#">Starsh ip 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="#">Cartoo ns<!--[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="#">Pokemo n<!--[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="#">Powerp uff 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="#">Origin al - 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="#">Spider man</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="#">Americ an
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="#">Footba ll
(Soccer)<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td ><![endif]-->
<ul>
<li><a href="#">Arsena l</a></li>
<li><a href="#">Chelse a</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="#">Florid a 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="#">Fishin g</a></li>
<li><a href="#">Nation al Hockey League
(NHL)</a></li>
<li><a href="#">Snowbo arding</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.worldofmono poly.co.uk/blog/blogger.html"
target="_blank" >Blog</a></li>
<li><a
href="http://www.worldofmono poly.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 -->

[Jukka K. Korpela]

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/

[torbs]

On 7 Apr, 08:17, "Jukka K. Korpela" <[e-mail] t.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

[TycoonUK]

On Sat, 7 Apr 2007 09:17:13 +0300, "Jukka K. Korpela"
<jk******@cs.tu t.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

[torbs]

On 7 Apr, 23:22, TycoonUK <tycoo...@hotma ilnospam.comwro te:

On Sat, 7 Apr 2007 09:17:13 +0300, "Jukka K. Korpela"

<[e-mail] t.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