I am trying to create a scroll box whereby I can alter the shape and colors of the arrows and also the background of the text area.
I am trying to create the same scroll box as the followings but to no avail.
You can style Chrome, Opera and IE's scrollbars. Unfortunately, Firefox doesn't support it.
Moreover, each browser engine uses its own prefixes and properties to style the scrollbars, some offer more than others.
WebKit example:
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: grey;
}
::-webkit-scrollbar-thumb {
background: black;
}
There are plenty of resources online about styling the scrollbars.
Bottom line is:
if you want 100% browser compatibility, use a JavaScript solution (google for "jquery scrollbars").
Great question!
As the other answers state the main scrollbars are styled and handled by the browser so this is not something you would achieve universally in all browsers.
However having said that there is a great resource here to help with this, its not going to produce exactly what you asked for but it will give you some cool scrollbars.
Every browser handles scrollbars with their own styling so changing them and making them look universally the same across browsers is very difficult. I know this is accomplishable with javascript but I'm not able to point you in the right direction of where to start with that.
Related
In all other browsers, including IE10, this CSS removes the outline when clicking on a mapped area on an image anchor:
area {
outline: none;
}
But lo and behold, not in IE11, at least not the latest version I can get for Win7. A quick demo page: (demo removed). Click on a thumbnail; on the full-sized images, the right 60% is a link to the next image, the left 40% to the previous image.
I've tried all manner of CSS variations, including:
outline: none !important;
Applying it to every CSS class and ID I can think of seems to make no difference, including *, img, map, area, .gr-slideimage, #gr-thisMap, and so on. The only thing I've found so far that works is the old:
hidefocus='true'
on the img tag itself, but that doesn't validate, of course.
Can anyone crack this with CSS?
IE11/Win7 seems to ignore border settings set to 'none' in some circumstances. Had this issue with CSS styled buttons this week. I had to make the border 'solid' and change the color to match. Sure there's a better way - surely MisterNeutron and I aren't the only ones to notice this bug?
It appears IE11 needs outline-style: none; in order to work properly. You can also refer to: http://msdn.microsoft.com/en-us/library/ie/cc304065(v=vs.85).aspx for any other possible IE related issue. Hope this helps.
I've been trying to format the appearance of the RSS button in css, and for some reason there's a big difference between browsers. Chrome renders it perfectly, as if I don't need to mess with it at all. But on Firefox and IE9, it is uneven with the rest of the menu. So I added padding to even it out, and to elongate the hover colour to the bottom of the menu bar. That fixes the issue on Firefox, but it makes the menu uneven in the opposite way on Chrome. Suddenly the bar is too long for the other menu items.
.menunav a {
padding-right: 6px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 6px;
font-size: 100%;
}
.menunav-rss:hover {
background: #ff6600;
font-size: 100%;
padding-top: 3px;
padding-bottom:3px;
}
This is coming from a wordpress site. I'm quite new to css or coding, so I'm not entirely sure how to amend this. Fixing one seems to make the other worse, and I'm not sure why only the rss button is uneven.
For reference, this is what the menubar appears without any padding on both Firefox and Chrome.
Any help would be appreciated. If you need more information, I can easily give it.
Its due to browsers having different "preset" values. Think of it as each browser having their own stylesheet that gets applied before yours.
The only workaround really is to use a CSS reset. Eric Mayers is considered to be the 'goto' one, and covers pretty much everything you'd want it to.
Simply load the reset before your own styles, and then you should be able to adjust everything to look more or less the same across all browsers.
It's a bit of a pain to have to do it, but you shouldnt really rely on the browser's built in default styling.
I've run into the same issue multiple times. I've found that setting vertical-align: top makes it look the same in both FF and chrome (probably IE9 as well, although I haven't tested that), after which you can add padding-top to position the text within the anchor exactly where you want it.
In my first attempt at a responsive web design I have run into a curious problem. When I resize my browser down to 615px width or less, a horizontal scroll bar appears. I'm not sure what element is causing this. I tried putting a border around each element using
* {
border:1px solid #FFF;
}
to help me visualize where the edges of the elements were but I don't see any borders extending beyond the window boundaries.
Can someone take a look at my site and give me some insight? http://www.ritualbliss.ca
Thanks!
Edit: So I only get the scroll bar in Firefox. Chrome works fine and the desktop version of Safari but on my iPhone it scrolls horizontally.
Edit: the site is for a legitimate massage business but some may consider the picture NSFW
Devin,
Try using a tool like Firebug for Firefox, IE Developer Tools, or the Chrome Developer tools. I'm sure Safari and Opera have similar tools, as well. These things will give you the ability to highlight and view the various properties of every visible HTML element on the page, including Javascript and CSS information.
One other thing to think about is not using the * selector in your CSS. I am not sure why you would want to put a border around every single element on your page because to me, that would not look visually appealing. The border style attribute adds the thickness of the border to whichever dimensions it is applied to. So, in your case, every element in your page has 2px added to both its height and width, even the "html" element. This could be why you have the scroll bar but can't tell where the extra pixels are.
Also, do you have any CSS styles that set a width or min-width to 617 pixels? Or a combination of elements that share the same area and add up to 617 pixels? Maybe a table with columns that are not shrinkable?
There is a lot to look at and your URL looks like it's probably porno or something so I cannot go there at work and check it out...
Good Luck,
Matt
Edit
I fooled around with firebug for a few minutes and agree with Ruben that handling the overflow would be a good idea. Although I think the setting should be on the body instead of #content.
Try this:
body { overflow-x: hidden; }
Like Ruben's answer it is hiding overflow, but you can still get the vertical scrollbar if people REALLY narrow down their browser.
can you please warn us when it's nsfw :s
use this css:
#content { overflow: hidden }
not the best solution but you have to use firebug to find out what's sticking out
padding and borders increase the width of your element too
css3 box-sizing:border-box solved this one.
This is what I am trying to achieve:
This is what I get:
Please view the JSFiddle of this with web-kit browser (Chrome or Safari): http://jsfiddle.net/KqEqN/
This is happening when you narrow the screen but there's still visibly enough space for the button.
I've looked into CSS trying to find some sort of padding to the right of the button but couldn't. Also where the hell that horizontal line comes from?
I'm not familiar with jQuery Mobile, so I might be doing this wrong. My guess is that you must add extra classes instead of overriding jQuery Mobile's theme.
The fix involves:
.ui-input-search {
width: 50px;
display: inline-block;
}
Check it in action here: http://jsfiddle.net/NqFhQ/
Is there any workaround for IE which makes me able to use border-image? I'm developing a site and it's working properly in every browser but IE. I need to mimic these bars
I could use the ie-css3.htc hack but border-radius works only with the four corners together (which doesn't apply here, 'cause the top border isn't rounded) and the filter css property (for gradient) doesn't work with border-radius at all (it fills the whole element ignoring the border radius limits). In case there's no workaround for this, how would be the best way for doing this?
The .png files are unnecessary. Just use CSS3 pie: http://css3pie.com/
Get rid of the proprietary IE filter entirely, and use (heh, the proprietary) -pie-background:linear-gradient(values) instead.
Works harmoniously with individually rounded corners: border-radius: 0 5px 5px 5px
In that case, the top-left corner would be no border-radius, and the other corners (clockwise) would be at 5px each.
Then use behavior:url(path_to/pie.htc); in the same style.
Remember also that the path_to is relative to the document being viewed, not the CSS file that calls it. Make sure to check that if it doesn't work right off the bat.
I've tested this plenty of times and it works like a charm.
Additional information:
If sometimes your styling appears and vanishes, try giving your element a position:relative and a specified z-index. The way CSS3 PIE works, it plays with the z-index and can make your styled gradients (and rounded corners, etc.) appear underneath the background if not specified, particularly if you use negative margins or something odd like that.
The only real solution might be to make your corners or sides images. Its looks as though everything is the same size just has an expandable width. so it should be farely easy to code with almost no lag time for load.
This is why I stick the the concept of using what is proven available. Meaning, if your target market is using IE7+ you should be conscious while designing and programming, so you dont run into small problems like this.
All this CSS3 and HTML5 is awesome stuff but we, as developers, are still limited to what everyone see's. If you want to have an even playing field for all users, then you can rely on new coding practices until you can do things, like border-radius, across the board in all browsers.
On the flip side, you might just not care about what IE users see; therefore you can just have the different style as a browser enhancement, for people who use the other browsers.
Take a really wide image of that red gradient with the proper 4 corner cutouts, save it as an image (transparent PNG on corners since you are not supporting IE6).
For each of those header areas you will wrap it like so:
<div class="outer"><div class="inner">ENQUETE</div></div>
You set this image as background on both of those elements, offset one of them so you can get the image endcaps on both beginning and end. Adjust the spacing/shift until you are clear on both round segments.
.outer {
background: transparent url(redgradient.png) no-repeat 0px 0px;
margin: 0 10px 0 0;
}
.inner {
background: transparent url(redgradient.png) no-repeat 100% 0px;
position: relative;
left: 10px;
}
Hit the exact same issue and gave IE<=9 via conditional comments a fall-back. However, this solution is now broken with the latest IE10 prev4 still not supporting border-image and also does not support IE conditional comments. Back to the drawing board...
Working on the solution we should really use: feature testing.
Using Modernizr which adds CSS3 class names to html tag and testing for border-image (do things the web standards way) or no-border-image (give IE users the best you can do but not the same experience as compliant browsers and display an IE visible only link to your page that tells them how to get a better experience: drop IE for example).
No, but the ie-css3.htc thing may be the only possible work around if that's the one I'm thinking of. Or was there another js script I'm thinking of that solved this? Can't remember.