Jump to content

overflow not working - perhaps effected by z-index?


Recommended Posts

I have an overflow tag set in body element that is working on one div element, but not the other. Could it be caused by the fact that the second div has a z-index? I've tried placing the overflow directly in the <div id="column3">, which is where the overflow, is happening to no avail. Does anyone see the problem or have any tips? Thanks. I've posted a junk site, so you can see the problem. http://aphoniastudios.com/TestSite/test.html Here's the css: @charset "UTF-8";/* CSS Document */ <style type="text/css">html {height:100%}body {background: #CCC;width: 90%;height: 90%overflow: hidden;}a:link {color:#FFF; text-decoration:none;}a:visited {color:#FFF; text-decoration:none;}a:hover {color:#FFF; text-decoration:underline;}a:active {color:#FFF; text-decoration:underline;}#container {float: left;font-family: Helvetica, Arial, sans-serif;font-size: .7em;text-align: left;height: 100%;width: 100%;padding: 0px;margin: 1px 50px;background-image:url(Images/junk.png);background-size: 100%;background-repeat:no-repeat;}.stretch { width:100%; height:100%;}#column1 {float: left;width: 230px;height: 100%;margin: 0px 4px 0px 49px;color: #FFF;font-size: .9em;overflow: hidden;}#column1 #header {padding-right: 8px;padding-left: 8px;padding-top: 276px;padding-bottom: 16px;}#p {font-size:13px;line-height: 17px;}#column1 #footer {background-color: #E1231E;padding: 8px;box-shadow:0px 3px 5px 0px #333333;margin-right: 5px;color: #FFF;}h1 {display:none}h3 {display:none}#column2 {float: left;width: 0%;height: 100%;color:#4D4D4D;font-size: .75em;}nav {background-color: #999;position: relative;z-index: 2;width: 120px;height: 100px;margin-left: 0px;margin-right: 0px;margin-top: 54px;margin-bottom: 0px;padding: 2px 0px 5px 2px;box-shadow:3px 3px 5px 0px #333333;color: #FFF;}nav ul {margin: 10px;padding: 0px;}nav ul li {color: #FFF;text-decoration: none;list-style-type: none;line-height: 0.6em;font-size: 0.8em;font-style: normal;font-weight: 900;background-position: 0px 0px;}#column3{float:left;margin-top: 54px;margin-bottom: 0px;background-color:#FFF;position: relative;z-index: 1;width: 20%;padding-top: 30px;padding-right: 20px;padding-bottom: 20px;padding-left: 140px;box-shadow:3px 3px 5px 0px #333333;}.aboutlinks {word-spacing: 2px;color: #E1231E;}#column4 {float: right;width: auto;height:100%,padding: 0px;}</style>

Edited by misselka
Link to post
Share on other sites

You're also missing a semicolon in the height:100% for the html tag. I also notice that you have <style> tags in your external stylesheet. Remove those. There's also a comma instead of a semicolon on one of the rules in your very last ruleset (#column4).

Edited by ShadowMage
Link to post
Share on other sites

When I viewed the page, the only thing stopping the overflow property from working was the missing semi-colon. I modified the CSS myself to make sure.

You're also missing a semicolon in the height:100% for the html tag.
The semi-colon isn't required for the last rule, but it's a good practise to put it.
Link to post
Share on other sites
The semi-colon isn't required for the last rule, but it's a good practise to put it.
Now that you mention it, I do remember that. I'm just so used to putting it in, that I forget it isn't required. Anyway, misselka, if the suggestions aren't working, please update your test site with what you tried so we can see what's going on.
Link to post
Share on other sites

I don't see scroll bars either, but column3 (the white box) should be ending at the end of the container (end of the background image). Instead it is extending beyond it. The red footer, on the other hand, is obeying the overflow: hidden tag and ends at the end of the container. Scrolling would be fine too, but when I change overflow to scroll, I don't get the scroll bars.

Link to post
Share on other sites

When I add in height, it changes the height of the box, but the text remains extended. Also, I'd prefer to have the height of that column be 100% instead of a fixed height. Either way, it is still extending beyond the parent. I was able to get scroll bars, by adding the overflow:scroll tag to the column3 div. However, overflow:hidden placed in the column3 div still does not work.

Edited by misselka
Link to post
Share on other sites

Well, I'm perplexed...if I set the height of the column3 div to 100% it sets it to 100% of something but certainly not its parent.... I honestly don't know why because all of its ancestors have a height specified. Problems like that usually occur when the body and/or html do not have a specified height, but that isn't the case here. Anyway, when the height issue gets figured out, you can just add overflow: auto to the column3 div and it should give you a scrollbar when necessary.

Link to post
Share on other sites

If you set the height to 100% it will be exactly as tall as the window. This means that if it is not stuck to the top of the window some of it is going to go outside of the bottom. If you won't want the text inside the box to flow outside of it, you use the overflow property to tell it to hide it or put a scrollbar.

Link to post
Share on other sites
If you set the height to 100% it will be exactly as tall as the window.
That seems to be what's happening but isn't it supposed to be 100% of the parent's height? The window is not the parent of column3. The container div is, which happens to use 100% height (correctly this time) to make it the same height as the body, which is 90% of the html, which is 100% of the window.
Link to post
Share on other sites
That seems to be what's happening but isn't it supposed to be 100% of the parent's height? The window is not the parent of column3. The container div is, which happens to use 100% height (correctly this time) to make it the same height as the body, which is 90% of the html, which is 100% of the window.
Not the parent, but the closest ancestor that has a set height.At the moment the problem is that #column3 element doesn't seem to have a height assigned anywhere.
Link to post
Share on other sites
Not the parent, but the closest ancestor that has a set height.
The closest ancestor with a set height would still be the container, not window...
At the moment the problem is that #column3 element doesn't seem to have a height assigned anywhere.
Right. That's the element we're trying to adjust the height of. If the height of column3 is set to 100%, it should be the same height as the #container div, but it isn't. In fact, after looking at it again, just now, it doesn't even match the height of the body, html, or window... I just took another look at it and in fact the height is the same as #container. The padding is what makes it look like it is much larger. Height simply defines the height of the content area of an element, not it's overall height. AFAIK, there is no good fix that will allow the use of relative sizes. At least not for older browsers. The box-sizing property can fix it for newer browsers.
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...