How can I better this code for grid with images/border?

As first think, please don't answer with "use border-radius + css3pie or jquery plugins" : I know there is other way to do this with css3, but I don't mind.

This is my whole code :

.menu_books_top-bottom { width:171px; height:7px; background-color:#76614C; float:left;}
.menu_books_center { width:155px; background-color:#76614C; padding:10px 15px 10px 15px; float:left;}
.menu_books_top-left {width:7px; height:7px; background-image:url(../images/borders/menu_books_top-left.png); float:left;}
.menu_books_top-right {width:7px; height:7px; background-image:url(../images/borders/menu_books_top-right.png); float:left;}
.menu_books_bottom-right {width:7px; height:7px; b开发者_开发百科ackground-image:url(../images/borders/menu_books_bottom-right.png); float:left;}
.menu_books_bottom-left {width:7px; height:7px; background-image:url(../images/borders/menu_books_bottom-left.png); float:left;}

<div class="menu_books_top-left">&nbsp;</div>
<div class="menu_books_top-bottom">&nbsp;</div>
<div class="menu_books_top-right">&nbsp;</div>                  
<div class="menu_books_center">
    Content
</div>
<div class="menu_books_bottom-left">&nbsp;</div>
<div class="menu_books_top-bottom">&nbsp;</div>
<div class="menu_books_bottom-right">&nbsp;</div>

But as you can see, it doesnt looks so good! There are other way to do the same? Or can I better this code (such as classic method)?

Here you can find an example. (Red=image with the border)

---

Considering that I know you need IE6 support, what you have seems reasonable.

I reorganized it and cleaned it up somewhat.

See: http://jsfiddle.net/5wzC2/

I also made sure it looks the same in modern browsers and IE6.

• I changed the divs to spans (as in @SirB's answer).
• I removed the  s, and added line-height:0; font-size:0 to fix IE6.
• I added a corner class to remove all the dupes of width:10px; height:10px; float:left.
• I removed some instances of the phrase menu_books from the HTML.
• I changed background-image to just background, which works here and is slightly shorter.

So yeah, just a bunch of pedantic changes.

---

You could write it such as how I have written in below. Which will avoid having divitus.

<div class="content">
    <span class="menu_books_top-left">&nbsp;</span>
    <span class="menu_books_top-bottom">&nbsp;</span>
    <span class="menu_books_top-right">&nbsp;</span>                    
    <span class="menu_books_center">
        Main
    </span><!-- content here -->        
    <span class="menu_books_bottom-left">&nbsp;</span>
    <span class="menu_books_top-bottom">&nbsp;</span>
    <span class="menu_books_bottom-right">&nbsp;</span>
</div><!-- end of .content -->

---

you don't need the top-bottom dive. The way you can do it is create 4 images that have the four rounded corners in them. Make them larger than you actually need and align them to their respected corners. This doesn't add very much weight to the page (if any) because generally they are two colors and you can use a gif.

<div class="menu_books_top-left"> </div>
<div class="menu_books_top-right"> </div>                  
<div class="menu_books_center">
    Content
</div>
<div class="menu_books_bottom-left"> </div>
<div class="menu_books_bottom-right"> </div>