Scope/Depth of CSS overflow property - html

Consider the following HTML:
<div style = "overflow: hidden; height: 5em" id = "selections-outer-wrapper">
<div id = "selections-inner-wrapper" style = "position: relative">
<ul style = "text-align:left; width: 12em;">
<!---- LOTS OF LI ELEMENTS GO HERE ---->
</ul>
</div>
</div>
My intention here is that anything within the outermost DIV should be hidden (clipped) if it extends beyond 5em in height. (That is the purpose of the overflow: hidden style attribute.) When I render this HTML using Firefox or any Webkit-based browser, the inner content is correctly clipped.
jsfiddle link: http://jsfiddle.net/Q82N9/
Screenshot with Firefox:
However, with IE-7 it doesn't work correctly. (surprise, surprise) For some reason, the inner UL element is not clipped, despite the overflow: hidden property.
Screenshot with IE-7:
It seems the problem is the position: relative styling attribute in the inner-DIV. If I remove that style attribute, it works fine on IE-7. However, I need the inner-DIV to have a relative position, because certain Javascript code that I'm working with assumes it does in order to scroll it up and down.
Question: So, is there some reason this isn't working on IE-7? Is this a well-known problem with a workaround? Or is IE-7 actually doing the right thing and for some reason relatively positioned nodes can't be hidden using the overflow property.

Add position:relative to container with the overflow declaration, and problem should be solved.

Related

Image overflowing parent container in Firefox after jQuery scrollbar added

I'll try to keep this as succinct as possible...
I have a image that I had setup to fill it's parent div horizontally and scroll vertically.
I've since added a jQuery based scrollbar to replace the native scrollbar for non webkit browsers. Since doing so, my image is overflowing it's parent horizontally in Firefox. Chrome and IE are not having the issue.
It's a little convoluted because I'm using skelJS to set container sizes based on breakpoints, but I don't think that should make a difference. The parent and child containers along with the image have width's set.
I'm going to post the HTML and CSS first and see if there's something obvious I'm overlooking. The jQuery targets the .scroll-pane2 class and is working fine beyond my overflow problem. I'm happy to post that code if there isn't something obvious that I'm missing.
Thanks in advance for the help!
A summary of the code:
HTML:
<div class="8u tasting-menu">
<header>
<div class="scroll-pane2">
<p>Scroll or click for full-size menu</p>
<img src="images/bwh-tasting-list-png.png" class=""/>
</div>
</header>
</div>
CSS:
body {
width:100%;
}
img {
width:100%;
height:auto;
}
.8u {
width:66.6%;
height:auto;}
.scroll-pane2 {
height:27em;
width:100%;
overflow:hidden;
}
.tasting-menu img {
width:98%;
height:auto;
}
The jQuery based skelton I'm using accounts for the .8u. I've used it quite regularly and never had the issue, but I'll definitely take another look at it.
I tried the overflow-x:hidden to no avail. The jQuery scrollbar I'm using overrides the overflow in the scroll-pane2 class.
I need to relook at the scroll bar script I'm using... because before installation, it worked fine, albeit with the Firefox native scrollbars.
I'll try to put a jsfiddle together.

Child div at the bottom of parent div inside a table cell

I'm looking for a way to put a child div at the bottom of the parent div. The parent div is placed inside a td which has a dynamic height depending on the content of the row. I tried several attempts including the position: relative and position: absolute solution, but it didn't work because of the dynamic height.
Does anybody has an idea?
Edit:
I'm not using the table for layout. The table is used to display data which is loaded dynamically from the server. I've added a picture which shows how the the two divs should be placed inside the td. The parent div has no specific style at the moment. I don't need to support old versions of IE. The site will be used primarily with latest versions of Firefox, Chrome and Safari.
layout http://img29.imageshack.us/img29/5271/e49.png
You should be able to position the child div by using absolute positioning. Set the parent div to relative position, then child to absolute and bottom:0; You will then need to adjust the vertical align of the <td> elements if you want the parent div to also be at the bottom.
your css would be something like -
div#container{width:200px;height:200px;
border:1px solid #666;
position:relative;
}
div#bottom{
width:100px;height:100px;
border:1px solid #f00;
position:absolute;bottom:0;
}
here is a sample jsfiddle - http://jsfiddle.net/LRy6h/
and one where the parent div is also at the bottom - http://jsfiddle.net/LRy6h/1/
and one with resizeable (dynamic) heights - http://jsfiddle.net/LRy6h/2/
and another one to match your updated image - http://jsfiddle.net/LRy6h/3/
I found another way to solve the problem. I set the height of the corresponding tr as well as the height of the td and parent div to 100%. Here is a code snippet:
html + css:
<tr style="height: 100%;" ng-repeat="order in orders">
<td style="height: 100%;" >
<div style="height: 100%; position:relative;">
<span>PARENT - SOME TEXT</span>
<div style="position:absolute; bottom: 0;" >CHILD</div>
</div>
</td>
</tr>
Sorry, but I have to write an answer instead of adding a comment (not enough reputation).
Sounds as if you are using a table for layout - that's no good idea! ;-)
Furthermore it would be helpful, if you post the relevant HTML and CSS code, or even better setup a jsFiddle.
How do you style the parent DIV?
There is no cross-browser way of setting it to the height of the TD (using CSS only). The "modern" way might be using 'flexbox'. But it depends on the Browsers (and versions) you have to support and the layout you would like to achieve.
Using 'position: relative' on table elements does also not work, because the behaviour for this is 'undefined'.
So to really give you some good advice there are some informations missing.

Hiding margin with visibillity:collapse

This is my code:
<div id="divSpinner" style="margin-top:30px; visibility:collapse;">
</div>
<br />
<div id="divPaging">
</div>
I'm trying to show a spinner, and afterwards show some content in the 'Paging' div (Using Javascript).
The spinner and the 'Paging' div are not visible at the same time, so I've tried to collapse the Spinner visibility, but the 'margin-top' still effects the position of the 'Paging' div.
What should I do ?
you must use position: absolute; or position: relative; on your divPaging css selecting between them related to your code ,if you put link from web page i can say you witch one and how.
I've set 'display: none;' instead of 'visibility:collapse;'

Issue lining bottom shadow up with banner image

I am trying to line this bottom shadow up as in the top shadow but I cannot seem to get the firgured out. The only time it collapses is when I remove the line-height or font-size much further down in the css file using Developer Toolbars but of course this affects everything else too. Here's my basic html structure:
<div class="banner-image">
<div class="banner-image-wrapper">
<div class="shadow-top"></div>
<a class="header-image">
<img />
</a>
<div class="shadow-bottom"></div>
</div>
</div>
On the tag, if I remove the font-size and line-height, everything collapses nicely on itself but I cannot seem to force this just on the tag.
I know this is going to be a ridiculous issue once it's been solved.
Thanks!
The answer is actually pretty simple, you just need to use some clever positioning & take advantage of the parent's box-model:
.banner-image{
position:relative;
}
.shadow-bottom{
position:absolute;
height: x;
bottom: -x;
}
Here's the formula you need:
Take the height of the bottom shadow ( some value x )
Then make sure the parent of that element has a position of 'relative' (~important~)
Make the position of the bottom shadow 'absolute'
Position it at the bottom minus the value of it's height ( -x )
Here's a jsFiddle illustrating the effect: http://jsfiddle.net/k7CmJ/
I know this is old, but for anybody else looking for an answer to this, where absolute positioning won't work, setting display:block on the img tag will get rid of that space:
.header-image > img {
display:block;
}
Normally an image is an inline block, and because it's inline, white-space around it is preserved.
Here is the problem: http://jsfiddle.net/3Kd3f/
And here is the exact same code, only with display:block added to the img tag: http://jsfiddle.net/3Kd3f/1/

css horizontal scroll within a table

I want to construct a timeline that has horizontal scrolling.
I have a wrapper DIV, inside it has months. Each month is a DIV inline-block. This works:
<div class="wrap">
<div class="month">Jan 2013</div>
<div class="month">Feb 2013</div>
...
</div>
This almost works, but because my clients site uses tables for layout the scroll bars don't work. This fails:
<table><tr><td>
<div class="wrap">
<div class="month">Jan 2013</div>
<div class="month">Feb 2013</div>
...
</div>
</td></tr></table>
Here is a jsfiddle to show what I mean: http://jsfiddle.net/fhL9u/2/
NOTE: The top timeline example works as you resize the browser. It is 100% width of the page (or containing element.)
How do i make the second timeline overflow correctly? It must take up the remaining width of the screen (no with: 100px hacks), and if possible only show scroll bars when the months overflow.
This is an internal application so I can tell people to use Firefox or Chrome if I need to. This means I can use advanced CSS3 stuff or browser specific ( -webkit or -moz ) stuff. I'd prefer that it was IE8 compatable (just for my own curiosity)
If you can fix the width of that text (in pixels or percents) use this solution:
table {
table-layout: fixed;
width: 100%;
}
td:first-child {
width: 100px; /* or width: 15%; */
}
Note that you can use a different selector for the text (like a class)
Possible solution....
The main issue may be that the "Site Navigation" cell is part of the scroll area.
table { display: block; }
Then assign the .wrap class to the table and remove the div encompassing the months.
Fiddle here
only tested in Chrome.
You could just put a width on the div.wrap, say 400px- that works and is just one line of code:-)