How to fix border radius in IE8 (ie7, ie6) - javascript

I'm using this CSS:
#main{
border-radius: 50px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-border-radius: 50px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius: 50px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
}
It works perfectly in FF, Chrome, IE9(i think) and Safari...
But its soooo ugly in IE8 ,
There are users using IE8, i have tried the .htc file but that dont support border-bottom-right-radius and border-bottom-left-radius...
I'm looking for a JS or HTC file that does support that (or an other solution for this)
I only need it for IE8, but its great if it support IE6 and IE7 aswell!
Thank you!

You could try CSS Pie. I've not used it, so I can't vouch for it.
Overall, though: I'd let it go. The absence of rounded corners won't break the experience for users in IE8. More capable browsers get the better experience. Progressive enhancement is a beautiful thing.

border-bottom-right-radius Browser Support:
border-bottom-right-radius is supported as-is in Opera 10.
In order to get it to work in Firefox and Safari, you have to use two related properties:
-moz-border-radius-bottomright - for Firefox 3+
-webkit-border-bottom-right-radius - for Safari 2+
It should be supported by Internet Explorer 9.
border-bottom-right-radius Examples:
Create a standard rounded corner:
border-bottom-right-radius:1em;
-moz-border-radius-bottomright:1em;
-webkit-border-bottom-right-radius:1em;
To create a shallower curve:
border-bottom-right-radius:1.6em 1em;
-moz-border-radius-bottomright:1.6em 1em;
-webkit-border-bottom-right-radius:1.6em 1em;
border-bottom-right-radius Special Notes:
Don't forget to set the -moz and -webkit styles as well as the basic border-bottom-right-radius so that your curves show up in most modern browsers.

use make a curve border .ping image in photoshop and use it .....because border-radius-bottomleft ,border-radius-bottom right etc not work on ie6-8....only border-radius property work in ....
THAT IS NOT POSSIBLE TO SOLVE THAT PROBLEM USING BY CSS SO USE THAT TRICK
background-color: #E8EDEF;
border-radius: 10px 10px 10px 10px;
display: block;
margin-left: 78px;
width: 591px;
behavior: url(pie/PIE.htc);
border-radius-bottom right*/ not working in ie6-8

Related

Overflow-y: Scroll not showing scrollbar in Chrome

I am generating a list of organisations of the left hand side of this page: http://www.ihhub.org/member-map/
This list is generated through appending <span> tags that are linked to the corresponding map.
My issue is - the scroll bar does not appear in CHROME but does appear in Firefox and Safari.
Any solutions?
UPDATE:
This issue appears to be isolated to MAC OS.
SOLUTION:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
According to CSS - Overflow: Scroll; - Always show vertical scroll bar?: OSx Lion hides scrollbars while not in use to make it seem more "slick", but at the same time the issue you addressed comes up: people sometimes cannot see whether a div has a scroll feature or not.
CSS fix:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
I am seeing scroll bar well. If you are using Mac, you may want to make sure that scrollbars are always shown
Add this to your css
.list::-webkit-scrollbar {
-webkit-appearance: scrollbartrack-vertical;
}
or
.list::-webkit-scrollbar {
-webkit-appearance: scrollbarthumb-vertical;
}
I am using Windows 8 and Google Chrome version is 48.0.2564.97. And its working perfect. See in image highlighted area.
I am using Crome Version 48.0.2564.97 m
And it is working just fine..
Change it to overflow-y:auto in case if there are not enough items it will not show scroll.

extjs 4.2.1 - ie8 and round corners / drawing circles in Ext.Components

In our app, we have a button defined as follows:
{
xtype : 'button',
text : '<span class="disk">1</span> Define Layout'
}
where disk is described like this:
.disk {
display: inline-block;
vertical-align : middle;
background-color: #FFF;
margin-right: 5px;
//margin-bottom: -7px;
padding: 12px 8px !important;
height: 25px;
overflow: hidden;
width: 25px;
border-radius: 25px;
color: #555;
line-height: 0px;
}
This works fine in ie9+, ff, and chrome. However, in ie8 all I see is squares. I am aware of the fact that border-radius is not part of the IE8 CSS spec and that there are work arounds like CSS3PIE (assume we can't use this :) ). Also, I know that Sencha Cmd (v4.0.2.67) has image slicing built into the build system, but it only seems to work on Ext components. How do I draw the disk for this particular case?

CSS rounded borders in Firefox

How do I give Firefox rounded borders using border-radius? I am using Firefox 14 on Ubuntu.
Edit:
I have tried
-moz-border-radius
and all the other browser specific comments, none of them have worked. I had already found this after searching on Google, and that is why I asked here.
Does it make any difference if I'm using KDE? I have already added Firefox in the window-specific overrides.
My userChrome.css file starts with this:
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
Is it supposed to implemented differently? The rest of the css codes I have used work perfectly. Thanks!
THE RESULT:
I wanted to round the corners of the entire border, but apparently it's impossible. Sorry for the misunderstanding and thanks for your trouble!
Um, have you specified a selector for your property? The file you linked lacks them. Try this:
* {
-webkit-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
The -moz-border-radius css property would take care of this.
Here are the browser specific border radius properties:
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
Use this.
-moz-border-radius: <radius>px;
Please use -moz-border-radius property for the border radius. For more info please visit
rounded border

iPhone-like jQuery Scrollbar

I'm trying to find a jQuery scrollbar that looks like the one of the iPhone: a simple black bar without the up or down buttons. I've found a few scripts but most tend to do so much more than I need. I basically have a div with a fixed height that is set on overflow:auto to which I would like to apply this scrollbar. Help would greatly be appreciated!
Matteo Spinelli has an iPhone-like scrollbar inside of his iScroll library. You should try looking into whether or not you can adopt it to your needs.
What are your browser requirements?
You should try to avoid javascript solutions since they will increase the complexity of your page. If a third-party scrollbar javascript library breaks, you will have to debug it yourself (been there, done that).
Chrome has full support for CSS3 scrollbars, something like this should make an iPhone like scrollbar
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
IE allows styling scrollbars with vendor specific tags, but its very limited. e.g.:
scrollbar-base-color: #663366;
scrollbar-face-color: #99CCCC;
scrollbar-track-color: #996699;
scrollbar-arrow-color: #330033;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #CCCCCC;
scrollbar-shadow-color: #663366;
scrollbar-darkshadow-color: #000000;
Here is a jsFiddle with the styled scrollbars:
http://jsfiddle.net/APmLZ/3/

Iframe Scrollbar css

How do I go about changing the css of an iframe scrollbar?
My problem with the current scrollbar in my iframe is the frame is not very wide and the scrollbar appears bulky in it and takes up too much space.
Using "scrolling="no" makes the scrollbar disappear but then the user cannot scroll.
By the way, My browser is Google Chrome.
This is the css to change the scrollbars in iframes in chrome
body {
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
}
html {
overflow-y: auto;
background-color: transparent;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
display: none;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
height: 30px;
background-color: transparent;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 16px;
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #666;
border: 1px solid #eee;
-webkit-border-radius: 6px;
}
You can make it by getting scrollbar element in the frame, for example use jquery:
$("#iFrameId").contents().find("-webkit-scrollbar").css("width","5px")
But as others said - it's not a pretty solution.
You can't style a scrollbar (other then to turn it on and off) with CSS at all.
There is some proprietary stuff which lets you apply some styling, but this is supported only by IE and Opera.
Chrome provides no mechanism to do this.
As a commenter points out, WebKit now supports a different proprietary mechanism for styling scrollbars. I've no idea if the Chrome build of WebKit has this merged or enabled though.
You could look at replacing the scrollbar wholesale with JavaScript, and jScrollPane appears to do a reasonable job of not breaking the usual interaction rules.
That said, changing the appearance of user controls is something I'd try to avoid, and making something users need to aim a pointer at smaller sets off the flashing red light marked "Fitts's law".
A better solution would probably be to "Not cram so much information into so little space".

Categories