2 replies [Last post]
deronsizemore
deronsizemore's picture
Offline
Enthusiast
Last seen: 10 years 5 weeks ago
Timezone: GMT-5
Joined: 2007-01-18
Posts: 113
Points: 14

Hi - I have a basic layout at http://www.oxtalk.com/

I have rounded corners on the bottom of the first content area and I'm attempting to have rounded corners on the top and bottom of the bottom content area. As you can see currently, the top corners are round on the bottom content area, but the bottom corners are still square. Originally the bottom corners were round and the top were square and I 'thought' all I needed to do to remedy this was to clear the #elements div which I have done (class="clearfix") but once I add the clearfix class to #elements, the rounded bottom corners disappeared and the top became rounded. If the .clearfix is added to #elements the top is rounded and if you remove .clearfix the bottom becomes rounded but not both at the same time. What am I doing wrong here?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 5 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

the inner div is 'covering'

the inner div is 'covering' the background image of it's containing div. Add a 10px bottom padding to #gradback and you'll see your bg.

deronsizemore
deronsizemore's picture
Offline
Enthusiast
Last seen: 10 years 5 weeks ago
Timezone: GMT-5
Joined: 2007-01-18
Posts: 113
Points: 14

Ahh, that worked. After you

Ahh, that worked. After you said that it made perfect sense. lol. I noticed too that I didn't even need to add the padding you suggested, all that really was needed was for me to remove the background color of #fff from #elements, that's what was covering the image. If I remove the background color the image shows or if I added the padding it shows, so I guess either way would work. Thanks for pointing that out. I had been changing code like crazy trying to figure it out but I guess it was just TO obvious. Smile