If you look at www.ijob.dk in IE7 and IE8, the horizontal scrollbar is MUCH larger than on ex: Firefox or IE9 (Don't even think the scrollbar shows in ie9) - Can't seem to figure out that is causing the big space at the right, since the horizontal scrolling is so large?
From your comment i understand now that you meant the horizontal scrollbar, just add this to your CSS to hide it:
html {
overflow-x: hidden;
}
There is some renegade element that is creating that extra few pixels of horizontal space that needs to be checked, but i think it is ok to just hide it, since your design is top-bottom.
Related
To show a list of completions, I need an absolutely positioned element to take the width of its content, and scroll vertically when necessary. The problem is that the way CSS computes the width of an absolutely positioned element seems to not leave space for the scrollbar, causing the last characters of the widest completion to be hidden below the scrollbar (on platforms where scrollbars take up space).
(Edit: It was pointed out to me that this works by default in Chrome now, though Firefox and Safari still have the issue. It may not be a problem with standard CSS, but with implementations.)
The styles look like this, with a sequence of completion elements inside the completion-list:
.completion-list {
overflow: hidden auto;
max-height: 5em;
position: absolute;
}
.completion {
white-space: nowrap;
}
You can see it in action in this codesandbox.
Adding a padding to make space for the scrollbar isn't a great solution, because it'll also show up when there is no scrollbar (and scrollbar width is platform-dependent). I'd really prefer not to use JavaScript to dynamically measure the bar width and kludge in the space.
Tested Safari, Chrome and Firefox on MacOS. The scrollbar takes up zero space. It overlaps the text when scrolling, but disappears when you stop scrolling. I have no problems at all with this user experience.
I created a horizontal scrolling page with a lot of images positioned next to each other. The images have to be positioned inline to align them vertically centered. Also they must not exceed and have to adapt to the viewport. To achieve the responsive effect I wrote a little JS-script that forces the browser to repaint the inline elements, which normally would only happen after reload.
Here is a fiddle.
My problem is: I want the .container to horizontally wrap all containing elements with no gaps between the images. Unfortunately almost every browser behaves different. To make it more visual I colored the .container in grey and gave the wrapping ul a green border.
In Firefox, Opera and modern IE all images are wrapped perfectly if I add float: left; to the .container. However this has no effect in Chrome and Safari: The wrapping ends with the width of the viewport.
Do you have a solution how to achieve the same effect in Webkit browsers?
Additionally, if I decrease the height of the viewport, gaps appear next to some of the images (but not in Safari ...). Those gaps look like a padding within the list elements, all different in size. If I remove the horizontal scrollbar with overflow: hidden; the gaps disappear in Chrome, but not in Firefox. In IE the gaps are even wider.
In HTML I already removed all white-space characters.
What's the cause of those gaps and how can I remove them in every browser?
Thanks for your help!
I really like the lionbars widget, but there are a few things that aren't working out. I've dug into all these issues locally, so I thought I would ask if there's known ways to work this, before I start re-arranging the code.
horizontal scrolling is not working (vertical is)
scrollpane (and corresponding scrollbars) is not resized on window resize
there's a weird discoloration on the right side of the vertical bar if the window is zoomed out too high
can I control scrollbar width ; the default vertical scrollbar is too narrow
To answer your issues in order:
Horizontal scroll: Your code is loaded on JSFiddle, but you've set LionBars on the wrong div. Just set the LionBar function on #parent instead of #child and horizontal scroll should work: http://jsfiddle.net/3XPNk/8/
However, I've found that the horizontal scroll will not work in Webkit browsers (Chrome and Safari) on my Mac due to an issue with how the browsers treat horizontal scrollbars and how the LionBars script itself detects a horizontal scrollbar. You may want to contact the developer about this.
Scrollpane not resizing: Not sure what you mean. Please elaborate? You've defined #parent and #child as fixed pixel sizes, so they will obviously not resize. Try percentages if you want it to resize fluidly.
"Weird discoloration": This is because the script actually just offsets the real scrollbars beyond the viewable area of the scrolling div by a pixel amount. Once you zoom out, this breaks because the scrollbar width changes proportionally with zoom and the offset amount becomes too small to squeeze out all of the scrollbars. That weird discoloration you see is a bit of the scrollbar squeezing back into view. Again, you probably want to tell the developer about this.
Changing scrollbar width: Yup! Just edit the values for .vertical and .horizontal in lionbars.css.
Fixing issues 1 & 3 above will require some fiddling around with the script. This is not exactly the same (there is no nifty fade and you will have to style it significantly on your own), but you may want to consider using this plugin instead, as it seems to be more developed and compatible overall: http://jscrollpane.kelvinluck.com/
I have an IE7 CSS issue. I have setup a demo in jsfiddle, but basically I have a tabbed menu setup with rounded corners on the tabs (no rounded corners shown in jsfiddle). The rounded corners are floated left and right.
Everything works great in FF and Chrome, but in IE7 the floated elements are causing the tabs to consume the entire width. I have tried numerous things, overflow: hidden, position, display, etc... but I just can't work it out!
Any help appreciated.
http://jsfiddle.net/EszSr/1/
I would just set the corner elements to display: absolute; and the containers to position: relative if needed. That should work.
Simple demo on jsFiddle: http://jsfiddle.net/ZSpjk/1/
Something that I'd try (don't have access to IE7 atm.) is, to give the tabs a width (only for IE, e.g. through a conditional comment). It could be a smaller width than you actually need, IE will "widen" it as needed for the content.
I have defined a tag with a CSS attribute "overflow" set to "scroll". This is giving me both the vertical and the horizontal scroll bars. I only want the vertical scroll bar. What should i do?
You could try using the
overflow-y: scroll;
This will give you a vertical scroll-bar...
Using
overflow-y: auto;
will only show the scrollbar if it is necessary.
Try using "overflow-y: scroll;" instead. It's CSS3, but as far as I know, it's supported by every modern browser (IE6+, FF, Opera, Chrome/Safari/WebKit/etc.).
A quick explanation of the various overflow/-x/-y values, for those not familiar with them:
visible – The default. Content which does not fit "overflows" the box, usually appearing over or under adjacent content.
hidden – Content which does not fit is "guillotined" — cut off at the edges of the box.
auto – Content which does not fit causes a scroll bar to appear. Does not necessarily cause both scroll bars to appear at once; if content fits horizontally but not vertically, only a vertical scroll bar will appear.
scroll – Similar to auto, but scroll bar(s) appear whether needed or not. AFAIK, mostly used to prevent centered content from "jumping" if a scroll bar needs to be added to dynamic (e.g. AJAX) content.
overflow:auto;
I realize this is a very old question but I stumbled across it today. If, like me, you only want the y-scrollbar and then only when it's needed, I found this works:
.myclass {
overflow-x: hidden;
overflow-y: auto;
}
Cheers, Mark
overflow-x:hidden;
overflow-y:scroll;