http://jsfiddle.net/qJKKC/2/
I've got a nav peeking out from the right-hand side of the screen. As it does, I use an :after CSS generated element to darken the main content. In other browsers, this works fine, but in IE10 the generated element overlays the scrollbar. In the above fiddle, push the bottom of the window up until a scrollbar is present, then click on the text and you'll see what I mean.
I'm using the .window element to prevent horizontal scrolling to the nav.
How can I prevent this element overlaying the scrollbar, or otherwise achieve the same effect?
I can't see the problem as I don't have IE10 but as a guess you could try adding a high positive number to the z-index on the nav element:
.nav {
z-index:999;
}
Related
I have a <div> that shows on :hover of another div. In IE & Firefox, the entire <div> shows when hovered, but in Safari, part of the hovered div is hidden behind an adjacent div. I have overflow: visible set on the hovered div, but the problem persists.
Open this fiddle in both Firefox and Safari and you'll see the issue in Safari.
http://jsfiddle.net/emturano/TRGm9/
z-index will not have an effect on an element if its position is set to static (as it is by default). Set position:relative on the container and then position:relative; on the items inside to make sure that the hovered element is frontmost. You'll need to make positioning tweaks to make sure everything lines up correctly.
In both Safari and Chrome, the placeholder attribute seems to add invisible width, causing horizontal scroll-bars and a flicker-like rendering when the window is re-sized horizontally.
overflow: hidden; can be applied to the parent element to curb the issue. However, it clips my form field focus effects.
Is there a way to use certain vendor prefixes values to prevent this such as ::-webkit-input-placeholder {} or some other way?
When the attribute is added to the form input, a horizontal scroll-bar flickers when re-sized horizontally on a webkit browser. Specifically, what style is triggering this behavior? And how do I prevent or override this behavior!?
Many input elements have default padding. When you state width: 100%, it causes the element to be width 100% + padding. To prevent the padding from increasing the width simply use box-sizing: border-box;
I looked at your site in Chrome and Safari, but it doesn’t seem to be having the issue you mentioned. However, your top image is overflowing to the top because you sat the overflow to hidden and you didn’t set a top-margin for your header. So, I went ahead and created that margin:
#header img {
margin-top: 50px;
}
and that solved the problem. I wish I could post an image.
I was trying out the on hover scroll bar style that is used in many places but ran into a problem. The appearance of the scroll bar on hovering causes text to jump which looks jarring.
#scroll {
width: 200px;
height: 200px;
overflow: hidden;
}
#scroll:hover {
overflow-y: scroll;
}
This Fiddle shows the jumping text on mouse hovering
Could I somehow prevent the jumping of text while keeping the appearance of scroll bar on hover?
just use <p> tag for your text like this:
http://jsfiddle.net/pdbYz/6/
UPDATE for firefox:
http://jsfiddle.net/pdbYz/19/
I propose to have another container within div#scroll with fixed, slightly smaller width.
This way your text won't 'jump' when scroll appears. Since scrollbars have different width on different OS (Windows, Mac, Linux) you should leave some free space to the right, where scrollbar appears.
Please see my fiddle here: http://jsfiddle.net/5RXSW/
To make containers more visible I've applied paddings and background colors. You can tweak these styles for your needs, but please reserve some pixels to the right of div#scroll for scrollbar.
You can change the width of the container on hover, so that when the scrollbar appears, it pushes outwards instead of inwards. This prevents the text from moving.
http://jsfiddle.net/pdbYz/3/
To achieve this I've added this line to your CSS:
#scroll:hover {
width: 360px;
}
Ok got this strange issue where i have a absolute positioned div with inside a header. Then there's a nav tag with a margin and for some the absolute positioned div instead of sitting top left of header it positioned where the nav starts. So if the nav has 100px top margin the div starts 100px down.
But the strange thing is if I apply a border to the header the absolute positioned div acts as how i would expect.
I'm using html5 boilerplate styles, this i suppose could be the issue.
It's easier to explain if you view an example. The below links are stripped down version and have identical mark up apart from one where the header has a border and the other it doesn't.
Example with the problem:
http://bennyb.co.uk/test/no-border.html
Example with the issue fixed when the border is applied
http://bennyb.co.uk/test/border.html
Thanks
B
EDIT:
Ok thought this was actually just related to nav but seems it's the same if a div
Apply
overflow: hidden;
to the header.
http://www.stringfieldassociates.com/
In Safari, all nav links that are horizontally aligned with the large central image are blocked and can't be clicked. It's like the image is taking up the width of the page, but it's not--it has a set width and height, and the only CSS applied to it is margin-top and a negative margin-right to position it. I had used positioning before but this bug cropped up in Firefox and IE. Using margins for positioning worked fine everywhere but Safari, apparently.
The image is inside the div that makes up the blue bar on the top. That bar is a div and it just has the menu as a list and then the image.
Any ideas? I almost never see Safari bugs that aren't also in Firefox, so I am stumped.
Jeremy
I would go with:
#header_img{
left: 50%;
margin-left:-230px;
position: absolute;
}
Try using an absolute position on that header image instead of a negative margin right.