IE6 is acting up - again!

CloudedVision · #1 (**permalink**) Jul 2nd, 2008, 19:55

Just recently I've started using lists for my menus. They are lovely, very organized things. Unfortunately, IE6 does not like them. Every time I try to do a horizontal menu, each item stretches the length of the page and piles on top of one another. The verticle menus decide to get a margin of 100px or so. Please, help me with the these errors! You can see them at http://dev.wicec.org/website/

moojoo · #2 (**permalink**) Jul 2nd, 2008, 21:07

Just so happens I built a menu to do just what you are doing the other day and it works in IE 6, 7, FF, Safari etc... does need csshover.htc for IE 6 only. I also wrote one up that is a right side menu with left side flyouts if you need it.

IE Conditional

Code: Select all

<link href="includes/css/ie.css" type="text/css" rel="stylesheet" media="screen" />
<style type="text/css">
body { behavior:url(includes/htc/csshover.htc); }
</style>
<![endif]-->

HTML:

Code: Select all

                <ul id="vMenuList">
                    <li><a href="#vMenu">Menu Item 1</a></li>
                    <li class="hasFLyout"><a href="#vMenu">Menu Item 2</a>
                        <ul>
                            <li><a href="">Flyout Sub Menu</a></li>
                            <li><a href="">Flyout Sub Menu</a></li>
                            <li><a href="">Flyout Sub Menu</a></li>
                            <li><a href="">Flyout Sub Menu</a></li>
                        </ul>
                    </li>
                    <!-- flyout menu -->
                    <li class="hasFLyout"><a href="#vMenu">Menu Item 4</a>
                        <ul>
                            <li><a href="">Flyout Sub Menu</a></li>
                            <li><a href="">Flyout Sub Menu</a></li>
                            <li><a href="">Flyout Sub Menu</a></li>
                            <li><a href="">Flyout Sub Menu</a></li>
                        </ul>
                    </li>
                    <!-- flyout menu -->
                    <li><a href="#vMenu">Menu Item 4</a></li>
                </ul>
            <!-- end Left Column Vertical Menu With Horizontal Flyout -->

css:

Code: Select all

/* vertical menu system w/horizontal flyout right */
/* NO IE 7 Overrides Required */
ul#vMenuList {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 200px;
    border: solid #333333;
    border-width: 1px 0 0 0;
}

ul#vMenuList li {
    border: solid #333333;
    border-width: 0 1px 1px 1px;
}

ul#vMenuList li a { /* IE 6 - Override required */
    padding: 8px;
    color: #993300;
    text-decoration: none;
    font-weight: bold;
    display: block;
}

ul#vMenuList li a:hover {
    color: #FFF;
    background: #993300;
}

ul#vMenuList li.hasFLyout a {
    background: url(../../images/burnt_orange_arrow.gif) no-repeat right center;
}

ul#vMenuList li.hasFLyout a:hover {
    color: #FFF;
    background: #993300 url(../../images/white_arrow.gif) no-repeat right center;
}

ul#vMenuList li.hasFLyout ul li a {
    background: #FFF;
}

ul#vMenuList li.hasFLyout ul li a:hover {
    background: #993300;
}

ul#vMenuList li ul {
    display: none;
    padding: 0;
    margin: 0;
    list-style: none;
    border: solid #333333;
    border-width: 1px 0 0 0;
    background: #FFF;
}

IE 6 Specific CSS:

Code: Select all

ul#vMenuList li a {
padding:8px;
color:#993300;
text-decoration:none;
font-weight:bold;
display:block;
width:182px;
}

CloudedVision · #3 (**permalink**) Jul 2nd, 2008, 21:38

Thanks Moojoo, I'll look over that code and see what I can do.

moojoo · #4 (**permalink**) Jul 2nd, 2008, 21:41

Here is a screen shot of how it works and looks.. Same results in IE 6 etc. nothing fancy just a functional snippet for my personal library.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
FieldSets not acting right in Mozilla	erikkl2000	Web Page Design	6	Jan 16th, 2007 17:10

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
IE6 is acting up - again!