How do I revert a CSS box?

Hi, please take a look at this image:

http://img180.imageshack.us/img180/8136/sduk9.jpg

How do I revert it?

This is my HTML:

<!-- Message Box -->

<div class="m_topleft">
<div class="m_topright">
<div class="m_topmid">
</div>
</div>
</div>
<div class="m_left">
<div class="m_right">
<div class="m_mid">
<div class="m_content">
<!-- Begin content -->

My content....

<!-- End content -->
</div>
</div>
</div>
</div>
<div class="m_bottomleft">
<div class="m_bottomright">
<div class="m_bottommid">
</div>
</div>
</div>
<!-- / Message Box -->

..and this is my CSS:

/* Message Box */

.m_topleft {
background: url(skin/message/b_01.gif) top left no-repeat;
}
.m_topright {
background: url(skin/message/b_03.gif) top right no-repeat;
padding: 0px 20px 0px 28px;
/* The first and third should be 0px, the second is the width
of the top right corner image and the fourth is the width
of the top left corner image */
}
.m_topmid {
background: url(skin/message/b_02.gif) top right repeat-x;
height: 17px; /* This height must be the height of the background image used */
}
.m_left {
background: url(skin/message/b_04.gif) top left repeat-y;
}
.m_right {
background: url(skin/message/b_06.gif) top right repeat-y;
margin-right: 2px;
padding: 0px 18px 0px 0px;
/* The first and third should be 0px, the second is the width
of the right border image and the fourth is the width
of the left border image */
}
.m_mid {
background: url(skin/message/b_05.gif) top left no-repeat;
padding-left: 28px;
}
.m_content {
background-color: #FFFFFF;
}

.m_bottomleft {
background: url(skin/message/b_07.gif) top left no-repeat;
}
.m_bottomright {
background: url(skin/message/b_09.gif) top right no-repeat;
padding: 0px 20px 0px 28px;
/* The first and third should be 0px, the second is the width
of the bottom right corner image and the fourth is the width
of the bottom left corner image */
}
.m_bottommid {
background: url(skin/message/b_08.gif) top right repeat-x;
height: 17px; /* This height must be the height of the background image used */
}

/* Message Box End */

Can you help me, please?

You know, we can’t see at all what the image b_05.gif, or b_02.gif, or any of those images actually display. You need to show us a live example and/or give your images some more descriptive names (but I guess you didn't create that anyway and are just copying and pasting it).

What I can tell you is that you can’t mirror a graphic with CSS, you need to create a new one (i.e. mirror the image in a graphic editor) and apply it accordingly. If you apply an outline to the elements you see where they are and where to apply the image to.

Thank you for your reply, VIPStephan.
Here my forum (message's box): http://www.web-city.it/forum/showthread.php?t=3087.
Ok, after creating a new *reverted* image (this (http://www.web-city.it/forum/skin/message/b_05.gif)), how do I revert that CSS code?

i.e. mirror the image in a graphic editor

This FREE Faststone viewer will do all that you need.

http://www.faststone.org/

Frank

I have Photoshop! :)
Anyway, thank you for you link, effpeetee.
How do I revert that CSS?

Please explain what you mean by revert.

revert - go back to a previous state - according to the dictionary.


I too have Photoshop, but for quick re-sizing and inverting images, I find Faststone much quicker to use and totally satisfactory.

Frank

http://www.faststone.org/FSViewerDetail.htm