Forum Index | Search | Register (New User) | Login (Existing User) | Who's Online | FAQ | Main Site

Technical Discussion
  >> Web Design / HTML / Web hosting Forum Previous thread View all threads Next thread


Register (or login) on our website and you will not see this ad.


Pages in this thread: 1 | [2] | (show all)   Print Thread
Standard User cheshire_man
(knowledge is power) Sun 11-Dec-11 13:47:40
Print Post

Re: Drop down menu problem


[re: camieabz] [link to this post] 		 
Thank you sir, FWIW this is the complete HTML page

Text
1
23
45
67
89
1011
1213
1415
1617
1819
2021
2223
2425
2627
2829
3031
3233
3435
3637
3839
4041
4243
4445
4647
4849
5051
5253
5455
5657
5859
6061
6263
6465
6667
6869
7071
7273
7475
7677
7879
80
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head><body>
        <style>                ul {
                        font-family: Arial, Verdana;                        font-size: 14px;
                        margin: 0;                        padding: 0;
                        list-style: none;                }
                ul li {                        display: block;
                        position: relative;                        float: left;
                }                li ul { display: none; }
                ul li a {                        display: block;
                        text-decoration: none;                        color: #ffffff;
                        border-top: 1px solid #ffffff;                        padding: 5px 15px 5px 15px;
                        background: #2C5463;                        margin-left: 1px;
                        white-space: nowrap;                }
                ul li a:hover { background: #617F8A; }                li:hover ul {
                        display: block;                        position: absolute;
                }                li:hover li {
                        float: none;                        font-size: 11px;
                }                li:hover a { background: #617F8A; }
                li:hover li a:hover { background: #95A9B1; }                div.sh {
                        color:white;                        border-top: 1px solid #ffffff;
                        padding:5px 15px 5px 5px;                        margin-left: 1px;
                        background:#4C44C3;                }
        </style> 
        <ul id="menu">                <li><a href="">Home</a></li>
                <li><a href="">About Us</a>                        <ul>
                                <li><a href="">The Team</a></li>                                <li><a href="">History</a></li>
                                <li><div class="sh">Sub heading</div></li>                                <li><a href="">Vision</a></li>
                </ul>                </li>
                <li><a href="">Products</a>                        <ul>
                                <li><a href="">Cozy Couch</a></li>                                <li><a href="">Great Table</a></li>
                                <li><a href="">Small Chair</a></li>                                <li><a href="">Shiny Shelf</a></li>
                                <li><a href="">Invisible Nothing</a></li>                        </ul>
                </li>                <li><a href="">Contact</a>
                        <ul>                                <li><a href="">Online</a></li>
                                <li><a href="">Right Here</a></li>                                <li><a href="">Somewhere Else</a></li>
                        </ul>                </li>
        </ul></body>
</html>

Reading the comments below the code posted on the source site it's clear it's the IE implementation of 'hover'. Forcing non-quirks mode is undesirable. The 'inherit' solution doesn't work, and the Suckerfish solution indirectly referred to in the comments I don't like.

I'm currently looking at Jquery menu options, I already use that elsewhere on the site, however if I can get this to work on IE8 it'll do me.

Tony
Standard User camieabz
(sensei) Sun 11-Dec-11 17:07:46
Print Post

Re: Drop down menu problem


[re: cheshire_man] [link to this post] 		 
Well I've tidied the code slightly, in that the style is inline and the DTD is more appropriate (as far as I know).

Sometimes the DTD can make or break a page and it goes into quirks mode. Unless I'm mistaken you'll probably need to use alternative code for tabling the data for IE (but that might be IE6/7). Will fiddle some more.


Text
1
23
45
67
89
1011
1213
1415
1617
1819
2021
2223
2425
2627
2829
3031
3233
3435
3637
3839
4041
4243
4445
4647
4849
5051
5253
5455
5657
5859
6061

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
         <title>Untitled Document</title>
         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
         <style type="text/css">
 ul {font-family: Arial, Verdana; font-size: 14px; margin: 0;padding: 0;list-style: none;}
ul li {display: block; position: relative;  float: left;}li ul { display: none; }
ul li a {  display: block; text-decoration: none;  color: #ffffff; border-top: 1px solid #ffffff;  padding: 5px 15px 5px 15px; background: #2C5463;  margin-left: 1px; white-space: nowrap; }ul li a:hover { background: #617F8A; }
li:hover ul {display: block;  position: absolute;}li:hover li { float: none;  font-size: 11px;}
li:hover a { background: #617F8A; }li:hover li a:hover { background: #95A9B1; }
div.sh {color:white;  border-top: 1px solid #ffffff;padding:5px 15px 5px 5px;  margin-left: 1px;background:#4C44C3; } 
        </style>  
 </head>
 <body>
         <ul id="menu">
                <li><a href="">Home</a></li>                <li><a href="">About Us</a>
                        <ul>                                <li><a href="">The Team</a></li>
                                <li><a href="">History</a></li>                                <li><div class="sh">Sub heading</div></li>
                                <li><a href="">Vision</a></li>                        </ul>
                </li>                <li><a href="">Products</a>
                        <ul>                                <li><a href="">Cozy Couch</a></li>
                                <li><a href="">Great Table</a></li>                                <li><a href="">Small Chair</a></li>
                                <li><a href="">Shiny Shelf</a></li>                                <li><a href="">Invisible Nothing</a></li>
                        </ul>                </li>
                <li><a href="">Contact</a>                        <ul>
                                <li><a href="">Online</a></li>                                <li><a href="">Right Here</a></li>
                                <li><a href="">Somewhere Else</a></li>                        </ul>
                </li>        </ul>
 </body>
 </html>


~~~~~~~~~~


© Camieabz 2002-2011

All Connection Data ~ plusnet

Scottish Labour politician: �The SNP are on a very dangerous tack. What they are doing is trying to build up a situation in Scotland where the services are manifestly better than south of the border in a number of areas.�

Interviewer: �Is that a bad thing?�

Scottish Labour politician: �No, but they are doing it deliberately.�
Standard User camieabz
(sensei) Sun 11-Dec-11 17:37:50
Print Post

Re: Drop down menu problem


[re: cheshire_man] [link to this post] 		 
In fact the DTD you have chosen might be invoking quirks mode which is the problem. The only difference I see between your version and my version (DTD-wise) is that IE9 here shows quirks mode as the document default for your version, while my version defaults to IE 9 standards mode.

IMHO I would be looking at a more up to date DTD anyway. I tend to use xhtml 1.1, but am starting to consider HTML 5. I haven't seen any reason not to yet, but there will be reasons. Assuming you're gearing the code for IE8 as the oldest IE browser, xhtml 1.1 is fine. You might need to learn a few small changes in coding practice, but they are habitual, rather than taxing.

~~~~~~~~~~


© Camieabz 2002-2011

All Connection Data ~ plusnet

Scottish Labour politician: �The SNP are on a very dangerous tack. What they are doing is trying to build up a situation in Scotland where the services are manifestly better than south of the border in a number of areas.�

Interviewer: �Is that a bad thing?�

Scottish Labour politician: �No, but they are doing it deliberately.�

Edited by camieabz (Sun 11-Dec-11 17:38:28)


Register (or login) on our website and you will not see this ad.

Standard User cheshire_man
(knowledge is power) Mon 02-Jan-12 18:18:25
Print Post

Re: Drop down menu problem


[re: camieabz] [link to this post] 		 
Just to update this and close it down.

Firstly to thank all for their contributions. It's always useful to see alternative approaches, it also helps me to understand the pros and cons.

In the end I went for SmartMenus - I'd used an earlier version some years ago and found it effective but, to be honest, I'd forgotten about it until recently. Although it is strictly commercial my usage qualifies under the Non-commercial (i.e. Free) Licence terms so that was useful. And quick support from the author in Bulgaria for a couple of minor implementation queries smile.

Tony
Pages in this thread: 1 | [2] | (show all)   Print Thread

Previous thread View all threads Next thread
Jump to