I have some fairly complex stacking arrangements going on in a site I'm working on. With a background image on a div being a gradient that overlays an image within it with a lower zindex. Like this:
So, this works fine at larger widths. When the width is smaller the image appears over the gradient background, like this:
Something's happening and I can't figure out what. I'm using twitter Bootstrap 2.3.0 as a framework. Link: http://www.osullivans-pubs.com/draft
EDIT: I'm pretty sure the problem is something to do with having a negative z-index on the image (#back img). But having the z-index at zero means the image appears above the gradient...
UPDATE: I worked it out. It's not really possible to have an element with a background image overlap a child element. So I created an absolutely positioned element before (and seperate from) the container and applied the appropriate zindex to that. That fixed it.
you have to add a z-index in liquid-slider.css file below is the code...
.liquid-slider-wrapper {
margin: 0 auto;
clear: both;
overflow: auto;
position: relative;
width: 1110px !important;
z-index: 20;
}
I want to accomplish a preview of an image gallery that is wider than the screen, using overflow: scroll (or auto).
To the right, a shadow that overlaps the last visible image should indicate that more images are visible to the right.
Here is a Fiddle: http://jsfiddle.net/SBdLg/
First, I thought: Easy, give that image gallery a box-shadow: inset. But that will be shown behind the images.
Now, with an overlapping div that has position: absolute, I reach the desired effect BUT the box-shadow also moves when scrolling to the right.
IMHO, this problem would also occur when using an image containing the shadow instead of the div on top.
Is the desired effect possible by CSS at all?
Removing position: relative from the outer DIV and positioning the shadow precisely where you need it (this is the ugly bit) will help you achieve this.
Check the demo: http://jsfiddle.net/SBdLg/11/
The problems can be seen here: http://www.skicoloradorentals.com/secondary.html
1) the gap below the contentBorderImg
2) contentBorderImg reduces to 69 pixel height instead of 87 (18 px diff = same as gap)
3) the content div doesn't sit over the contentBorderImg even though I assigned a high z-index to it
contentBorder - this is the wrapper/border for the content area with a 1-px border
contentBorderImg - this is the rounded corner image which is displayed over the top part of the wrapper
.content - actual content div that I want to reside over the contentBorderImg
I was able to make the same concept work in the left column. I tried duplicating that code to no avail. I appreciate your help immensely.
Try giving contentBorderImg's
Z-index = -1;
and then for #contentBorder use
border-radius:9px 9px 0px 0px;
I have used border-radius to mold the border as per the rounded corner image.
I have a div class set up with the following CSS style:
div.multiple_choice{
border: 1px solid black;
max-width: 300px;
max-height: 200px;
overflow: auto;
}
The problem is, when the text inside doesn't force the DIV to reach the maximum height of 200px, the vertical scroll bar still shows up. I can click on the up and down arrows but it only moves the contents up and down by about a pixel or two.
This is occuring in Google Chrome (version 18.0) and Iceweasel 11.
As it turns out, another CSS style was causing the issue:
body{
line-height: 1;
}
Anyone interested in learning about how and why this would cause an issue, can read about the line-height property here
I was having an issue with this, and I found that having position: relative on the child elements was causing the problem. Obviously this can't be the solution for everyone, especially if position: absolute is being used, but for me it worked.
Just to put in evidence the #Kuba Orlik's solution (he posted as comment on the accepted answer) that's the only one that worked for me.
Add this on inside elements:
line-height: normal;
Note: Explicitly normal not 1 because it's different
I have encounter this problem.But I solved this use the following css style:
div.yourcontainer{overflow-y:auto;}
If the container was higher than max-height,the vertical scrollbar will show.
I had this problem when trying to wrap a list (flex column) of react components in a div, I resolved it by changing margin of elements within each list item to be 0.
The approach to troubleshoot this for me was to inspect the list items (perhaps each <li> in OP) and see what styles were making the div think each list item was larger than what was visible to the human eye.
Here is an example of inspecting a rogue margin on an icon within a list item in my project:
Solution is to set the style of that icon to have a vertical margin of 0, though in my application I just made all the margin 0 and added some padding-right.
I also had this problem using Bootstrap and nav. It occurred because bootstrap definds the li in nav-tabs as: .nav-tabs > li { margin-bottom:-1px; }. To counteract this, you must also do:
.nav-tabs > li:last-child {
margin-bottom:0;
}
Without setting the last-child, the following example would always show scroll, no matter how much content is in the list:
<ul class="navs nav-tabs nav-stacked" style="max-height:80px;overflow:auto;">
<li></li>
...
</ul>
I came across this bug earlier today. In my case a list of child elements had display: inline-block instead of display: block. Switching to display: block for my list of child elements in the truncated div fixed the issue for me.
In my case, the problem was with the font. We use font-family: Galano Grotesque. Apparently, this font is rendered higher than the computed height.
<div>
<p>some text</p>
</div>
So even without max-height, when the inner p and the outer div were both computed as 20px height, there was still a scroll bar (with overflow: auto) because the font was about 1px higher than expected.
So the solution can be any one of:
Use a different font.
Add padding to the outer div. This way it will be large enough to cover the extra pixel that comes from the font. In my case, adding one pixel of padding to the bottom and one to the top solved the problem.
Set line-height to a bit larger value (in my case, from 1.25 to 1.4), so it won't interfere with the font.
Set line-height to normal because then the actual value will be influenced by the font. However, according to Mozilla, this is not the preferred way.
The reason for the vertical scroll is obvious: the scrolled content is higher than scrolling area. But when you observe their heights, they are equal!
The causes are multiple but all come down to a common one: an element inside the scrolled content overflows it and makes the result taller.
How to fix this?
find the guilty element by looking near the bottom edge of the scrolled element (or to the right if you're scrolling horizontally), because they are the most likely to overflow. You should observe a height larger that their parent's.
see what makes them overflow, be larger than their container. As other answers suggest, it can be line-height, some margin, etc. Change those properties to make them fit, or as an alternative, set overflow-y: hidden to their immediate parent.
I have a long image that is currently serving as a navigation system for a site in development. You can see it here. This navigation system will eventually be split into smaller sections, but I imagine I may well see the same issues that I am seeing now.
The image is 1920px wide and the idea is that, however wide the user's browser window (up to 1920px), the navigation image (branch) will always extend off the screen. The leaves at the center of the navigation system should always be centred on the page to match the logo above.
The navigation DIV currently has the following CSS:
#nav {
position: absolute;
top: 210px;
left: 50%;
margin-left: -960px;
}
The body has a min-width of 900px.
There are two issues I am having with this setup:
As you will see when you visit the page, the width of the browser page is being set by the right edge of the long image for the navigation system, when I would like it to be set to 100% when the width of the browser window is greater than 900px, and to 900px (with horizontal scrollbars) when the width of the browser window is less than 900px.
The navigation system isn't respecting the min-width of the body, i.e. it continues to move to the left even when the width of the browser window is less than 900px, whereas the rest of the page content doesn't.
Could someone help with these issues?
Thanks,
Nick
What I would do is
Cut out the middle part of the image (the one with the actual content).
Take out a slice from the line background that can be repeated infinitely. Like so:
Put the middle part of the image into a div that is 100% wide and has
background-image: url(/path/to/slice.png);
background-repeat: repeat-x;
that will give you an infinitely resizable navigation area, without needlessly expanding the page.