It's late - I am baffled

ok, on this page:

There is a big white tabbed box. When you click on the nav buttons at the bottom, the background image changes. I want to round the bottom left corner on the first image to match the container, and the bottom right on the last nav button background to match the container. No matter what I do in the css I can not get it to apply the styling to those specific buttons only. Please help.

Thanks

On phone now so can’t see your CSS. I really like that effect though. You should just be able to give the left and right ones a dif id and feed them the two dif backgrounds right?

I wouldn’t worry too much about that CSS just yet. Looking at your page w/o JS it’s Weird Town all over the place.

It is a wordpress theme, and it uses a lot of JS, so, yeah, its gonna look strange without it. I just need to round those corners :slight_smile:

Hi,

I assume you want to use border-radius but you don’t seem to have anything applying to those elements if I’m looking at the right things.

You can’t use numbers to start classes anyway as its not allowed and won’t work (you have a class called 1 - you would need to call it .number1).

For good browsers who understand first and last child you could do this.


#nav ul li:first-child a{
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
}

#nav ul li:last-child,#nav ul li:last-child a {
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
}

For others you will need to add a class to the first and last elements.

That definitely works. I will try to add a class to the first & last element as well and see if I can get that to work for “bad” browsers, lol

You wouldn’t know how I can get rid of the gap between the nav and panes divs so it looks like 1 box…right now you can see a thin line of the background blue color through the gap & there is also a thin white line that extends down a bit on the bottom right (at the curve) of the last button - need that gone too

Sorry, I couldn’t see a blue line but I may be looking in the wrong place. Which browsers and exactly where am I looking?

Sorry, I forgot to mark this as resolved. I figured it out. Thanks for taking a look!

OK No worries - glad you sorted it :slight_smile: