1 reply [Last post]
idusidus
idusidus's picture
Offline
newbie
Last seen: 12 years 27 weeks ago
Timezone: GMT+2
Joined: 2010-07-21
Posts: 2
Points: 3

Hi

I’m quite new to the HTML_CSS and most of what i’ve learn already was self taught.

I’ve designed a website and it works totally fine with all major browsers except IE7. For some reason my vertical submenu (5 items) changed in 2 colums 3 left an 2 right)
Please can somebody help me with this issue?

Edit: I attach an image to show the diffrence…

/* menu::base */
div#menu {
        margin:470px 0 0 300px;
        position:absolute;
        height: 52px;
        padding-left: 6px;
        background: url(../images/left.png) no-repeat;
        _background: url(../images/left.gif) no-repeat;
        width:auto;
        z-index: 8;
}
 
div#menu ul {
 margin: 0;
 padding: 0;
 list-style: none;
 float: left;
}
 
div#menu ul.menu {
 padding-right: 6px;
 background: url(../images/right.png) no-repeat right 0;
 _background: url(../images/right.gif) no-repeat right 0;   
}
 
div#menu li {
 position: relative;
 margin: 0;
 padding: 0;
 display: block;
 float: left;
 z-index: 9;
 width: auto;
}
 
div#menu ul ul li {
 z-index: 9;
}
 
div#menu li div {
        list-style: none;
        float: left;
        position: absolute;
        z-index: 11;
        top: -0px;
        left: 0;
        visibility: hidden;
        width: 400px;
        padding: 0;
        background: url(../images/subsubmenu-top.png) no-repeat 0px 0;
        _background: url(../images/subsubmenu-top.gif) no-repeat 0px 0;
        height: auto;
        margin-top: -142px;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: -2px;
}
 
div#menu ul ul {
        z-index: 12;
 padding: 0px 4px 10px 4px;
 background: url(../images/submenu-bottom.png) no-repeat 0px bottom;
 _background: url(../images/submenu-bottom.gif) no-repeat 0px bottom;       
 margin: 10px 0 0 0;   
}
 
div#menu li:hover>div {
 visibility: visible;
}
 
div#menu a {
 position: relative;
 z-index: 10;
 height: 50px;
 display: block;
 float: left;
 line-height: 50px;
 text-decoration: none;
 margin-top: 1px;
 white-space: nowrap;
 width: auto;
 padding-right:5px;
 text-align:center;
}
 
div#menu span {
        margin-top: 2px;
        padding-left: 15px;
        color: #fff;
        background: none;
        line-height: 50px;
        display: block;
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: 95% 0;
        text-align: center;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 13px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
}
 
/* menu::level1 */
div#menu a {
        padding: 0 10px 0 0;
        line-height: 50px;
        height: 52px;
        margin-right: 5px;
        _margin-right: 1px;
        background: none;
        text-transform: none;
}
 
div#menu a:hover {
 background:  url(../images/selected-right-sub.png)  no-repeat right -1px;
}
 
div#menu a:hover span {
 background: url(../images/selected-left-sub.png) no-repeat 0 -3px;
}
 
div#menu li.current a,
div#menu ul.menu>li:hover>{
 background: url(../images/selected-right-sub.png)  no-repeat right -1px;
}
 
div#menu li.current a span,
div#menu ul.menu>li:hover>a span {
 background: url(../images/selected-left-sub.png) no-repeat 0 -3px;
}
 
div#menu ul.menu>li:hover>a span {
        color: #9C3;
}
div#menu li {  }
div#menu li.last { background: none; }
 
/* menu::level2 */
div#menu ul ul li {
 background: none;
 padding: 0;
}
 
div#menu ul ul a {
        padding: 0px;
        height: auto;
        float: none;
        display: block;
        line-height: 25px;
        font-size: 13px;
        color: #fff;
        z-index: -1;
        padding-left: 5px;
        white-space: normal;
        width: 136px;
        margin: 0 8px;
        text-transform: none;
}
 
div#menu ul ul a span {
        padding: 0 5px;
        line-height: 25px;
 font-size: 13px;
}
 
div#menu li.current ul a,
div#menu li.current ul a span {
 background:none;
}
 
div#menu ul ul a:hover {
        background:none;
        background-color: #092909;
}
 
div#menu ul ul a:hover span {
        background:none;
        color: #9C3
}
 
div#menu ul ul a.parent {
        background: url(../images/submenu-pointer.png) no-repeat right bottom;
        _background-image: url(../images/submenu-pointer-hover.gif);
}
 
div#menu ul ul a.parent span {
        background:none;
}
 
div#menu ul ul a.parent:hover {
        background: url(../images/submenu-pointer.png) no-repeat right bottom;
        _background: url(../images/submenu-pointer-hover.gif) no-repeat right bottom;
        background-color: #092909;
}
 
div#menu ul ul a.parent:hover span {
        background:none;
}
 
div#menu ul ul span {
       
 margin-top: 0;
 text-align: left;
}
 
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
 width: 100%;
}
 
/* lava lamp */
div#menu li.back {
 background: url(../images/selected-left-sub.png) no-repeat 0 0;
 width: 5px;
 height: 52px;
 z-index: 8;
 position: absolute;
 padding: 0;
 margin: 0px 0 0 0;
}
 
div#menu li.back .left {
 padding:0;
 width:auto;
 background: url(../images/selected-right-sub.png) no-repeat right 0;
 height: 52px;
 margin: 0 0 0 5px;
 float: none;
 position: relative;
 top: 0;
 left: 0;
 visibility: visible;
}

idusidus
idusidus's picture
Offline
newbie
Last seen: 12 years 27 weeks ago
Timezone: GMT+2
Joined: 2010-07-21
Posts: 2
Points: 3

Here by the example attach...

Here by the example attach...