Unordered list with gradient round corner footer and left right borders

Get Started
1

I have this site that I’m slicing into HTML and CSS, the designer has really served me up with a pickle and I’m not sure how to solve this one. At the bottom I have attached an image of the design which show the difficulties I’m facing. This is a corporate website and it needs to match design down to IE6.

What I’m dealing with is a collapsible side menu that has a rounded corner gradient footer, and the gradient extends under the list items. This menu also has a border on the left and right side but I can’t put the border on the list items because they have their own bottom border that can not touch the left and right parent border, so they need margins on the right and left sides.

Normally this would be easily solved with DD_roundies but because this design has a border I have no idea how to get it to look right in IE8 (background always appears 1px down and to the left in designs with borders).

I don’t have any mark-up to show at the moment because I’m not sure how to go about this, the only thing I can come up with is using a background png image to achieve the bottom border on the list items and then use padding instead of a margin so I can then used left and right borders on the list items.

Input would be much appreciated, I would love to see how other people would solve this problem.

2

The submenu is a ul, the ul is a block, the block can hold the background image.

Or if there’s really a radical difference in the average height of the submenus, you could use two sandbags to cover top and bottom while the ul just holds the side borders and white background.

http://stommepoes.nl/menubg.png Here just the ul has this background image set to 0 100% (so always at the bottom) and needs to be as tall as the tallest submenu (unless, again, some sandbag holds that bg image and the ul just holds sideborders, which is certainly more flexible).

The li’s just sit inside, hold the bullet and the bottom border. You can use padding on the ul to stop the li’s borders from stretching all the way across.

The limitation here is the width of the sub menu, but maybe you’ve already decided a set width?

Here’s some markup example with two sandbags:


<ul id="main">
  <li><a href="somewhere">Main Item 1</a>
    <ul>
        <span class="topcap"></span>
        <li><a href="something">List subitem 1</a></li>
        <li><a href="something">List subitem 2</a></li>
        <li><a href="something">List subitem 3</a></li>
        <li><a href="something">List subitem 4</a></li>
        <li><a href="something">List subitem 5</a></li>
        <span class="bottomcap"></span>
    </ul>
  </li>
  <li><a href="somewhere">Main Item 2</a></li>
</ul>

Since the two funny buttons I see on the top aren’t going to do anything no matter how much CSS you use, they aren’t in the markup. They look like they will do Javascripty hoozawhatsits, so let Javascript find span class=“topcap” (who is holding the entire grey part on the top of your image) and add in two anchors that DoStuff onclick.

sub ul and friends CSS:


#main ul {
  position: absolute;
  top: 0; <--or whatever
  left: 0; <-- try margin for IE6/7 see if that works better
  margin-left: -999em;
  width: whatever; <-- this plus sidepadding needs to match width of bg image
  padding: side padding, whatever top and bottom padding you want;
  background: url(somemiddleimage.png) 0 0 repeat-y; <--this image has the gradient, but not the bottom curves
}

#main li:hover ul {
  margin-left: 0;
}
/*all spans*/
#main ul span {
  position: absolute;
  left: 0;
  width: width of sub ul plus its padding... so, total width of sub ul;
  height: height of top cap background image;
  background: url(topcap.png) 0 0 no-repeat;
}
#main ul span.topcap {
  top: 0; <--or wherever is good
}
#main ul span.bottomcap {
  bottom: -5px (must be a hair lower than the bottom of the ul to cover the ul's sideborders);
  height: height of bottom curves image;
  background-image: url(bottomcap.png);
}

#main ul li {
  override whatever #main li styles you have... add in your borders and bullet images here
}

I am assuming you’ll have some JS for IE6.

This is a corporate website and it needs to match design down to IE6.

They need to be charged extra for this.