Any CSS Gurus Out There?

This may not be the best place to ask, but I thought I’d give it a try. I have a vertical CSS menu that I’m trying to implement on my site. It’s working fine, but I want to round the corners at the top and bottom of the menu. I have created two images to accomplish this: one for the top and one for the bottom. I’ve been pulling my hair out and I can’t figure out how to add these images in CSS so they appear properly in IE and FireFox. I tried using span tags (as you can see in the first two elements), and this worked in FF, but didn’t line up properly in IE. If anyone could help, I’d really appreciate it. I’m sure it’s something really simple. Here’s my code so far:

```php #menu11 span {

background: url(/images/toptitle.gif) no-repeat;


#menu11 span.bottom {

background: url(/images/bottom.gif) no-repeat;


#menu11 {

width: 150px;

border-style: solid solid none solid;

border-color: #889944;

border-size: 0px;

border-width: 0px;


#menu11 li a {

height: 32px;

voice-family: “"}"”;

voice-family: inherit;

height: 24px;

text-decoration: none;



#menu11 li a:link, #menu11 li a:visited {

color: #FFFFFF;


display: block;

background: url(/images/menu11.gif);

padding: 8px 0 0 25px;


#menu11 li a:hover {

color: #889944;

background: url(/images/menu11.gif) 0 -32px;

padding: 8px 0 0 27px;


#menu11 #current a, #menu11 #current span{

color: #889944;

background: url(/images/menu11.gif) 0 -32px;

padding: 8px 0 0 27px;


ul.nav {

list-style: none;

margin: 0;

padding: 0;


img {

border: none;

} ```

This works fine now as it stands, but I want to make it look better with the top and bottom images. Thanks!

I can’t help you specifically, but I can get you on the right track.

This is a problem with the differences in css rendering between different browsers, so you need to make accomodations for IE.

Do a google search on css IE positioning hacks or css IE hacks.

Try something like this as an example but just change to fit your needs.

the XHTML:


Here be content!


the CSS:
```php .roundedCornerSpacer {
margin: 0px; padding: 0px; border: 0px;
clear: both;
font-size: 1px; line-height: 1px;

In the CSS below, the numbers used are the following:
1px: the width of the border
3px: a fudge factor needed for IE5/win (see below)
4px: the width of the border (1px) plus the 3px IE5/win fudge factor
14px: the width or height of the border image
.borderTL, .borderTR, .borderBL, .borderBR {
width: 14px; height: 14px;
padding: 0px; border: 0px;
z-index: 99;
.borderTL, .borderBL { float: left; clear: both; }
.borderTR, .borderBR { float: right; clear: right; }
.borderTL { margin: -1px 0px 0px -1px; }
.borderTR { margin: -1px -1px 0px 0px; }
.borderBL { margin: -14px 0px 0px 0px; }
.borderBR { margin: -14px 0px 0px 0px; }
/* IE5-5.5/win needs the border scooted to the left or right by an
additional 3px! Why? */
.borderTL {
margin-left: -4px;
ma\rgin-left: -1px;
html>body .borderTL {
margin-left: -1px;
.borderTR {
margin-right: -4px;
ma\rgin-right: -1px;
html>body .borderTR {
margin-right: -1px;
.borderBL {
margin-left: -3px;
ma\rgin-left: 0px;
html>body .borderBL {
margin-left: 0px;
.borderBR {
margin-right: -3px;
ma\rgin-right: 0px;
html>body .borderBR {
margin-right: 0px;
} ```/* To get around a known bug in IE5/win, apply the
border (no margin, padding or positioning) to the
content class and apply whatever positioning you
want to the contentWrapper class. */

```php .content {
margin: 0px;
padding: 0px;
border: 1px solid #000000;
.contentWrapper {
/* position this div however you want, but
keep its padding and border at zero */
padding: 0px;
border: 0px;
} ```