<div> position:absolute; bottom: 0; not working as expected in IE7 - html

My site, a course catalog tool for universities, has a center pane that contains a dynamically updated list of classes. In Firefox, Opera, and Chrome, the center pane has the intended scrolling behavior: when the class list exceeds the height, the center pane has a scroll bar. IE, however, only shows this bar when the height is explicitly set. Without using JavaScript to reset the center pane height on resize, how can I force Internet Explorer to show the scroll bar?
The center pane:
<div id="middlenav">
<div id="middleheader"></div>
<div id="courselist"></div>
</div>
and its CSS:
div#middlenav {
position: absolute;
left: 250px;
right: 350px;
top: 0px;
bottom: 0px;
}
div#courselist {
overflow: auto;
position: absolute;
top: 55px;
bottom: 0px;
width: 100%;
}
It looks like the center pane isn't obeying the bottom: 0px; statement, and is expanding to the full height of the contained #courselist. I tried body { height: 100% } but that didn't fix it either.

"The top property overrides the bottom property..."
https://developer.mozilla.org/en-US/docs/CSS/bottom
Change top to auto instead of 0px:
div#middlenav
{
position: absolute;
left: 250px;
right: 350px;
top: auto;
bottom: 0px;
}
That should fix the bottom positioning. Remember, if #middlenav is positioned absolutely, it will be relative to whichever parent element has position:absolute; or position:relative;. If #middlenav has no parent elements that are positioned, it will be relative to <body>.
I'm not sure why you have #courselist absolutely positioned; since it is inside of #middlenav I would think you could leave it static or position it relatively. But regardless of what you do, I think you need a height set on #courselist or #middlenav. The default value of height is auto, so there won't be a scrollbar because the element will expand to fit its content.
I know this question was asked 3 years ago, but I'm posting this for other people who may have a problem with CSS positioning. Cheers!

While it is perfectly acceptable to set opposite edges when using absolute positioning in CSS, limitations in Internet Explorer mean that the approach may not work there.
There is no way to avoid the bug in Internet Explorer 6. In Internet Explorer 7 and newer, triggering Standards Mode will resolve the issue.
Faking columns that extend to the bottom of an element is usually achieved using faux columns.

position: absolute; bottom: 0px; sets the element right on the bottom of the element. But it has to know where the bottom of the element is. If you set the height to 100% or have it in another element positioned bottom: 0px; Then it doesn't know where the bottom is, unless one of those elements is inside (taking up the full height of) and element with a fixed size. You can't give the body a height of 100% because it would just sort of go on forever. Try specifying the height of the body or some containing element. :D

Ensure that your doctype is set to HTML strict, otherwise IE will behave quirky and get confused with among others positioning and overflows.
Add this to top of your page:
<!DOCTYPE html>

I am not quite sure if i fully understand but I think you want the center pane to scroll when it reaches past a certain height..this is how I would do it.
#middlenav { position:absolute; left:250px; top:0 }
#courselist { position: absolute;top: 55px; left:0; min-height:400px; _height:400px;
overflow:scroll; overflow-x:hidden; width:500px; }
This sets your course list in all browsers to a minimum height of 400, once that is passed a scrollbar appears. min-height is not supported in IE7 and lower so i used the IE hack _height 400 so it acts as a min height. overflow-x:hidden is hiding the horizontal scroll just in case you only want vertical. I hope this helps you.

Don't use top and bottom positioning in the same class and don't use right and left positioning in the same class, as they are contradictory values to each other.

Related

Position absolute `div` inside position relative parent `div` disappearing on chrome and edge

I am trying to create a react component and position it on the page.
The component consists of multiple divs with position: absolute so that I can stack them on top of each other. The parent containing all these divs has position: relative and size 400px x 400px.
On firefox, everything works absolutely fine. However, on chrome or edge, the component renders but disappears off the viewport.
Edit:
Here is a jsfiddle of my code
When you access the jsfiddle using firefox, you can see concentric circles, when you access it using chrome, nothing shows up unless you disable position: absolute on the child components.
Research
From my research on this issue, this disappearing problem only occurs when the position: absolute children are unable to find a parent with position: relative, however this is not the problem for my implementation.
Trying using dev console on chrome, when I turn position: absolute off for all child components, the divs appear but no longer stack on top of each other.
Does anyone know why this is happening? How come it's only working on firefox, and is there any way to fix this so that the component can be viewed on all browsers?
Update
As per the accepted answer, the solution was to specify a width and height for the child divs containing SVGs. This is because for some reason some browsers do not automatically calculate width and height for SVGs. This is explained in the comments of this post, as well as in this post.
You need to give width to all circles as they become independent when you give them position: absolute. So modify your css code like this:
.child1, .child2, .child3 {
position: absolute; /* Turn off to see circles in chrome*/
top: 0;
width: 100%;
}
Thanks me later.
you just missed the width and height for child div `
.child1, .child2, .child3 {
position: absolute;
top: 0;
width:100%;
height: 100%;
}

CSS - Can an image overlap a page border without affecting page width?

I have the following element in my initial page concept:
http://tinyurl.com/bcmcxp9
The ribbon is a PNG image. What I'd like to be able to do is position this image exactly over the border of a box-shadowed div (representing the page content), without affecting the page width.
I've tried a couple of techniques.
By using position:absolute, I've been able to achieve the visual effect I was looking for, but it brings up the dreaded horizontal scrollbars! I want the edge of the div (not the edge of the image) to represent the edge of the page.
#banner-ribbon {
background-image: url(ribbon-right.png);
background-repeat: no-repeat;
position: absolute:
width: 419px;
height: 114px;
left: 700px;
top: 400px;
}
By using a div that sits between the content wrapper and the background, I've been able to position the image in the right place without affecting the horizontal scrollbars (sort of, I might need a little javascript to absolute-position it relative to the center), but I can't raise the image's z-index above its child divs!
#banner-ribbon-wrapper {
background-image: url(ribbon-right.png);
background-repeat: no-repeat;
background-position: 90% 400px;
z-index: 70; /* does nothing */
}
Any ideas?
It sounds like the image is extending the boundaries of the page, causing the horizontal scroll bars. One way to fix this may be to set a width for your page and then hide anything that goes outside of it. Something like this may work for you:
body {
width: 100%;
overflow-x: hidden;
}
Example jsFiddle
Give your content div
position: relative
and to your ribbon
position: absolute
right:0
Make sure your image don't extend boundaries uncontrollably.
Working sample on JsFiddle:
http://jsfiddle.net/BrvJk/

Rows of flexible and fixed div's within full-size window

I'm writing a mobile/desktop chat application that is supposed to utilize the entire screen. The bottom <div> shown in yellow can be fixed-height if it needs to be.
presently it's Absolutely positioned to the bottom of the window.
My problem: the top <div>, in cyan, doesn't fit to the rest of the window, regardless of whether I use padding, margin, border, etc. Presently it appears to allow the content to wrap, but that's only because the bottom overwrites the scroll bar.
My only solution so far is to have a final <div> or <br> that pads the end of the scrollable div, but that doesn't make the div smaller, or make the scroll bars properly align.
Here is my source code so far in Fiddle.
Can you edit your CSS and set the DIV with the chat text a class like .break-word and then in CSS declare it with word-wrap:
.break-word {
word-wrap: break-word;
}
Unsure on the covering of scrollbars. You should post your code for others to view and might be able to pick something out.
This style code basically sums up what I'm doing to compensate for my issue. (Instead of, say, using HTML tables.) This may not be the best solution.
#topPart {
position: absolute;
width: 100%;
top: 0;
bottom: 40px; /* or however high the bottom is */
}
#bottomPart {
position: absolute;
width: 100%;
bottom: 0;
height: 40px; /* same as above */
}

left:50% element not appearing in middle of page

I have an absolute positioned popup (hover over "ice white" image to see popup) which has css left:50%. Now this should appear in the middle of page but doesn't. Any suggestions please? Thanks in advance.
You're also supposed to add margin-left with the negative of a half of visible width of the element. So, for example:
width: 400px;
padding: 10px;
border-width: 2px;
/* -(400 + 10 + 2)/2 = -206 */
margin-left: -206px;
left: 50%;
Note that margin: auto suggested by others won't work because you've positioned the element absolutely.
position: absolute;
left: 50%;
transform: translate(-50%,0)
Lol, no. The left side of the image appears at 50% of the page width. Hence; left: 50%.
In order to center your image, set margin: auto instead.
Your code is working correctly. The popup is being positioned with left of 50% ... of the TD tag it's nested inside.
Try either taking the popup out of the table, or setting it to 50% of the document width instead. (Your javascript is minified and unreadable to me, or I'd help further.)
u can try to change CSS Style like this
#displayDiv {
background-color: white;
font-weight: bold;
height: 460px;
left: 50%;
margin: auto auto auto -475px;/* change done here */
overflow: hidden;
position: absolute;
text-align: center;
top: 80px;
width: 950px;
z-index: 1;
}
Looks to me like there's a containing element somewhere in between the "Ice White" image and the body (specifically, Firebug reveals that it's the <a class="popup1" ... >) that is relatively positioned, so your 50% is relative to that rather than the whole page.
I know this seems a bit counterintuitive: Why should it be relative to a parent element if the poput uses absolute positioning? It's basically because relative positioning is relative to where the element is in the normal flow of the document, whereas absolute positioning yanks the element out of that flow. See sections 9.4.3 and 9.6 of the W3C's explanation of the visual formatting model for more info.
Check out a tutorial or two if this is giving you trouble. I like Learn CSS Positioning in Ten Steps and css-tricks.com's "Absolute Positioning Inside Relative Positioning" (to which I'd provide a link if not for the spam filter; first-time answerer here ;) ).
As for what to do about it, you might be able to move the popups out of the relatively positioned parent, as mblaze75 suggests, but it looks (and I'm guessing here) like that <a> is what's triggering your JavaScript event, so you probably can't do that. Instead, I'd try removing the relative positioning and using margins instead.
Also, bear in mind what Greg Agnew said: Even with that problem solved, you're still centering the left edge rather than the center of your popup. I think duri's answer will take care of that.

CSS Rounded Corners Not Working - Why Not?

<div id="main-solutions">
<div id="main-solutions-top-left"></div>
<div id="main-solutions-top-right"></div>
<div id="main-solutions-body">
blah blah blah
</div>
</div>
css
#main-solutions {
}
#main-solutions-top-left {
position: absolute;
top: 0px;
left: 0px;
background: url('../images/Top-Left-Gray-Corner.gif') no-repeat top left;
width: 434px;
height: 15px;
}
#main-solutions-top-right {
position: absolute;
top: 0;
right: 0;
background: url('../images/Top-Right-Gray-Corner.gif') no-repeat top right;
width: 434px;
height: 15px;
}
#main-solutions-body {
background: url('../images/Gray-Gradient.jpg') repeat-x;
}
I'm expecting to see that main-solutions has two absolutely positioned divs at the top left and right with my rounded corner image, and then followed by the body with the gradient, but when I use HTML element browsers, the top-left and top-right div are not appearing at all, very confused, why are those divs being disregarded?
UPDATE (for others confused by answer):
At the root of my issue is I didn't understand that both absolute and relative define a new coordinate system for their contents, in addition to specifying the posision of the element itself. Found a good explanation here:
http://www.w3.org/TR/WD-positioning-970131#Positioned
from section 2.2
Like 'absolute' positioned elements,
'relative'ly positioned define a new
coordinate system for child elements,
with the origin located in the
position where the first child element
is rendered
Far as i'm seeing, the corners should be appearing at the top left and right of the page, since your container div doesn't have a CSS position property. Absolute-positioned elements' positions are relative to the innermost parent that has a position other than static (the default).
Try adding position: relative to the container div's CSS. It works much like the default, but (1) if you want, you can shift the div's position by some amount (which isn't extremely useful here, but still), and (2) since the position's not static anymore, absolute-positioned stuff inside the div should position itself relative to the container, rather than to the body/page.
Also, some browsers won't even display a div that has no content -- so the background for said div might not show. You'll probably want to have something in the divs. Even a single will work.
Have you considered using CSS border-radius to achieve this rather than messing around with images?
border-radius is supported by all browsers except IE, but even IE can be made to work with it with the use of a clever little thing called CSS3Pie.
(plus as a bonus, CSS3Pie also gives IE CSS gradient backgrounds, so you could kill two birds with one stone)