424,303 Members | 1,366 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,303 IT Pros & Developers. It's quick & easy.

CSS Drop Down Menu in IE7

P: n/a
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
Share this Question
Share on Google+
4 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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 discussion thread is closed

Replies have been disabled for this discussion.