I've noticed that in some situations, in some browsers, my horizontal overflow scrollbar doesn't show up until you START scrolling. That's not good ... users need to know that there is content beyond what's currently being shown.
Is there a way to make sure that the scrollbar is always shown?
I've seen this issue on Lion, on a MacBook, in Safari, Chrome.
Since you're using Lion, check System Preferences > General > Show scroll bars. This is an OS preference.
The three options are:
Automatically based on input device
When scrolling
Always
This is a "feature" they're trying to carry over from the iOS. That said, you can try something like this:
::-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);
}
http://www.hardcode.nl/subcategory_2/article_575-force-scrollbars-on-mac-os-lion-webkit.htm
Well, there really isn't a way around this without creating your own scrollbar. So I opted to created a custom button navigation.
Related
I have been changing lots of things to my website and now I somehow have created it to not fit to screen and has a tiny scroll to the right. Can someone see the issue that is causing this.
Looking to get rid of the black on the right hand side. Only the top and bottom should be black.
www.jobspark.ca is the website
UPDATE
So this is the line of code that is causing the black space. But when I remove the 100% the image shrinks back to fit into the 960px site width. Any ideas? im ready to give up haha Squarespace is not easy to modify
#collection-513d5347e4b0abff73be5267 #site > .wrapper {
max-width: 100%;
padding: 0 0px;
margin: 0 auto;
}
My guess is you you have width:100% on your div elements, this forces the client area of each element to fill the browser. Now since the elements' borders add an additional pixel on each side, you end up with a scrollbar.
I would recommend that you omit width:100% from your div elements. It should auto expand to 100% of it's parent and that should solve your problems.
If all fails this should work,
overflow-y: auto; // or replace auto with scroll
overflow-x: hidden;
This is my first question here.
I was trying to get an element vertically aligned inside a parent with fixed width and height. Inside the parent box there is also a header, that needs to be absolutely positioned in the bottom.
When working on it, checking cross browser issues I saw a difference on chrome. In FF, IE 8 & 9 it works as it should, if you open the sample in Chrome (19 right now) it gives a 1px gap to the parent as you may see.
Interactive example of the problem - CSSDeck
How I see it - 1px gap
I have tried removing white space, and quite a few things but I couldn't get to remove that gap...
Is this a bug? If you could help me remove the gap, or achieve the same result in a clean way that works cross browser (ie8+) it would be great.
See my example fiddle: http://jsfiddle.net/tnRem/
Basically I removed display: table from #outer and set height: 250px and box-sizing: border-box; (only for IE8+) to #inner.
I tried it with Chrome 19.0.1084.46, Fx12 and IE8
Hey folks, I'm attempting to style a client's article h1's with a simple background color and padding. I need the text to be centered vertically and horizontally within the padding, but I'm finding there's a baseline difference between OS X and Windows. At least that's my best guess. Here's the specific code for the offending elements:
.entry-title {
color: #fff;
background: #A3BCC3;
font-size: 24px;
text-transform: uppercase;
text-align: center;
}
.normal .entry-title {
float: left;
width: 100%;
padding: 10px;
margin-bottom: 30px;
}
Here are the screenshots:
OS X: http://i54.tinypic.com/2a0bx1v.png
Windows: http://i56.tinypic.com/2gv4vie.png
You'll notice it's rendering just fine on Windows, but it's a few px too high on OS X. They render the same throughout browsers, the only difference is between the operating systems. The font is Quicksand Book, and is being implemented via #font-face. If you need to see a working version of the site, it's available at http: // angryg.nom.es/rosebud. If you do manage to check it out, you'll notice I'm having the same problem on the static content footer at the bottom of the home page.
Anyway, any help would be greatly appreciated.
You need to specify a line-height for the specific browser (painfull) use this type of properties: 1.1, etc over specifying pixels, from my experience it works better.
Also, still in the Mac, between Safari and Firefox you'll notice a difference between line-heights! So this isn't just OSX vs Windows.
Your font-files may be incorrect.
I had the same issue with a local installed webfont too.
Thankfully Google provided the same font as a webfont, solved the problem for me.
Default font of operating systems is different so add a font-family: Arial to your elements css. It should work in OSX and Windows because Arial is supported by both of them.
I am getting a horizontal scroll bar in IE6. Attached the path to zip folder. Download and open index.html page in IE6. Let me know how to remove the scroll bar.IE6-horizontal-scroll bar
Its one or more bad values in paddings. Try replacing all "padding" with "xxx" for a moment and you'll see that the problem disappears.
You also need to study the broken box model on IE.
Solution:
Replace all padding: 10px with padding: 10px 0;
Fix what does not look right (padding wise)
You need to set the horizontal padding of div#container to zero too. You're only setting the top padding in skin-ie.css to zero now. Change padding-top: 0px in skin-ie.css to padding: 0 (the px is unnecessary for zero).
tried
html{
width:100%;
overflow-x: hidden;
}
body{
width:100%;
overflow-x: hidden;
}
yet?
EDIT:
This works but hides right side edge content. See the link screenshot. http://shivanand.in/temp/rightside-edges-hidden.gif – Shivanand
Hmm, that is weird. Are you using any position: absolute DIVs with width set in pixels (not %) that are causing this to happen?
I have a website that is perfectely centered aligned. The CSS code works fine. The problem doesn't really have to do with CSS. I have headers for each page that perfectely match eachother.
However, when the content gets larger, Opera and FireFox show a scrollbar at the left so you can scroll to the content not on the screen. This makes my site jump a few pixels to the left. Thus the headers are not perfectely aligned anymore.
IE always has a scrollbar, so the site never jumps around in IE.
Does anyone know a JavaScript/CSS/HTML solution for this problem?
I use
html { overflow-y: scroll; }
To standardize the scrollbar behavior in IE and FF
FWIW: I use
html { height: 101%; }
to force scrollbars to always appear in Firefox.
Are you aligning with percentage widths or fixed widths? I'm also guessing you're applying a background to the body - I've had this problem myself.
It'll be much easier to help you if you upload the page so we can see the source code however.
#middle
{
position: relative;
margin: 0px auto 0px auto;
width: 1000px;
max-width: 1000px;
}
is my centered DIV
Well you don't need the position: relative; - it should work fine without it.
I take it that div has to be 1000px wide? It would still be a lot easier to answer this with the actual website.