Developing (v7+)

CSS Question

Permalink December 08, 2011 at 4:59 PM

I have bult the following CSS code. It creates a menu with rounded corners when links are hovered over. However when it hovers the hover background with rounded corners does not go with width of the container box it is in. It is driving my crazy! Any suggestions would be very welcome. If you want to see this in action, go tohttp://www.healthydrybasements.com/our-solutions... - it is only on that page for now, it is the left upper nav.

.rs-vertical
        {
        background-color: #a3d6ff;
        border-radius: 15px;
        -moz-border-radius: 14px;
        border: solid black 1px;
        padding-top:10px;
        padding-left:5px;
        padding-right:5px;
        padding-bottom:10px;
        margin-bottom: 20px;}
.rs-vertical li {
        width:  10em;
        max-width:250px;
        padding-top:10px;

Viewing 15 lines of 74 lines. View entire code block.

 
 
.rs-vertical
        {
        background-color: #a3d6ff;
        border-radius: 15px;
        -moz-border-radius: 14px;
        border: solid black 1px;
        padding-top:10px;
        padding-left:5px;
        padding-right:5px;
        padding-bottom:10px;
        margin-bottom: 20px;}
 
.rs-vertical li {
        width:  10em;
        max-width:250px;
        padding-top:10px;
        padding-left:5px;
        padding-right:5px;
        padding-bottom:10px;
        font-style:normal;
}
 
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.rs-vertical li:hover ul,
.rs-vertical li.sfHover ul {
        left:   8em; /* match ul width */
        top:    0;
        border-radius: 15px;
        background-color: #c3d6ff;
        -moz-border-radius: 15px;
        padding-top:10px;
        min-width:350px;
        padding-left:5px;p
        padding-right:5px;p
        padding-bottom:10px;
        font-style:normal;
        font-size:12px;
}
 
.rs-vertical a:hover {
        left:   10em; /* match ul width */
        top:    0;
        min-height:50px;
        min-width:350px;
        border-radius: 15px;
 
        background-color: #c3d6ff;
        -moz-border-radius: 15px;
        min-with:250px;
        font-style:normal;
        font-size:12px;
        padding-top:10px;
        padding-left:5px;
        padding-right:5px;
        padding-bottom:10px;
}
.rs-vertical a {
        left:   10em; /* match ul width */
        top:    0;
        font-style:normal;
        font-size:12px;
        min-height:50px;
        padding-top:10px;
        padding-left:5px;
        padding-right:5px;
        padding-bottom:10px;
}
/*** alter arrow directions ***/
.rs-vertical .sf-sub-indicator { background-position: -10px 0; } /* IE6 gets solid image only */
.rs-vertical a > .sf-sub-indicator { background-position: 0 0; } /* use translucent arrow for modern browsers*/
 
/* hover arrow direction for modern browsers*/
.rs-vertical a:focus > .sf-sub-indicator,
.rs-vertical a:hover > .sf-sub-indicator,
.rs-vertical a:active > .sf-sub-indicator,
.rs-vertical li:hover > a > .sf-sub-indicator,
.rs-vertical li.sfHover > a > .sf-sub-indicator {
        background-position: -10px 0; /* arrow hovers for modern browsers*/
}

tallacman replied on Dec 8, 2011 at 6:40 pm Permalink Reply

I think you want something like this:

/* @overridehttp://www.healthydrybasements.com/index.php/tools/css/themes/healt... */
/*** adding rs-vertical in addition to sf-menu creates a vertical menu ***/
.rs-vertical
   {
   background-color: #a3d6ff;
        border-radius: 15px;
        -moz-border-radius: 14px;
   border: solid black 1px;
   padding-top:10px;
   padding-left:5px;
   padding-right:5px;
   padding-bottom:10px;
   margin-bottom: 20px;}
.rs-vertical li {
   width:   10em;

Viewing 15 lines of 64 lines. View entire code block.

 
 
 
/* @overridehttp://www.healthydrybasements.com/index.php/tools/css/themes/healt... */
 
/*** adding rs-vertical in addition to sf-menu creates a vertical menu ***/
.rs-vertical
   {
   background-color: #a3d6ff;
        border-radius: 15px;
        -moz-border-radius: 14px;
   border: solid black 1px;
   padding-top:10px;
   padding-left:5px;
   padding-right:5px;
   padding-bottom:10px;
   margin-bottom: 20px;}
 
.rs-vertical li {
   width:   10em;
        max-width:250px;
   padding-top:10px;
   padding-left:5px;
   padding-right:5px;
   padding-bottom:10px;
   font-style:normal;
}
 
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.rs-vertical li:hover ul, 
.rs-vertical li.sfHover ul {
   top:   0;
    border-radius: 15px;
   background-color: #c3d6ff;
    -moz-border-radius: 15px;
   padding-top:10px;
   padding-left:5px;
   padding-right:5px;
   padding-bottom:10px;
   font-style:normal;
   font-size:12px;
}
 
 
.rs-vertical a { /* match ul width */
   top:   0;
   font-style:normal;
   font-size:12px;
   display: block;
   padding: 5px;
}
.rs-vertical a:hover {
   top: 0;
   background-color: #c3d6ff;
   font-style:normal;
 
}
.rs-vertical h3{
   display: block;
   padding: 0;
   margin: 0;
}
/*** alter arrow directions ***/
.rs-vertical .sf-sub-indicator { background-position: -10px 0; } /* IE6 gets solid image only */
.rs-vertical a > .sf-sub-indicator { background-position: 0 0; } /* use translucent arrow for modern browsers*/
 
/* hover arrow direction for modern browsers*/
.rs-vertical a:focus > .sf-sub-indicator,
.rs-vertical a:hover > .sf-sub-indicator,
.rs-vertical a:active > .sf-sub-indicator,
.rs-vertical li:hover > a > .sf-sub-indicator,
.rs-vertical li.sfHover > a > .sf-sub-indicator {
   background-position: -10px 0; /* arrow hovers for modern browsers*/
}

display the a as a block so it fills the li.
since you have h3's in there I've zeroed out their inherited padding and margins.
you have a lot of redundant code in there as well and conflicting min-widths on the same object.

steve

tallacman replied on Dec 8, 2011 at 6:41 pm Permalink Reply

I think you want something like this:

/* @overridehttp://www.healthydrybasements.com/index.php/tools/css/themes/healt... */
/*** adding rs-vertical in addition to sf-menu creates a vertical menu ***/
.rs-vertical
   {
   background-color: #a3d6ff;
        border-radius: 15px;
        -moz-border-radius: 14px;
   border: solid black 1px;
   padding-top:10px;
   padding-left:5px;
   padding-right:5px;
   padding-bottom:10px;
   margin-bottom: 20px;}
.rs-vertical li {
   width:   10em;

Viewing 15 lines of 64 lines. View entire code block.

 
 
 
/* @overridehttp://www.healthydrybasements.com/index.php/tools/css/themes/healt... */
 
/*** adding rs-vertical in addition to sf-menu creates a vertical menu ***/
.rs-vertical
   {
   background-color: #a3d6ff;
        border-radius: 15px;
        -moz-border-radius: 14px;
   border: solid black 1px;
   padding-top:10px;
   padding-left:5px;
   padding-right:5px;
   padding-bottom:10px;
   margin-bottom: 20px;}
 
.rs-vertical li {
   width:   10em;
        max-width:250px;
   padding-top:10px;
   padding-left:5px;
   padding-right:5px;
   padding-bottom:10px;
   font-style:normal;
}
 
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.rs-vertical li:hover ul, 
.rs-vertical li.sfHover ul {
   top:   0;
    border-radius: 15px;
   background-color: #c3d6ff;
    -moz-border-radius: 15px;
   padding-top:10px;
   padding-left:5px;
   padding-right:5px;
   padding-bottom:10px;
   font-style:normal;
   font-size:12px;
}
 
 
.rs-vertical a { /* match ul width */
   top:   0;
   font-style:normal;
   font-size:12px;
   display: block;
   padding: 5px;
}
.rs-vertical a:hover {
   top: 0;
   background-color: #c3d6ff;
   font-style:normal;
 
}
.rs-vertical h3{
   display: block;
   padding: 0;
   margin: 0;
}
/*** alter arrow directions ***/
.rs-vertical .sf-sub-indicator { background-position: -10px 0; } /* IE6 gets solid image only */
.rs-vertical a > .sf-sub-indicator { background-position: 0 0; } /* use translucent arrow for modern browsers*/
 
/* hover arrow direction for modern browsers*/
.rs-vertical a:focus > .sf-sub-indicator,
.rs-vertical a:hover > .sf-sub-indicator,
.rs-vertical a:active > .sf-sub-indicator,
.rs-vertical li:hover > a > .sf-sub-indicator,
.rs-vertical li.sfHover > a > .sf-sub-indicator {
   background-position: -10px 0; /* arrow hovers for modern browsers*/
}

Forums

Developing (v7+)

CSS Question

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?