|
CSS - [css3] Border Image Not Working
This is driving me nuts!
I have done everything I think that they says I should do but it is not working...here is the table style I am using if I use normal border styles it works ok...please can someone tell me where I am going wrong...thank you! .nik { background-color: #FFEAA1; padding-left: 1em; padding-right: 1em; border-image: url(border.png) 0% 30% 0% 30% repeat; } oh and the image size is 100px x 100px Kriss Similar TutorialsSo my code works fine in webkit(Safari/Chrome), and it almost works in Firefox. If you want to try it out for yourself, just make sure you use a large image, like 500x500 pixels or larger so you can see what I mean. In the tutorial I watched they were able to make it work in Firefox, and the video is almost 1yr old, so it should work. Code:
<html>
<head>
<title>Background Size and Images</title>
<style>
body { background: blue;
margin: 0;
padding: 0; }
#container { background: white;
width: 75%;
height: 600px;
padding: 50px;
margin: 1em auto; }
#container div { background: tan;
border: 1px solid;
margin-right: 50px;
float: left; }
#container #one { width: 80%;
height: 100px;
background: url(samplesample.png) no-repeat;
-webkit-background-size: 100%;
-moz-background-size: 100%; }
#container #two { width: 150px;
height: 50px;
background: url(samplesample.png) no-repeat;
-webkit-background-size: 150px 50px;
-moz-background-size: 150px 50px; }
#container #three { width: 100px;
height: 250px;
background: url(samplesample.png) repeat;
-webkit-background-size: 25px 25px;
-moz-background-size: 25px 25px; }
</style>
</head>
<body>
<div id="container">
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
</div>
</body>
</html>
I have a style that I want to use, but it only seems to work in mozilla browsers. I have looked around on the internet but can't find any simular posts. Here is what I have: Code:
<div class="border1" style="width: 150px;">
<div class="title">
title
</div>
<div class="content">
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
</div>
</div>
and the styles Code:
body {
font-size: 12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.border1 {
border: 1px solid #666;
border-color: #999;
margin: 5px;
}
.title {
border: 1px outset #999;
background-color:#4D77A8;
padding: 2px 5px;
color: white;
}
.content {
border: 1px outset #999;
background-color:#F9F9F9;
padding: 5px;
}
.content a{
text-decoration: none;
padding: 2px 3px;
display: block;
color: #333333;
}
.content a:hover{
border: 1px solid #333;
background-color: #84A1C3;
padding: 1px 2px;
color: white;
}
in IE the only border style that seems to work is "solid". If anyone can help I would appreciate it. Thx Hi I have a horizontal menu made from a list. On hovering over the links its supposed to show a yellow bottom border 3px underneath. Works perfectly in everything but IE7. Any ideas please. Hi all, I'm having an issue using CSS3 selectors. I'm not quite sure if this is even possible but here it goes. Imagine the HTML below: html4strict Code: Original - html4strict Code <tr> <th><input type="checkbox" name="cb" /></th> <td>Something here</td> <td>Someting here also</td> </tr>
Is it possible with CSS to utilize the :checked selector on "tr th input:checked" and somehow set the background color for the td-s? I've tried several combinations but to no avail. And as far as I know there's no parent selector or anything that lets you traverse backwards and I'm trying to avoid JavaScript as much as possible. I'm using Firefox 2.0.0.12. Hi. I like to know what're the differences. I know that css3 has more properties. It can do rounded corner border easily and also some new ways to write css. Is this css3? input[type="submit"] Also I remember seeing websites mentioned css3 can be written in module or something like that? What other differences? Thanks. What is the Difference between CSS2 and CSS3 ??? Hi everyone, I am new to this website as well as CSS for the most part. I have been working on a wordpress themed website recently trying to learn as much as possible. My website is self-hosted currently so can't really give you a link to view my code. I just discovered the CSS validator and I validated my CSS file. It contains 13 errors (yikes!) and 16 warnings. However, I don't really know how to interpret it. I use notepad++ as an editor. The profile I used is CSS level 2.1: EDIT: Here is the new code for CSS 3. I only copied the errors part. Code: 23 .socialmedia img Property -webkit-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 24 .socialmedia img Property -moz-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 25 .socialmedia img Property transition doesn't exist : all 0.2s ease all 0.2s ease 38 .socialmedia img.fade:hover Property -moz-opacity doesn't exist : 1 1 39 .socialmedia img.fade:hover Property -webkit-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 40 .socialmedia img.fade:hover Property -moz-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 41 .socialmedia img.fade:hover Property transition doesn't exist : all 0.2s ease all 0.2s ease 60 #main-nav-search Value Error : padding-top -1.0 negative values are not allowed : -1px -1px 79 .menu2-top-right Value Error : border Too many values or values are not recognized : solid 0 1px 1px 1px #000 solid 0 1px 1px 1px #000 80 .menu2-top-right Property -moz-border-radius-bottomright doesn't exist : 10px 10px 10px 10px 82 .menu2-top-right Property -moz-border-radius-bottomleft doesn't exist : 10px 10px 10px 10px 87 .menu2-top-right Property -moz-box-shadow doesn't exist : 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 88 .menu2-top-right Property -webkit-box-shadow doesn't exist : 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f What does it mean when it says "doesn't exist"? I got transitions to work using a simple hover, but how do i make them respond to onclick? Code:
<html>
<head>
<style>
#trans {
opacity:100;
transition: all 1st ease-in-out;
}
#trans:hover {
opacity:0;
}
</style>
</head>
<body>
<img src="myimage.jpg" id="trans" />
</body>
</html>
I'm currently having a problem getting the opacity to work. I haven't tried using RGBa yet, but it should work the same as HSLa, and right now HSLa isn't working properly. Usually when I've had a problem, it's just a matter of moving the file around in my finder(I use a Macbook) or I've missed a semi-colon or quotation mark or something.....but with this, I swear I've checked, double-checked, triple-checked everything and it's not working. And I've checked it in Safari, Chrome, and Firefox. Right now I have the Alpha element in the HSLa set to .25, which means it should be quite transparent...but all it does is make the color lighter, not transparent. If I could somehow send someone my files/images and screenshots for you to try and help, that'd be great. Otherwise I'm not sure how to go about getting help. Thanks! 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....????? 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, 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 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! 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"> 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; }
I use a border-image which has a width of 2px. Thank you in advance for your help. Loki1991 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 Hey Everyone, I am having trouble getting firefox to behave with a css3 button I have. It's mainly the linking of it but also the style gets out of whack in FireFox. It works perfect in chrome and in safari. Here is the link http://pt11.*******com/index2.php?x=videos.html So for a long time I've seen that widths for dropdown menus must be fixed for one reason or another. Trying to make it so that the width of the dropdown was dynamic worked in IE, not Firefox, or vice versa. For instance, you had a horizontal nav menu (<ul>), with two items (<li>s), "cars" and "trucks". Under cars you have dropdown links for "Focus" and "Sky" (so the width could be very short) but for trucks you have "Chevrolet 510 Extended Cab" and "Ford Yadda Yadda Yad" (so a long width). The widths of these dropdowns would have to be specified, meaning that 1.) it wouldn't be perfect padding unless you define the perfect width and 2.) unless you want to define a different width for each dropdown, the width would have to be the same for all and you might have a buttload more padding for one (like the first item) than another (the second item). So I'm wondering, if I force my users to CSS3 (which luckily I'm working on a project where I can), does it allow us to ditch this convention, and dynamically size the width of the dropdown based on content? Maybe through display:table-cell? I've looked around and even the fanciest CSS3 dropdowns still appear to have fixed widths: http://webdesignerwall.com/tutorials/css3-dropdown-menu |
|||||||