CSS - Clipping A Border With An Image?

Hey,
I have a small Problem with my Border Div. It doesn't get the height from the content-content div.

Html:
div Code:
Original - div Code <div id="content"> <div class="content-border content-border-left"></div> <div id="content-content"> <div id="maincontent"> ###MAIN_CONTENT### </div> <div id="statecontent"> ###STATIC_CONTENT### </div> </div> <div class="content-border content-border-right"></div> </div>

  

 <div ID="content">


      <div class="content-border content-border-left"></div> 


      <div ID="content-content"> 


           <div ID="maincontent">


                ###MAIN_CONTENT###


           </div>


           <div ID="statecontent">


                ###STATIC_CONTENT###


           </div> 


      </div>


      <div class="content-border content-border-right"></div> 


 </div> 

The both border div should get the height from the content-content. But every time he just uses the min-height. If I write height: 100% on the border div, he will use every time a height higher then the content-content.

What should I do?

CSS:
css Code:
Original - css Code #content { margin: 0px auto; width: 800px; text-align: left; font-family:Verdana; font-size: 11.5px; } .content-border { float:left; width: 2px; height: inherit; min-height: 300px; background-repeat: repeat-y; } .content-border-left { background-image: url("../images/border_left.png"); } .content-border-right { background-image: url("../images/border_right.png"); } #content-content { float:left; width: 796px; height: inherit; background-color: #D8DEE2; } #maincontent { float: left; height: inherit; width: 531px; } #statecontent { float: left; height: inherit; width: 264px; }

  

  


 #content {


     margin: 0px auto;  


     width: 800px;


     text-align: left;


     font-family:Verdana;  


     font-size: 11.5px;   


 }


  


 .content-border { 


     float:left; 


     width: 2px;


     height: inherit;


     min-height: 300px;


     background-repeat: repeat-y;


 }


  


 .content-border-left { 


     background-image: url("../images/border_left.png");


 }


  


 .content-border-right {


     background-image: url("../images/border_right.png");  


 }


  


 #content-content {


     float:left;        


     width: 796px;


     height: inherit; 


     background-color: #D8DEE2;


 }


  


 #maincontent {


     float: left;


     height: inherit;  


     width: 531px;


 }


  


 #statecontent {


     float: left;


     height: inherit;  


     width: 264px; 


 } 

I use a border-image which has a width of 2px.

Thank you in advance for your help.

Loki1991

I am having a rather annoying problem with Internet Explorer 6 not putting the proper padding between the CSS border and the image. You can see the problem he http://www.sdstyle.org/article.php?id=101

Basically, there ought to be a six pixel white border and then a one pixel gray border around the images and the breakout in the middle of the page.

The offending code is: Code:

.article_image {padding: 6px; border:1px; border-style:solid; border-color:#ccc; margin-bottom:8px;}

...and for the image:

<img src='images/articles/101_image_1.jpg' class='article_image'>

This works fine in Gecko (Mozilla and Firebird) and on Mac IE. I've read there is a bug in IE's handling of CSS (shocking...), am I running into that problem? I tried doing a search here and on Google, and for some reason all of the other solutions I've tried didn't work.

Thanks in advance!

I'm trying to use images for my border, but for some reason it isn't working. Here is my code:

Code:

/* This is the border line & background colour round the entire page */ 
.bodyline { 
  border-top-image: url(images/top.gif); 
  border-top-right-image: url(images/topRight.gif); 
  border-right-image: url(images/right.gif); 
  border-bottom-right-image: url(images/bottomRight.gif); 
  border-bottom-image: url(images/bottom.gif); 
  border-bottom-left-image: url(images/bottomLeft.gif); 
  border-left-image: url(images/left.gif); 
  border-top-left-image: url(images/topLeft.gif); 
} 

The path to the images is right, so that's definitely not the problem. Can someone help me out?

Hi all,

How do you put in a image border in the css. I use the following code and it does not seem to work:border-bottom-image:url(../images/borderLeft.bmp);

If you can't do this then how do you put 2 borders in the css

Stephen

I want to use an image as a border using xhtml and css.
The border goes around the bottom and the right of an area on my page that has a fixed with an a variable height.

As Image borders won't be implemented in css until css3, I attempted to do it using layers of spans with background images along the sides. It resulted in a page that renders incorrectly and differently in the three browsers i tested it in (firefox,ie,opera).

Visual Examples: (attached)
theoretically.png -> What it should look like at this point
ie.png -> how ie renders it
ffx.png -> how firefox renders it
opera.png -> how opera renders it.

Here is the code so far:
xhtml:
Code:

<div class="PageBody">
        <span class="PageBody_RightBgLayer">
            <span class="PageBody_BottomBgLayer">
                <span class="PageBody_RightBottomCornLayer">
                    <span class="PageBody_FinalLayer">
                    hello
                    <br />test
                    <br />test2
                    </span>
                </span>
            </span>
        </span>
    </div>

css:
Code:

.PageBody
{
	position:absolute;
	left:0px;
	top:110px;
	background-color: #ffffff;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}
.PageBody_Corner
{
	position:absolute;
	right:0px;
	bottom:0px;
}
.PageBody_Right
{
	position:absolute;
	right:0px;
	top:0px;
}
.PageBody_RightBgLayer
{
	background-image: url("../Images/PageBody/right.gif");
	background-position: right;
	background-repeat: repeat-y;
	padding: 0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}
.PageBody_BottomBgLayer
{
	background-image: url("../Images/PageBody/bottom.gif");
	background-position: bottom;
	background-repeat: repeat-x;
	padding: 0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}
.PageBody_RightBottomCornLayer
{
	background-image: url("../Images/PageBody/corner.gif");
	background-position:right bottom;
	background-repeat:no-repeat;
	padding: 0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}
.PageBody_FinalLayer
{
	margin: 0px 13px 12px 0px;
	width:600px;
	min-height:300px;
}

Is there any way to fix this or am I going about it wrong?

Thank you,
Benjamin Prosnitz

Hi,

I am trying to get a border around an image but nor a normal border; a grey border of 10px then a white border of 20px and then the actual image.

I am not sure if the following is the best way to achieve this result. However even if so I am having some problems with FireFox.

Basically my first attempt is as follows: I wrapped the image inside a <div> element. Therefore my XHTML syntax is something as follows: Code:

<div class="image">
		<img src="hello.jpg" />
	</div>

I then applied the following CSS: Code:

<style>

	div.image{
		border: 4px solid #ccc;
		background-color: #fff;
		width:1px;
}
	
	div.image img{
		margin: 8px;
	}

</style>

Now like this I get a good result in IE6 but not in FireFox. I cannot really understand why. I know there is a containment hack but is it really needed in this case? if so why? Also is there maybe an easier way to achieve this?

Regards,
Sim085

ps: I did a fast test. On IE7 it works with the transitive doctype but not with the strict doctype. This I guess means I am breaking some rule I would like to continue with the strict doctype however.

Thanks for taking the time to read my question.

I was wondering if there is a way to put a border around the <area> on an image map. They are href's, so I thought something should happen there. I know you can do an image flip, but then I have to have 2 pictures of everything.

I'm just thinking on the fly here but is there something you could do in the css with map and link?

I tried this in my .css:
Code:

area.hborder:hover {
    border-style: solid;
	border-color: black;
}

and changed my <area> line to include

Code:

<area class="hborder" sha ...

Here is an example of one of my image maps.

thanks for your help,

Brad

Code:

<map name="SBMap">
	<area shape="rect" coords="9,32,270,63" href="VSADHelpUnReleased.html" title="Help: Enter New Data UnReleased">
	<area shape="rect" coords="9,70,198,104" href="VSADHelpReleased.html" title="Help: Edit Data Released">
	<area shape="rect" coords="9,112,85,146" href="VSADHelpPrint.html" title="Help: Print">
	<area shape="rect" coords="9,150,272,188" href="VSADHelpImport.html" title="Help: Import Farm Names and Codes">
	<area shape="rect" coords="9,190,171,228" href="javascript:void(0)" onclick="NewMonth(EventDesc[41])" title="Help: Herd Info">
	<area shape="rect" coords="9,230,91,267"  href="javascript:void(0)" onclick="NewMonth(EventDesc[42])" title="Help: Close">
</map>

Greetings,

I have perhaps a strange problem. I am trying to use CSS to generate a border around .PNG images. My border consists of png images as well. For the border, I want rounded corners, which take seperate images, and then a middle image that repeats to fill in the space. My problem is that the middle image is repeating over the corner images. You can see it he

http://www.3dbrewer.com/

Notice the borders around the random images at the top. It is going over the corners. The reason I have to do it this way is that the images vary in size.

Here is the code I am currently using:

Code:

.pb div {
background: url(../images/picture-tl.png) 0 0 no-repeat;
}

.pb div div {
background: url(../images/picture-tr.png) 100% 0 no-repeat;
}

.pb div div div {
background:transparent url(../images/picture-t.png) 0 0 repeat-x;
padding:13px 0px 0px 0px;
}

.pb div div div div {
background:url(../images/picture-l.png) repeat-y scroll left;
padding:0px 0px 0px 13px;
}

.pb div div div div div {
background:transparent url(../images/picture-r.png) repeat-y scroll right;
padding:0px 13px 0px 0px;
}

.pb div div div div div div {
background:transparent url(../images/picture-b.png) repeat-x scroll bottom;
padding:0px 0px 13px 0px;
}

I plan on putting corners on the bottom too of course, but one step at a time. Any help would be appreciated

Hello,

Can I apply a top and bottom border to a fieldset but using an image to define a custom border line?

How can I do this?

Thank You,
Miguel

I am using a border-left that is 25px, instead of a solid color, i would like to use a repeated image that is 25px in width, right now i have this:

border-left: 25px solid #000;

I tried to change it to something like this:

border-left: 25px url("image.jpg");

it doesn't change it to an image, and i'm guessing that it's not allowed in CSS. Am I doing something wrong? is it really not possible to do this? I need the element to dynamically change size along with the item that it is bordering, so making it a seperate div won't work. any thoughts?

hello,

i have this in my html:

Code:

<div id="link_image">
<a href="http://www.mylink.com/" target="_blank">My link with image
</div>

& here the css:

Code:

#link_image a
{
display:block;
width: 130px;
height: 21px;
text-indent:-3000px;
overflow:hidden;
text-decoration:none;
background:url(images/image.jpg) 0 0 no-repeat;
padding: 7px;
background-color: #667700;
}

Now I would like that the image is right in the center of the background border with color #667700. Like now, it's just on the left side, not centered.

thanks!

Hi:
I am using an image as the background in a <td> tag. Also, that <td> tag has a border on the top and bottom. When viewing this page in FF, the border sits perfectly against the image (and the <td> tag). When viewing this in garbage IE, there is a pixel line between the image and the border. What is the problem? What is the fix to get the borders to sit perfectly on the image?

Here is the style for the <td> with id="header"
Code:

#header {
	background: #FFF;
	background-image:   url(include/head.jpg);
	background-repeat: no-repeat;
	height: 136px;
	width: 100%;
	background-position: right;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;	
}

And here is the <td>
Code:

<table id="main">
	<tr>
		<td id="header">
			<ul id="nav">
				<li><a href="">Home</a></li>
				<li><a href="">Benefits</a></li>
				<li><a href="">FAQ</a></li>
				<li><a href="">About</a></li>
				<li><a href="">Pay Your Bill</a></li>
				<li><a href="">Contact</a></li>
			</ul>
		</td>
	</tr>
</table>

Thanks in advance.
Link:
http://www.wiu.edu/users/mujas2/test/

Also, if anyone has an idea about those tabs, let me know! Thanks in advance, please ask if further info is needed!

Hi,

I am new to css codes , so please help me with my problems if u can.

I want to add a shadow to my border from all sides to my image .

I'm working on a new layout for my site, and I've sliced up the left and right side of the content box so it will expand and contract accordingly to all the content inside of it. And I can't get it to line up right. And I'd appreciate any help.

Here it is:
http://thesethexperience.f2g.net/ne...navboxtest.html

And the code:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>navbox</title>

<style type="text/css">

body { background-color:#FFFFFF; }
img { border:0px; }

#navleft
{
background-image: url(images/navleftspacer.png);
background-repeat: repeat-y;
padding: 0px;
background-position:left;
}

#navright
{
background-image: url(images/navrightspacer.png);
background-repeat: repeat-y;
padding: 0px;
background-position:left;
}

</style>

</head>

<body>

<div id="navbox">
  <div id="navhead">
    <img src="images/navigation.png" alt="" />
  </div>
  <div id="navbod">
    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td id="navleft" height="100%" valign="top"><img src="images/navleftspacer.png" /></td>
        <td><p><br /><br /><br /></p></td>
        <td id="navright" height="100%" valign="bottom"><img src="images/navrightspacer.png" /></td>
      </tr>
    </table>
  </div>
  <div id="navfoot">
    <img src="images/navbottom.png" alt="" />
  </div>
</div>

</body>
</html>

Thanks in advance.

Is it possible to specify a custom image for a border style?