CSS - Want To Set A Shadow To My Border Given To An Image In Css

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 want white background and a image on 2 sides of this i thought of just added border but can't seem to find out how to get 2 image on the border.

Any help would be great.

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 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

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

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.

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?

I have a two toned border that I want around my page and I need the corners to flow nicely (not rounded or anything, but continuous) and I'm attempting to do this with images... I actually only need the border for the bottom right of my page and I've tried doing this a number of ways...but unless I'm missing something, css doesn't allow for border-image properties....?????

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

Hi:
I have an logo image at my page, if you leave the image as non hyperlink, the image shows OK and nicely, when I make the image as a hyper link, there is a ugly frame around the image bordor, I can not get rid of it, I have some a.h/a.w/a css properties in my css file, since I am not fully understand this a.w/ a.h, can some one help me

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

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

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!

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?

I have these thumbnail images that I want to have a thin border around them when you rolloever. A thin gray border that isn't tight to the image, but has a bit of padding.

I have other link styles, so I'm naming this "a.thumbs" it seems right, but I can't get it to work. I'm not sure whether to put a border on the image...set it at 1 or 0, I've tried both....and I still can't get the style to work.

At one point, it worked, but all it was doing was picking up my link style.

What's the problem with the code....or what is the best way to achieve this kind of rollover?

Thanks.



a.thumbs:link{
padding: 5px 15px;
border: 1px solid #FFFFFF;
}

a.thumbs:visited{
padding: 5px 15px;
border: 1px solid #CCCCCC;
}

a.thumbs:hover{
padding: 5px 15px;
border: 1px solid #CCCCCC;
}