I have a site which produces rounded corners using a stacked <b> hack described below. The problem is that when the section text is shorter than the section logo on the left, there is a weird effect on the borders. You can see a working example in the top section (sites) and a broken on in the bottom section (News). The particular problem is the small black section that appears in the bottom left corner of the second sections text box. It should have a rounded corner like the one above, mostly obscured by the section title. Anyone seen this before? or have any idea what to do to fix it?

Hack: There are 7 layered <b>. The margins of these <b> increase from the inner to outer <b>'s giving the effect of a rounded corner.

Note:

  • happens to different degrees in both IE and Chrome. It is more pronounced in IE (used 6 for testing)
  • I think I know one thing you're doing wrong, but I can't tell because the link you provided no longer works... Have you resolved this? Justin Hileman almost 7 years ago

2 answers

Mottie 1134
1
point

I know you said your border system is working 99% of the time, but take a look at the CSS Play site. The rounded borders on this site work in IE6 using <b> instead of <div>:

Answered almost 7 years ago by Mottie
  • haha, that looks like where I got the code from originally. css selector names match and everything. I am infact using <b> insted of <div>. Andy Lumb almost 7 years ago
0
points

I hate to say this, but I've used the layered DIV rounded corners thing. In fact, I'm using it right now for a site. But I'm only using one on one web page. It's semantically a nightmare, and you really should not use it; breaks very easily.

You might want to try this.

Answered almost 7 years ago by tahdhaze09
  • colors are not set, so I'd prefer a solution that doesn't use images. Andy Lumb almost 7 years ago
  • Without images, it takes a lot more code to build. If you don't include the IE users, you could use -webkit or -moz rounded corners. All of the imageless techniques are pretty much the same as what you already have: some nested divs and some CSS. tahdhaze09 almost 7 years ago
  • Here's an example image-free solution (that excludes old browsers): http://www.schillmania.com/content/entries/2009/css3-and-the-future/ Doug almost 7 years ago
  • well... I'm not really asking for a different solution... the one I'm using works 99% of the time, there is just a weird edge case when the text box is smaller than the title.... Andy Lumb almost 7 years ago