It seems I must have read every article and guide to using border-image that there is on the web, and have tried just about every suggestion possible, yet it still isn't displaying! It's destined for a ul of class "navbox", and the full CSS for that element is below.
ul.navbar {
float: right;
list-style-type: none;
background-color: #F8F8F8;
border-style: solid;
border-width: 4px;
border-color: #231F20;
color: #1F1F1F;
margin: 25px 5px 5px 5px;
height: 50px;
position: absolute;
left: 450px;
right: 20px;
vertical-align:middle;
border-image-source: url(C:\Users\imamadmad\Documents\Web Stuff\Locomotion Coffee\border.png);
border-image-outset:4px;
border-image-width:4px;
border-image-slice:8;
border-image-repeat:repeat;
}
I feel I have tried every possible combination of the border-image property, and even used both a .png and a .jpg version of the file, yet nothing displays. I've even removed the other border styling completely, but replaced it when that didn't make the border-image appear as I still needed some sort of border! I'm not sure if it would have anything to do with the fact that I'm calling the entire document and all files associated with it through my computer rather than through the web, as I need to make a mock-up on my own computer before I can put it online. However, everything else, including other images, are displaying just fine. It is neither displaying in Chrome nor IE, and Firefox just doesn't want to show any CSS at all, so that's unhelpful. I have tried adding the -webkit- etc. tags to the properties, but they made no difference either and besides, it shouldn't need it for the latest version of Chrome, which I'm running.
Please, can anyone help me! While it's not vital to the design, it would really just make it that much easier on the eyes.
Works fine. Check your image url
FIDDLE DEMO
ul {
float: right;
list-style-type: none;
background-color: #F8F8F8;
border-style: solid;
border-width: 4px;
border-color: #231F20;
color: #1F1F1F;
margin: 25px 5px 5px 5px;
height: 50px;
position: absolute;
left: 450px;
right: 20px;
vertical-align:middle;
border-image-source: url(http://i46.tinypic.com/10gljba.jpg);
border-image-outset:2px;
border-image-width:4px;
border-image-slice:8;
border-image-repeat:repeat;
}
Hope this is what you are looking for
Edit : FIDDLE Updated
Related
I might need your help. I tried to use an image as the background of a div, and cover up the borders with a box-shadow. The problem is that it still displays like one pixel of the background image at the borders in Firefox and Internet Explorer, just Google Chrome displays it as supposed.
Here is a link to the actual page: the page where the error occurs.
I hope someone can help me with this.
Btw. I tried to use a not scaled image for the second one (the barbarian) but it didn’t made a difference :/
I am thankful for any advice,
Feirell
One way to avoid this problem is to perform a vertical centering of your graph via some other method, without using transforms. A popular approach (prior to viability of the transform-based solution) is to utilize display:table and display:table-cell styles.
Applying this method to your CSS, and making adjustments to fix any visual inconsistencies it causes, you would get the modifications to the following declaration blocks:
/* ./resurces/css/positioning.css */
#graph_wrapper{
width: 100%;
height: 100%;
text-align: center;
/*display: block;*/
display: table;
position:absolute;
}
#graph_wrapper_inner{
/*height: 550px;*/
/*min-width: 900px;*/
display: table-cell;
vertical-align:middle;
/*position:absolute;*/
/*padding: 20px;*/
}
#graph{
display:inline-block;
padding: 20px;
height: 550px;
min-width: 900px;
position: relative;
}
#graph,#graph_wrapper_inner{
/*top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);*/
}
.YPositioner{
position: relative;
top: 50%;
transform: translateY(-50%);
}
#header,#left,#right,#bottom,#graph{
background-color: #202020;
color: #36B1EC;
border: 3px solid #035881;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
/* ./resurces/css/diagram.css */
#graph_wrapper_inner{
/*background-color: rgba(32,32,32,0.95);*/
}
Here's a JSfiddle to demonstrate the fix. For future reference, creating a more lightweight demo of the problem would make it easier for people to work with your code, and probably get you more useful replies. Hope this helps! Let me know if you have any questions.
Can you try it like this. When you use box-shadow you should add -webkit- and -moz- prefixes along with the box-shadow property
For ex.
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
I have a textbox and when I enter the term "laptop" its not visible properly. The problem is in IE9, not with Chrome.
HTML
<input id="small_search_string_sub" name="search_string" type="text" class="newsearch_sub rounded " placeholder="Search..." maxlength="500">
Here is the CSS:-
.newsearch_sub {
padding: 3px 10px 3px 10px;
background-color: #FFF;
width: 220px;
height: 25px;
margin-top: 10px;
vertical-align: top;
}
It seems like you have no reset for the input default style, also the input has not format for the text on it, also the padding might be pushing down the text to far.
I tried this, and it seems to work well on IE9 for me, but the fact that I see another class (rounded) on the line of code that you send, makes me wonder if there is not something missing here, can you put a link to the code, even as a stand alone page, this way I can debug on ie9 on the proper code, and maybe give you a solution if this one does not work for you.
.newsearch_sub {
padding: 3px 10px 3px 10px;
background-color: #FFF;
width: 220px;
height: 25px;
margin-top: 10px;
vertical-align: top;
font:12px/24px Arial,Helvetica
}
in internet explorer 10 (mobile version), a selectbox () gets highlighted blue as soon as it gets focused, (it´s the blue of the whole Modern UI surface of the phone). the styles for the select tag:
border-radius: 5px 5px 5px 5px;
font-size: 14px;
height: 25px;
letter-spacing: -1px;
float: left;
font-weight: 400;
padding: 0 5px 0 5px;
-webkit-appearance: none;
-ms-user-select: none;
background-origin: content-box, content-box;
background-repeat: no-repeat, repeat;
background-size: 11px 6px, 1px 160px;
background-position: right center, 0 -1px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAMAQMAAACz9bS7AAAABlBMV…vQuZgJjsYojkBJQf75i4cGzcXt5HJQ/Djs7L5sApGeVNPJDzbGEbOb/85rAAAAAElFTkSuQmCC), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAlgCAIAAADGR8ryAAACZ0lEQ…tDzV5P+JnOAzg9qR2Xlg+a8jAvtyK/P5fSI6Sf3c3NhwADAJ0Rj8qbukvYAAAAAElFTkSuQmCC);
border: 1px solid #CCCCCC;
I was hoping the "-ms-user-select: none" would fix it, but didnt.. Has anyone experience similar?
I've encountered a similar problem on WP7 an WP8, the solution is to move focus from select box to fake input on click event.
jQuery:
$('select').on('click', function() {
$('input.fakeInput').focus().blur()
})
CSS:
.fakeInput {
display: block;
width:0;
height:0;
top: -999rem;
position: absolute;
}
Note: do not forget to add this code only for mobile device, on desktop browsers it will work not as expected.
IE has its own CSS pseudo-element to deal with this highlight.
CSS:
select::-ms-value{ background-color: transparent; color: black; }
You may read more about this on this page.
it´s interesting but since I add this line to my style sheet, it keeps highlighting blue, but doesn´t stay that way after you select something from the selectbox.
Thought I add it as an answer if somebody comes back with the issue.
:focus{outline: none;}
I'm trying to make a button that's 11px by 11px, but it seems every browser I try has a minimum width of 12px for buttons (except IE9, which does 16px). Is there a way around this or do I need to use anchor tags?
My CSS
#testButton
{
background-image: url(images/Sprites.png);
width: 11px;
height: 11px;
border: 0 none transparent;
}
The Result in IE
Every browser has some default css. try using css reset
try adding padding and margin to 0 in your button css
#testButton
{
background-image: url(images/Sprites.png);
width: 11px;
height: 11px;
border: 0 none transparent;
padding:0;
margin:0;
}
Ok, so interesting question. I've been playing around here. And I'm running Safari on a Mac here.
For me, this works (I think) on a simple <button></button> element:
button {
width: 2px;
height: 2px;
padding: 0px;
box-sizing: border-box;
border: 0;
background: red;
}
I think the important thing to note is the box-sizing parameter. You can get more information about it here. Along with, of course, the padding style.
Ok, I'm quite new to CSS3. I have this code:
<div class="Mat-Shadow-Box-Text">
<div class="Mat-Shadow-Box-TextBleu2">
MyText
</div>
</div>
That works great. But then I want to change Mat-Shadow-Box-TextBleu2 for Mat-Shadow-Box-Text2. Same CSS class copy/pasted with 0 change (wanted to test before changing anything).
.Mat-Shadow-Box-Text
{
margin: 0px 0;
border-radius: 20px;
box-shadow: 10px 10px 20px #888;
behavior: url(ie-css3.htc);
}
.Mat-Shadow-Box-TextBleu2
{
border-radius: 20px;
border-width: 3px;
border-style: solid;
border-color: #888;
padding-left: 18px;
padding-bottom: 15px;
padding-top: 15px;
}
.Mat-Shadow-Box-Text2
{
border-radius: 20px;
border-width: 3px;
border-style: solid;
border-color: #888;
padding-left: 18px;
padding-bottom: 15px;
padding-top: 15px;
}
Now my 100$ question is: Why when I change the class name in my tag, it doesn't work? (the border doesn't appear on the web page). Also, I tried just renaming .Mat-Shadow-Box-TextBleu2 by .Mat-Shadow-Box-Text2 (in both CSS class and DIV code) and it doesn't work either!
So, to summarize, my original code works fine, but I can't rename nor change to another class in my second DIV tag. Note that I don't have this problem with my first DIV class. I can rename .Mat-Shadow-Box-Text or point to a different class and it works just fine.
Cheers!
When in dev its always a good practice after changing Back-End Code, CSS, or HTML to always Ctrl+F5 to refresh your browser to force it to get everything again from the server. That seems to be what you have happening here. Its especially noticeable with CSS changes.