I'm using Programmer's Notepad, in my .css I've got the following:
tr#menu
{
border-style:solid 5px black;
background-color:#0099FF;
border-radius:25px;
}
border-radius is highlighted red as incorrect code?
Update - Code don't work in browser.
Update - I don't get a black border either :(
It does not exist in CSS level 2.
It is fine in CSS level 3.
Update Code don't work in browser.
See the specification:
The effect of border-radius on internal table elements is undefined in
CSS3 Backgrounds and Borders, but may be defined in a future
specification. CSS3 UAs should ignore border-radius properties applied
to internal table elements when ‘border-collapse’ is ‘collapse’.
Note that tr elements are, by default, internal table elements.
Update - I don't get a black border either :(
You've confused the border shorthand property with the border-style property.
You should just see if it works when you open a browser. Maybe Programmer's Notepad has an old version? Border-radius should work.
Programmers notepad isn't updated to include all the CSS3 keywords in the css.cscheme file for syntax highlighting.
The CSS will still work in compatible browsers. I would suggest getting a different more updated text editor.
Add border-radius to your WebFiles.scheme file
Related
I can't remove inset borders from object elements in IE11. They don't appear in any other browser or version of IE as far as I can tell. See the attached screenshot. Setting border as an attribute or inline style doesn't work... any ideas?
Add border-style: none; to your css for that div.
I had this issue with object images which were loading over script. The object data attribute wasn't defined so it was putting this border around the object. Adding a 1x1px blank image as the data attribute made it happy.
Have you tried:
border-width:none
or
-webkit-border-before: unset;
I am using jquery.reveals.js plugin.
the following colors specified in css
#fff
#000
are being interpreted differently on different browsers.
Getting the following output on firefox,chrome,and IE 9 ( and above)
however I am getting some unexpected result with IE8
I guess above problem is because the color specified in css in only 3 digits i.e. #fff and #000.
How can I fix this for IE8
Well it looks like the IE8 one is correct, and the modern browsers are interpreting it to what looks like #000; but with some transparency, is there a setting of opacity: 0.5; somewhere that IE is ignoring and good browsers are doing??
It's probably because before IE9, IE's png handling was horribly flawed. If you look into the plugin's asset folder you will find a modal-gloss.png. Now when you opacity animate a sem-transparent in IE before IE9 it will loose its transparency.
Try disabling animation with
$(...).reveal({ animation: 'none'});
the colors are displaying properly. I think the problem is with opacity.
Here you can read about CSS Transparency Settings for All Browsers.
Specify the color in six characters, or perhaps better yet specify the color as an rgba value.
Stick to using the standard as intended without leaving guesswork for the browser. Meaning define in hex as #RRGGBB not #RGB. You can switch color value schemes (like to RGB) but that should not be your issue.
This link shows you examples of each color value scheme and talks about browser compatibility:
http://www.w3schools.com/cssref/css_colors_legal.asp
Try rgba(0,0,0,0.5).
More about RGBA
I have this HTML code in which a QR-code is generated via AJAX :
<div class="qr-border">
<p id="qr" class="ajax_qrcode{if $cart_qties < 1} hidden{/if}"></p>
</div>
and I would like to set a border image around the QR-code. I have this image :
and a right corner image :
So I tried this in the CSS :
div.qr-border p.ajax_qrcode {
text-align: center;
padding-bottom: 1.0em;
float: center;
border-image: url('../img/qr-code-border/border.png') 27 27 27 27 stretch stretch;
border-bottom-right-image: url('../img/qr-code-border/corner.png');
}
but nothing works... Do someone has any suggestion ?
thank you for your help !
I don't think it's possible at the moment in any browser. I don't know of any browser that has implemented the full set of rules. Webkit, for example only seems to have implemented the shorthand border-image property. So you will not be able to set a separate right image.
This site has the best explanation of how CSS3 border-image works. It also has an interactive demo from which I take the following quote:
The border-image property in CSS3 is freakin' complicated. Way beyond a simple border, it is really like 9-slice scaling.
I don't actually think it's even possible to do what you want with CSS3 border-image even if a browser had implemented the full set due to the way in which a single image is sliced up to make a border.
border-image is a very new property in CSS3, and as far as i know, no browser supports it natively.
However, you can probably get it to work in Chrome and Safari by using the proprietary -webkit-border-image property instead.
Edit: try -moz-border-image for firefox as well.
Edit again: Your css selector is wrong, there's your problem. It should look like this:
div.qr-border p.ajax_qrcode
You treated the qr-border class as an ID.
If you just want a straight black border, why not just place the image in a slightly larger box (div) and make the background color black? The margin between the outside of the box and the QR-image should be black, and should ultimately provide the same effect right? Unless QR codes work differently with transparency...
I applied "border-bottom:#F60 dotted .3em;" to a div and while Firefox renders the dots as round, Chrome shows them as blocky dashes. Any takers?
If it's important that the borders are the same you can look into the CSS3 border image property: http://www.css3.info/preview/border-image/ for Chrome it will be -webkit-border-image:
The specification doesn't define what 'dotted' means to that level of detail. The two browsers just interpret it differently. This is not a problem.
As a graphic designer, this is indeed a problem for me.
:dotted; and :dashed; are specified separately for a reason - a rectangle is not a circle. While it is possible to work around, web builders working at a remove often don't spot the difference. As far as they are concerned, the brief has been met.
to be fair, at 1px, it is less of a problem but when heavier weight dotted lines are used as design elements and code is selected over graphics to save on page load, things can go quite wrong.
For those needing a single dotted line that absolutely has to be a true dotted line, I would suggest a div with a small repeating background image. Could also try styling up a <ul> if you want to keep it all code.
I have the below code:
<button onmousemove="this.style.border='2px #555555 solid';"
onmouseout="this.style.border='';">Test</button>
On mousemove, it correctly changes the border as specified. On mouseout my intention is to change the border back to the original. This works in Gecko based browsers but not in IE. IE removes all the borders and the button becomes 2D.
How do I get back the original 3D look of the button?
Note: For debugging, I tried alert(this.style.border) the get the value of the original border. It shows it blank. So the original border value seems to be blank. But setting to blank does not bring the original look back. :(
Try setting and clearing a class for the element and assigning the border value to the class. Just like below:
.buttonHover
{
border: 2px #555555 solid
}
<button onmousemove="this.className='buttonHover';" onmouseout="this.className='';">Test</button>
Note that this simple JS code will break your existing classes assigned to the element if there are any. If you are to use additional classes, please add a comment declaring the situation and I'll change the code accordingly.
As far as I know, there is no way to restore the original OS look once the element's border is set, although it strikes me as odd that even emptying border doesn't do the job. Ah well. The OS style is not just a classic border, but includes a black outline (depending on OS visual settings, even more than that).
Seeing as IE < 8 doesn't understand outline, I think the best workaround would be putting an element around the button, and highlighting that on hover.
Would recommend using CSS for the same rather than javascript. You can do the following.
Define only the hover propery of the button.
HTML :
<button value="Hello">Hello</button>
CSS :
button:hover
{
border:1px solid #333;
}
I think that what you are looking for can be found in the bowers user agent CSS. Here is a table that will give you a good idea of whats going on with different browsers http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm .