|
CSS - Overflow:visible Height Of Container Ie 6
I am trying to set a height of a container div, and have the inner div spill out of the container without changing the height of the container div:
Code: <style media="screen" type="text/css">
.inner{
width: 80px;
height: 80px;
background-color: #0000FF;
}
.outer {
width: 120px;
height: 20px;
background-color: #FFFF00;
overflow:visible;
}
</style>
IE 6 is giving me trouble. It insists on making the container div the same height as the inner div. Anything I can do to tell IE6 to not change the height of the container? Similar Tutorialsi have a div that has a background img. when i have p's within this div the background img only shows up if theres a line of text there. i specified the height: 277px to fix this (if theres a better way, pls let me know). and tried to put overflow:visible within p's but its still clipping. any ideas? containing div: Code: #content .col {
width: 303px;
height: 277px;
background: url(../images/one_third_box_top.png) no-repeat;
float: left;
}
p: Code: #content p, ul {
padding: 0 25px 0 30px;
line-height: 1.5em;
overflow: visible;
}
edit: this problem is in mozilla, but not in IE... weird. theres also one minor thing on a totally different subject. paths.. my paths a Code: /pub /css main.css /images foo.jpg foo2.jpg index.html obviously i have a link to the main.css in the index file but when i try to use url(images/foo.jpg), foo.jpg wont load? the path looks right unless im missing something... instead i have to url(../images/foo.jpg) for it to work... i always thought the '../' meant parent directory of the file (which is index.html since its linked from it)... right? thanks in advance. Hey guys, I built a site that uses a linked list as an multi-level menu. This menu works fine in Moz/Netscape, but I have to use IE behaviours (thus JavaScript) for it to work in IE. Because this is a list I've contained it in a div with overflow: auto. And set a new external css file using JavaScript to convert that list into the multi-level menu. The problem is the menu's horizontal submenus appears within the parent div, rather than overflowing above the parent. I was able to fix this problem using a z-index and overflow: visible in IE. However, in Gecko based browsers the menu's submenu's links aren't accessible over the site content also contained in an overflow: auto div. But, as said works fine in IE. Here is the site. To test this bizare functionality manipulate the #contentArea and #navArea properties in this css file. You will notice that there is a DHTML custom scrollbar if JS is enabled, this is because the only way I could get the submenu's to be accessible above the content in Gecko is to make the div overflow: hidden. Myself, and the developer of the orginal menu, have been working on this for weeks (well, more me) and haven't determined how to make the menu accessible while mantaining overflow: auto on the #contentArea div. Just today we had some limited success changing the #navArea position to fixed rather than absolute in Gecko. After some repositioning the menu was fully accessible at medium/100% text size. But, once the site was resized using font sizes (it uses a relative font size 'em' for an elastic layout) the fixed div wouldn't stay in position. I'm hoping that someone here is able to tell me how to set overflow: visible to overflow above an overflow:auto div in NS/Moz (I'm using FF0.8) and still work in IE? I'd greatly appreciate it because I want to replace the custom scrollbar with default scrollbars for accessibility. Thanx. Hello, I have been searching through the threads in search of a solution but decide to ask outright. I am trying to develop a way for a css layer to stretch the height of a window 100% and scroll its content inside of itself. I have only been able to trigger the scroll bars inside of the content layer on using a defined pixel height for the container layer that it sits in. My main goal is to get the content layer to stretch the full height of the browser window and scroll its content so that I have no horizontal scroll bars on the browser itself but rather on the content layer. Trying to guess the height of a browser window to specify a happy medium, for different screen resolutions seems silly. Any ideas would be Gratefully appreciated! Ex: http://edward.sensite.net/Hyundai/ CSS: body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #000000; } .numbertext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #FFFFFF; vertical-align: middle; } td { vertical-align: middle; text-align: center; } .container { position: relative; margin: 0 auto; width: 780px; height: 200px; text-align: left; } .headerlayer { position: absolute; visibility: visible; z-index: 1; height: 206px; width: 780px; top: 0px; } .contentlayer { position: absolute; visibility: visible; z-index: 2; top: 207px; width: 780px; height: 100%; background-color: #FFFFFF; overflow: auto; } I have a site with a fixed width, but a few pages on the site are reports with wide tables that overflow that fixed width. Per the spec, they overflow their containers instead of expanding the containers (as happened in the old table layout). Is there a way to get the old table behavior out of the styled div tags? This is a short example of what the site uses for layout. The first block is normal content. The second has content overflowing and I would like all containers to expand (Main expands for the content, Page expands b/c Main expanded, Header* and Footer expand b/c their container (Page) expanded). The third is what it'd look like after that expansion (table rendered). Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
body { background-color: green }
.Page {
width: 200px;
margin: 50px auto;
}
.Header1 {
}
.Header2 {
background-color: red;
border: 1px solid Black;
border-width: 1px 1px 0;
}
.Footer {
background-color: blue;
border: 1px solid Black;
border-width: 0 1px 1px;
}
.Main {
background-color: white;
border: 1px solid Black;
border-width: 0 1px;
}
-->
</style>
</head>
<body>
<div class="Page">
<div class="Header1">Header1</div>
<div class="Header2">Header2</div>
<div class="Main">
Main
</div>
<div class="Footer">Footer</div>
</div>
<div class="Page">
<div class="Header1">Header1</div>
<div class="Header2">Header2</div>
<div class="Main">
MainMainMainMainMainMainMainMainMainMainMainMain
</div>
<div class="Footer">Footer</div>
</div>
<table class="Page" cellpadding="0" cellspacing="0">
<tr><td class="Header1">Header1</td></tr>
<tr><td class="Header2">Header2</td></tr>
<tr><td class="Main">MainMainMainMainMainMainMainMainMainMainMainMain</td></tr>
<tr><td class="Footer">Footer</td></tr>
</table>
</body>
</html>
I won't go back to tables, but I'd really like a general solution that can be applied to all pages, instead of doctoring widths and margins on the pages in question to get tolerable results. The page should be the set fixed width unless the content demands otherwise, then the entire page should stretch to flow. Any ideas? A screenshot for viewing sans personal test file. Hi all Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style>
div.outer {
background-color: yellow;
overflow: auto;
}
h1 {
margin: 10px;
}
</style>
</head>
<body>
<div class="outer">
<h1>Title</h1>
</div>
</body>
</html>
Expected result (Firefox): expected.JPG Unexpected result (Internet Explorer): unexpected.JPG Is there something I can do against this instead of adding a padding-top to the H1 or a padding-top to the div.outer? Thanks for help, Josh Hey guys, I have a web layout with 1 centre column with a height of 100% (i.e. it fills the whole window from top to bottom). I have achieved this using height: 100% and its worked so far but I've just hit a problem. When the content is less than the height of the browser window it is fine - the white extends to the bottom perfectly in both FF and IE. However, if the content extends over the height of the window, the white background stops. So the CSS is making the column the height of the window without taking into consideration the content that is inside it so that when you scroll down, the background dissappears. Any help would be appreciated. The page that works fine: http://www.dgwd.co.uk/1476/site/aircadets/index.php The page that doesnt: http://www.dgwd.co.uk/1476/site/aircadets/uniform.php Thanks a lot guys. Dan Hi, i seem to be having a problem displaying my container as 100%. I have a centred column with a grey background with the following as my html and my css: Code: <html> <head> <link rel="stylesheet" href="default.css" type="text/css" /> </head> <body> <div id="container"><!--BEGIN CONTAINER--> <div id="logo"></div> <div id="motto"> <div id="telno"></div> <div id="quote"></div> </div> <div id="navigation"> </div> <div id="search"><!--BEGIN SEARCH--> </div> <div id="banner_1"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="empty"></div> <div class="box2"></div> <div id="contenthome"></div> <div id="sectiontwo"></div> <div id="sectionthree"></div><!--END SECTION THREE--> <div id="footer"></div><!--END FOOTER--> </div><!--END CONTAINER--> </body> </html> CSS Code:
*{
padding:0; margin:0;
}
body {
height: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 12px;
color: #797979; margin: 0; padding: 0; background-color:#dfdede;
}
div {
border: 1px solid #000;
}
a {
font-family: Arial, Helvetica, sans-serif; font-size: 11px;
color: #66308f; text-decoration:none;
}
#container {
height: 100%; width: 927px; margin: auto;
padding-left: 10px; padding-right: 10px; background-color: #ffffff;
min-height: 100%; /* for mozilla */
}
#logo {
background-image:url(../images/logo.jpg); background-repeat:no-repeat;
height: 164px; width: 374px; float: left; margin-top: 0px; margin-left: 0px;
}
#motto {
height: 164px; width: 549px; float: right; margin-top: 0px;
}
#telno {
height: 58px; width: 549px; float: right; margin-top: 24px; text-align:right;
}
#quote {
height: 80px; width: 549px; float: right; margin-top: 0px;
font-size: 25px; color:#2a4b59; text-align:right;
}
/* top menu navigation */
#navigation {
height: 35px; width: 670px; float: left; margin-top: 0px;
}
/* search box */
#search {
height: 35px;width: 253px; float: left;
margin-top: 0px; background-color:#66308f; text-align:center; vertical-align:middle;
}
.button {margin:0px 0 -3px 5px;}
.inputbox {
width: 13em; margin:2px 0 0px 0px; color: #878484; text-align:left;
}
/* search box end */
.box{
height:52px; width:205px; float: right;
margin-top: 0px; margin-right: 0px; margin-bottom: 4px; margin-left:0px;
}
.empty {
height: 94px; width: 205px; float:right;
}
.box2{
height:141px; width:205px; float: right;
margin-top: 0px; margin-right: 0px; margin-bottom: 4px; margin-left:0px;
}
#contenthome {
height: 50px; width: 927px; float: left;
margin-top: 5px; margin-left: 0px;
}
#sectiontwo {
height: 50px; width: 927px; float: left;
margin-top: 0px; margin-bottom: 10px;
}
#sectionthree {
height: 50px; width: 927px; float:left;
margin-top: 0px; margin-bottom: 15px;
}
#footer {
background-color:#b3d800; height: 56px; width: 927px;
float: left; margin-top:0px;
}
#banner_1 {
height: 413px; width: 701px; float: left; margin-top: 0px;
margin-left: 0px; border-right-color: #FFFFFF; border-right-style: solid; border-right-width: 2px;
}
but for some reason i cant seem to get the container to fill the complete height of the page and i cant seem to locate what error i have made. If somebody could please help, as i would like this to work in all browsers. Thanks in advance. Thanks for taking the time to read my question. I have posted what I'm working on at http://www.scopicdesigns.com/ZoneAll/NewIndex.htm I have put a yellow background on the main nav container to illustrate my problem. There seems to be extra height to the .NavContainer in IE6, but it is not there in IE7 or FF. I've tried adjusting all my margins and paddings, but nothing seems to work. I also tried increasing the width of the .NavContainer, thinking that there was some sort of overflow from the last button or something, but that didn't work either. How do I get rid of this? Thanks, Brad Hi, Hopefully someone here will have experienced this issue before..what I have done is create a div to contain all of the layout elements I want on my page. I started inserting a few of these and I noticed the container div doesn't stretch unless I specify a height which I wanted to avoid should I create an pages that have a limited amount of content and don't fill the page. Here is what I have so far here and this is what I want to achieve here As you can see I have specified a height value in the sceond example, is there an alternative way of doing this? Also is the best way to position the footer at the bottom of the container like so Code: position:absolute; bottom:0px; Thanks for any help guys. p.s. Here are my stylesheets so far Stylesheet 1 Code:
/* CSS Document */
body {
background:#CCC url(images/Bg.gif) repeat top left;
text-align:center;
}
#container {
background:#FFF;
width:715px;
border:1px solid #000;
}
#header {
background:#000 url(images/Header1.jpg) repeat top left;
width:703px;
height:172px;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
border-top:0px none #000;
position:absolute;
left: 5px;
top: 5px;
}
#logo {
background:#000 url(images/Contemporary-Classics.gif) repeat top left;
width:383px;
height:52px;
position:absolute;
left: 15px;
top: 15px;
}
#footer {
width:715px;
background-color:#A18A39;
padding:0px;
margin:0px;
}
Stylesheet 2 Code:
/* CSS Document */
body {
background:#CCC url(images/Bg.gif) repeat top left;
text-align:center;
}
#container {
background:#FFF;
width:715px;
border:1px solid #000;
position:relative;
height:500px;
}
#header {
background:#000 url(images/Header1.jpg) repeat top left;
width:703px;
height:172px;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
border-top:0px none #000;
position:absolute;
left: 5px;
top: 5px;
}
#logo {
background:#000 url(images/Contemporary-Classics.gif) repeat top left;
width:383px;
height:52px;
position:absolute;
left: 15px;
top: 15px;
}
#footer {
width:715px;
background-color:#A18A39;
padding:0px;
margin:0px;
position:absolute;
bottom:0px;
}
Hi I have searched on this subject, and found the Faux Column articles, but I have failed to make use of these. The following page shows the problem LINK And CSS The text in the container div leads off the bottom of the page. The CSS is a bit of a mess at the moment because I have been messing with it trying to get this to work. I need the background of the container div to extend to the bottom of the content div. I have set min-height and heights for the body and html tags, and then for the container, as I know that the height is only taken into account if the parent has a height too. This does not work. Any suggestions? Thanks Jake Hi guys, I have a small problem which is driving me crazy. I have a main container with two containers inside named left and right. I want a border on the main container, but i do not know the height of the main container as this will depend on the content in 'left' and 'right'. So what should I set the height of the main container to? I've tried 100% but this does not work and if I omit the geight property the main container does not show up. Any ideas? Thanks in advance, Rob. Hi, I have 3 div boxes in a container, they sit side by side (i.e. 3 in a row) with different amounts of text in each div. The dilemma is that I need all the div's to be the same height as the tallest div. can someone tell me how to do this? thanks Hi - I'm working on a page with what I think should be a relatively simple CSS layout. Basically, I have a table on the top half of the page (it displays an address book). The table has a <thead> and <tbody>, and the <tbody> is set to overflow: auto, to give me a scrollbar when its contents gets too big. The bottom half of the page uses AJAX to fetch an entry from the address book, and display more details. It too uses overflow: auto to show scroll bars when necessary. Each element is in a <div>, and I used height: 45% (or so) on each to try to make the whole thing fit on one page, so that there is no whole-page vertical scrolling. An example of the code I'm working with can be found at http://kc9ddi.us/ex.html . My design is working nicely in Firefox, but not IE. IE does not seem to do the right thing with the height: attribute in CSS, so their is no scroll bars in the individual parts of the page, like I want. Can anyone offer any advice here? Does anyone know why overflow:hidden does not work when height is given in percentage? The following example does not work and all values from 1 to 20 are shown on screen ... Code: <div style="overflow:hidden;height:10%;border:1px solid green;"> 1<br /> 2<br /> 3<br /> 4<br /> 5<br /> 6<br /> 7<br /> 8<br /> 9<br /> 10<br /> 11<br /> 12<br /> 13<br /> 14<br /> 15<br /> 16<br /> 17<br /> 18<br /> 19<br /> 20<br /> </div> Changing height:10% to height:50px makes the overflow:hidden works fine. Does anyone know how I can make the overflow:hidden css rule with height rule given in percentage? I'm having a problem getting a child element to be the full height of its parent without going over. So if I have: Code: html, body {
height: 100%;
background-color: #E2E9EA;
}
#mainContainer {
width: 770px;
height: 100%;
background-color: #fff;
margin-left: auto;
margin-right: auto;
border: 1px solid #000;
position: relative;
}
and then I implement: Code: <body> <div id="mainContainer"></div> </body> This should show a centered area in a layout. However, using a hieght of 100% for the child (mainContainer) makes it too long on the page and it extends beyond the border of the "parent" body tag. Even when I try using: Code: body #mainContainer { ... }
it does not work. How can I make the child (mainContainer) element be 100% of the parent (body) element without going over? Hi, I have two images which are on top of each other, and the one on top is hidden. I use JS to change the source of the top to a new image, then fade the top image visible, then change the source of the bottom to be the same as the top, then make the top hidden (and so on and so on). To position the images on top of each other, I am using position: absolute. This works well when the DIV container has a defined height, however, when not the DIV collapses upon itself and the images are not displayed. Any suggestions how I might overcome this? Thanks Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Heights</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.mod_rotator
{
position: relative;
overflow:hidden;
height: 100px;
}
.mod_rotate_image {position: absolute;}
img.mod_rotate_image.front {display: none;}
</style>
</head>
<body>
<div class="mod_rotator">
<img class="mod_rotate_image back" src="images/rotator/corporateimage1.jpg" />
<img class="mod_rotate_image front" src="images/rotator/corporateimage1.jpg" />
</div>
</body>
</html>
Well I'm running into just a few difficulties trying to enclose a object inside of another container. The problem is that the container does not repeat the background when I lengthen the boxes within it. Can someone with a excellent CSS eye take a look at this and let me know what I'm doing wrong. I've played with overflow:auto; but the problem is that I need to set the width of the container at 990px, and it doesn't seem to work if I statically set the width. http://www.obelix.ca/templates/index.html I have read and read through the CSS2 spec and I am unable to figure out if this is possible. Hopefully I can describe it well enough for somebody to help out. Okay, what I want to accomplish seems simple. I want a div, lets call this one "container", with a calculated height/width relative to the document (in terms of percentage). Inside this div will be another div, lets call it "header", whos width will span the length of the containing div (100%) and height is fixed, lets say 30px. Now here comes the tricky part... a third div, lets call it "content" should sit right underneath "header" and its width will also be 100% of the containing div, but the height should fill the remainder of the containing div. I can't seem to get the "content" div to fill the remainder of "container" and scroll when needed. If I specify a calculated height, the offset of the "header" div is not taken into account so "content" div does not fit properly. Thanks a ton if you can help me out. Please let me know if this doesn't make sense. Here's the template I'm working on: http://dhost.info/justusvizslas/template.php Here's my problem: I'm trying to create a centered, two-column layout with a header and a footer, sort of like the tutorial he http://nemesis1.f2o.org/aarchive?id=7 I've got everything working correctly and it looks fine in IE. However, in FireFox, the container div doesn't automatically adjust its height to be the same as the height of the divs inside. Instead, I have to set the height at a certain number of pixils to even get the container div to show up. When I do that, in IE the container div defaults to the same height as the larger of the two inner divs, but in FireFox the container div just stays at whatever pixil height I specified. That becomes problematic because I don't plan on having all my pagecontent divs with the same height. Any insight will be greatly appreciated. I've been looking at this for hours and haven't gotten it to work like it should. Here's the relevant code too: CSS Code: #container {
width:792px;
height:50px;
margin: auto auto;
color:#000000;
background-color:#FFFFFF;
background-image:url(design/menuimage.gif);
background-repeat:repeat-y;
}
#navigation {
width:125px;
height:auto;
padding:0px;
float:left;
margin-top:auto;
vertical-align:top
}
#pagecontent {
width:667px;
height:auto;
padding:0px;
float:left;
margin-top:auto;
color:#000000;
background-color:#FFFFFF;
text-align:center
}
PHP Code: <div id="container"> <div id="navigation"><?php include "nav.php"; ?></div> <div id="pagecontent"> <br />Some more content here<br /> </div> </div> Again, thank you in advance for any help with this. If you're stumped and think it should work as-is, go ahead and go to the actual template I'm working on (first http link in this post) and look at it in IE and in FireFox to note the difference. |
|||||||