How do I optimize this rounded corners code?

[Norman]

Hi guys. After some online test, I've seen that this code is really slow to charge in my web pages. I would like to optimize it, but I don't know how can I do it. I want the same effect below:This is my current code:

<div><!-- Message --><table cellspacing="0" cellpadding="0" border="0" style="width: auto;"><tr><td style="padding: 0px"><img src="skin/message/b_01.gif"></td><td style="padding: 0px" background="skin/message/b_02.gif" width="100%"></td><td style="padding: 0px"><img src="skin/message/b_03.gif"></td></tr><tr><td valign="top" style="padding: 0px" background="skin/message/b_04.gif"><img src="skin/message/b_05.gif"></td><td style="padding: 0px; background-color: #ffffff" bgcolor="#ffffff"  valign="top"><div id="post_message_$post[postid]">$post[message]</div><br /></td><td style="padding: 0px; height: 70px;" background="skin/message/b_06.gif"></td></tr><tr><td style="padding: 0px"><img src="skin/message/b_07.gif"></td><td style="padding: 0px" background="skin/message/b_08.gif" width="100%"></td><td style="padding: 0px"><img src="skin/message/b_09.gif"></td></tr></table><!-- / Message --></div>

[jlhaslip]

Nifty Cornershttp://www.html.it/articoli/nifty/index.html

[Norman]

I would like to use those images..

[Ingolme]

Well, using divs and CSS you can get quick loading round corners. But you MUST know the width and height of the images you're using. I'm afraid I can't assure you it will work out correctly because you need to base the code on the size of the images, but try this:HTML code:

<div class="topleft">   <div class="topright">      <div class="topmid">      </div>   </div></div><div class="left">   <div class="right">      <div class="mid">      </div>   </div></div><div class="bottomleft">   <div class="bottomright">      <div class="bottommid">      </div>   </div></div>

CSS in the head or separate stylesheet:

.topleft {background: url(skin/message/b_01.gif) top left no-repeat;}.topright {background: url(skin/message/b_03.gif) top right no-repeat;}.topmid {background: url(skin/message/b_02.gif) top right repeat-x;height: 10px; /* This height must be the height of the background image used */   padding: 0px 10px 0px 10px;   /* 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 */}.left {background: url(skin/message/b_04.gif) top left repeat-y;}.right {background: url(skin/message/b_06.gif) top left repeat-y;}.mid {background: url(skin/message/b_05.gif) center left no-repeat;   padding: 0px 10px 0px 10px;   /* 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 */}.bottomleft {background: url(skin/message/b_07.gif) top left no-repeat;}.bottomright {background: url(skin/message/b_09.gif) top right no-repeat;}.topmid {background: url(skin/message/b_02.gif) top right repeat-x;height: 10px; /* This height must be the height of the background image used */   padding: 0px 10px 0px 10px;   /* 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 */}

[Norman]

If I will use CSS do you think it will be more fast?

[Ingolme]

Yes, CSS loads much faster than HTML tables. HTML tables are pretty unefficient.

[Norman]

I will try. Thank you, Ingolme.

[Norman]

Man, I can't get it work.. Please, could you help me adjusting that code with a text field (I don't know where's the text field in your HTML..)? These are all my images:

[Ingolme]

I think this should work. I've applied the widths and heights of the given images.

.topleft {background: url(skin/message/b_01.gif) top left no-repeat;}.topright {background: url(skin/message/b_03.gif) top right no-repeat;}.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 */padding: 0px 20px 0px 28px;/* The first and third should be 0px, the second is the widthof the top right corner image and the fourth is the widthof the top left corner image */}.left {background: url(skin/message/b_04.gif) top left repeat-y;}.right {background: url(skin/message/b_06.gif) top left repeat-y;}.mid {background: url(skin/message/b_05.gif) center left no-repeat;padding: 0px 18px 0px 28px;/* The first and third should be 0px, the second is the widthof the right border image and the fourth is the widthof the left border image */}.bottomleft {background: url(skin/message/b_07.gif) top left no-repeat;}.bottomright {background: url(skin/message/b_09.gif) top right no-repeat;}.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 */padding: 0px 20px 0px 28px;/* The first and third should be 0px, the second is the widthof the bottom right corner image and the fourth is the widthof the bottom left corner image */}

Oh, I forgot to mention, the text and content goes here:

<div class="topleft"><div class="topright"><div class="topmid"><!-- Nothing here --></div></div></div><div class="left"><div class="right"><div class="mid"><!-- Begin content --><div id="post_message_$post[postid]">$post[message]</div><!-- End content --></div></div></div><div class="bottomleft"><div class="bottomright"><div class="bottommid"><!-- Nothing here --></div></div></div>

[Norman]

I get this:

[Ingolme]

OK, Sorry for the result before, I hadn't tested it myself before. This one works for me:

.topleft {background: url(skin/message/b_01.gif) top left no-repeat;}.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 widthof the top right corner image and the fourth is the widthof the top left corner image */}.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 */}.left {background: url(skin/message/b_04.gif) top left repeat-y;}.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 widthof the right border image and the fourth is the widthof the left border image */}.mid {background: url(skin/message/b_05.gif) center left no-repeat;padding-left: 28px;}.bottomleft {background: url(skin/message/b_07.gif) top left no-repeat;}.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 widthof the bottom right corner image and the fourth is the widthof the bottom left corner image */}.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 */}

[Norman]

Thank you very much, Inglome. It works, but it have a 'transparent' background:How do I fix this?

[Ingolme]

Oh, just change the part of code for .mid so that it's like this:.mid {background: url(skin/message/b_05.gif) center left no-repeat #FFFFFF;padding-left: 28px;}

[Norman]

And now I get this::)However, a lot of thanks for your help.

[Ingolme]

That can be solved too... I just keep messing up.Change your HTML code so that it's like this (adding a new <div class="conten">:

<div class="topleft"><div class="topright"><div class="topmid"><!-- Nothing here --></div></div></div><div class="left"><div class="right"><div class="mid"><div class="content"><!-- Begin content --><!-- End content --></div></div></div></div><div class="bottomleft"><div class="bottomright"><div class="bottommid"><!-- Nothing here --></div></div></div>

Then make the CSS like this:

.mid {background: url(skin/message/b_05.gif) center left no-repeat;padding-left: 28px;}.content {background-color: #FFFFFF;}

[Norman]

[Norman]

Ok, the time to set it on my forum, and I have two new problems! First, I would like to have the image n. 5 always at the top of my box. This is what I want:http://img220.imageshack.us/img220/5223/goodyu5.jpgAnd this is what I get when I have a long post:http://img220.imageshack.us/img220/9923/badyu3.jpgSecond:In some posts I see this error:http://img251.imageshack.us/img251/7526/buhlu1.jpgWhy? :)And, as last, I would like to set a standard height and width for my message box.. how do I do this?

[Ingolme]

To solve your first problem you just need to change the CSS:.mid {background: url(skin/message/b_05.gif) top left no-repeat;padding-left: 28px;}About the second one. I really am not sure of a good method how to do it. It happens when you put <p> or <form> elements inside this kind of structure. One thing you can do it put a line break before and after the content:...<div class="content"><br /><!-- content goes here --></br /></div>...To give a fixed width or height to the box you can do this:<div class="all"><div class="topleft"><div class="topright"><div class="topmid"><!-- Nothing here --></div></div></div><div class="left"><div class="right"><div class="mid"><div class="content"><!-- Begin content --><!-- End content --></div></div></div></div><div class="bottomleft"><div class="bottomright"><div class="bottommid"><!-- Nothing here --></div></div></div></div>And use the following CSS:

.all {width: 400px;height: 200px;}.content {overflow: auto;}

[Norman]

Again, thanks.

[Norman]

Hey Ingolme, I still have the second problem (I don't want to add a <br /> space).. I get that problem only when I quote a message or when I add a [ code ]/[ html ]/ect tag. They call another part of code and it breaks the box. For example, this is my [ code ] tag code:

<div style="margin:20px; margin-top:5px">	<div class="smallfont" style="margin-bottom:0px"><img src="$stylevar[imgdir_misc]/code.gif" border="0" /></div>	<pre class="alt2" dir="ltr" style="		margin: 0px;		padding: $stylevar[cellpadding]px;		border: 1px inset;		width: $stylevar[codeblockwidth];		height: {$blockheight}px;		text-align: left;		overflow: auto">$code</pre></div>

[Ingolme]

I'm not sure, but maybe this CSS will help:pre {display: block;}I never found a real solution to that problem myself...

[Norman]

I have just to add this definition to the CSS? Nothing else?

[Ingolme]

I really don't know if that will work, but try adding it to the CSS.

[Norman]

Tried.. it doesn't work.

[Norman]

Hey Ingolme, I have one last question (I suppose ). Check out the screen:http://img180.imageshack.us/img180/8136/sduk9.jpgCan you help me?