Css- use png transparent images for borders and corners

Hello experts
I need help to create my "widget-box".
I want to use images for my corners and borders.Unfortunately the code i'm using is not helping me to get the expected result. Because of the transparent images the borders are overlapping the corners (100% width) and i don't get the corners as expected.
I post the full code and the images.
Any help?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.widget_holder{ width:280px; height:280px;}
.widget_container{ height:200px;}
/*
	tlc = top left corner
	trc = top right corner
	blc = bottom left corner
	brc = bottom right corner
	lb = left border
	rb = right border
	tb = top border
	bb = bottom border 
*/

.tlc, .trc, .blc, .brc
	{
	background-color: transparent;
	background-repeat: no-repeat;
	}

.tlc
	{
	background-image:url(Stylesheet/widget/top_left_corner.png);
	background-position: 0% 0%;
	}

.trc
	{
	background-image:url(Stylesheet/widget/top_right_corner.png);
	background-position: 100% 0%;
	}
	
.blc
	{
	background-image:url(Stylesheet/widget/bottom_left_corner.png);
	background-position: 0% 100%;
	}

.brc
	{
	background-image:url(Stylesheet/widget/bottom_right_corner.png);
	background-position: 100% 100%;
	}

.tb, .bb
	{
	background-color: transparent;
	background-repeat: repeat-x;
	}
			
.tb
	{
	background-image:url(Stylesheet/widget/top_border.png);
	background-position: 0% 0%;
	}

.bb
	{
	background-image:url(Stylesheet/widget/bottom_border.png);
	background-position: 50% 100%;
	}
	
.rb
	{
	background-image:url(Stylesheet/widget/right_border.png);
	background-position: 100% 0%;
	background-repeat: repeat-y;
	}

.lb
	{
	background-image:url(Stylesheet/widget/left_border.png);
	background-position: 0% 100%;
	background-repeat: repeat-y;
	}

</style>
</head>

<body>
<div class="widget_holder">
<div class="lb">
 <div class="rb">
  <div class="bb">
   <div class="blc">
    <div class="brc">
	 <div class="tb">
      <div class="tlc">
       <div class="trc">
       <!---  --->
        <div class='widget_container'></div>
	   <!--- end of box border --->
	   </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
</div>
</body>
</html>

Open in new window

widget.zip
screenshot.gif
LVL 2
PanosAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tej Pratap Shukla ~DexterServer AdministratorCommented:
Hey there
I think i found the solution for your problem .
for top border and bottom border take margin-left and margin-right as 2 px
.tb
      {
      background-image:url(Stylesheet/widget/top_border.png);
      background-position: 0% 0%;
      margin-left:2px;
      margin-right:2px;
      
      }

.bb
      {
      background-image:url(Stylesheet/widget/bottom_border.png);
      background-position: 50% 100%;
      margin-left:2px;
      margin-right:2px;
      }
In similar way do for the left border and the right border but take margins from top and bottom if it doesn't work then use mozkit to trim the edges.
Please mark the question answered if you feel you achieved what you asked for

Thanks
~Dex
0
PanosAuthor Commented:
Hi Dexter_morgan
Unfortunately the margin way is not working. I tried every combination. I don't want to use mozkit . I need a solution for all Browsers (and IE => 8).
Thank you anyway
0
Slick812Commented:
greetings panosms, I have not found good results for image borders using the background image in 8 div, it rarely works for me with borders, unless the border images are simple, , due to the padding and margin for div do not change the background image as I need to do.
here is my version, I use absolute positioning to precisely place the borders, it's downside is that the images are not flexible (change the size in the widget_container) -
<style>
.widget_holder{ 
width:280px; 
height:280px;
border:1px solid #f00;}

.widget_container{
position:relative;
height:200px;
padding:10px;}
<style>

<div class="widget_holder">

<div class='widget_container'>ok test Text here
<img src="images3/top_border.png" style="height:5px;width:260px;position:absolute;top:2px;left:10px;"/>
<img src="images3/left_border.png" style="height:200px;width:5px;position:absolute;top:10px;left:2px;"/>
<img src="images3/left_border.png" style="height:200px;width:5px;position:absolute;top:10px;right:0px;"/>
<img src="images3/top_border.png" style="height:5px;width:260px;position:absolute;bottom:0px;left:10px;"/>
<img src="images3/tl-corner.png" style="position:absolute;top:0px;left:0px;"/>
<img src="images3/tr-corner.png" style="position:absolute;top:0px;right:0px;"/>
<img src="images3/br-corner.png" style="position:absolute;bottom:0px;right:0px;"/>
<img src="images3/bl-corner.png" style="position:absolute;bottom:0px;left:0px;"/></div>

</div>

Open in new window

I am not really sure about the way you may way the u want the borders to connect to the corners? But all of the border images can be moved and sized to anything you need.
Ask questions if you need more info.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

PanosAuthor Commented:
Hi
I m not at my working pc now. I will send xou a screenshot to show you what i want to show as soon as possible. I added a white bg to every corner image. It is working but only with a white bg.
0
PanosAuthor Commented:
Hi  Slick812
I tested your solution. It is very interesting.
There are two disavantages
1. I need a fixed height for the divs
2. I can t you css with backround image ( to avoid many calls to the server for all images x n divs ).

But it is a working solution. I post the expected screenshot and the result of your code.Can you take a look please?
screenshot.gif
0
Slick812Commented:
I looked at your screenshot .gif , and did some more to get a better match -
<style>
.widget_holder{ 
width:280px; 
height:280px;
border:1px solid #f00;
}

.widget_container{
position:relative;
height:200px;
padding:7px 14px;
}

.dvr{
position:absolute;
top:11px;
right:0px;
width:11px;
height:194px;
background-image:url(images3/right_border.png);
background-repeat: repeat-y;
}
</style>

<div class="widget_holder">
<!---  --->
<div class='widget_container'>ok
  <img src="images3/top_border.png" style="height:11px;width:260px;position:absolute;top:0px;left:10px;"/>
  <img src="images3/top_border.png" style="height:11px;width:260px;position:absolute;bottom:-4px;left:10px;"/>
  <div class="dvr"></div>
  <div class="dvr" style="right:0;left:0px;background-image:url(images3/left_border.png);"></div>

  <img src="images3/tl-corner.png" style="position:absolute;top:0px;left:0px;"/>
  <img src="images3/tr-corner.png" style="position:absolute;top:0px;right:0px;"/>
  <img src="images3/br-corner.png" style="position:absolute;bottom:0px;right:0px;"/>
  <img src="images3/bl-corner.png" style="position:absolute;bottom:0px;left:0px;"/>
  </div>
<!--- end of box border --->
</div>

Open in new window

But I do not understand so much, what you may mean by "two disavantages" -
"I need a fixed height for the divs"
"I can t you css with backround image "

Oh well? ?
have you really looked at the CSS3 background positioning properties? ?
there is the background-position, you only use %, BUT you can use pixel on line border as -
background-position: 11px 100%;

there is also the - background-clip -  and the - background-size  - properties, I do not have time to see if they could be a help in your 8 div with background image approach.

you may can set the background-clip  to - padding-box - and have the padding as 11px in that div, , maybe, maybe not? ? ?  , , does not seem likely.

The only thing that having a white background on the corner png, is that it just covers up the line border that are offending your transparent display. But white backgrounds are very little used any more.

Just an observation , you really need to put SOMETHING inside your widget_container <div> for testing and sizing , if you do NOT have padding then the contents will cover the border images.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
PanosAuthor Commented:
Hi  Slick812
I just was able to test your code.It is working fine and it is a solution. Thank you.
0
PanosAuthor Commented:
Thank you
regards
panos
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.