CSS - Overflow Hidden Issues

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?

Title sounds a bit contradictory, I know, but please bear with me...

I'm building a simple chat application with html, javascript php and mysql.

The technical stuff (php/ajax etc) i'm absolutly fine with; what I'm struggling with is the CSS to make it behave how I want. I've got a prrof-of-concept page working 90% how I want, here

http://chris.loyaltymatters.co.uk/chat-demo/

This works by having an outer div of position:relative and an inner div of position:absolute; bottom:0px

so that as new content gets added to the bottom, older text goes up. So far so good....but I want a scroll bar so that I can scroll up to see previous comments.

Giving the inner div a height value gives me a scroll bar, but the position remains at the top and new content gets hidden towards the bottom

html:

Code:

<div id='container'>
	<div id='chatRoom'>

	</div>
</div>

css

Code:

#container {
	width:500px;
	height:500px;
	margin:50px auto;
	border:1px solid black;
	position:relative;
	overflow-y:scroll;
	overflow-x:hidden;
}

#chatRoom {
	position:absolute;
	bottom:0px;
	margin:5px;
	width:100%;
}

To summarise, all I need now is a scroll bar so that I can scroll up

many thanks in advance

I had a problem earlier with my containing DIV pushing too wide which was resolved by adding "overflow:hidden" to my containing DIV. The problem is now that it's cutting off the sides of one of my graphics.

At the bottom of my page, I have a link which you can click that will (through the magic of javascript) reveal divs on either side of my main content (the link at the bottom of the page says "reveal sea creature")

When overflow:hidden was NOT on my containing DIV, I had the problem with all the extra space, but these revealing divs worked fine. Now that I add overflow:hidden, the extra space is gone, but the divs are cut off.

I've tried pushing everything to the left which seems to make the DIV on the right work fine, but the left is still a problem. I realize this doesn't make sense without code, so here's the site.

www . deepwaterchurch . com


Thanks so much.

Hello,
I have a problem appearing only in IE8, but I don't seem to find the exact bug and solution.

In this page
http://www.cracowflats.com/index.php/search/show/id/181

there is a Details area (bottom left) where titles have a green background.
For some reason this green background appears in other parts of the page.
In other browsers, the whole page has a white background, as it should.

1) With this code in theme.css

a {color:#62860b; }
h3, h4 { color: #70af1d;}
.color_title { background: #76a637;color:#fff;}
.logo h1 a { color: #62860b !important;}

it appers everywhere and the whole background of the page is green (should be white).

2) when I add an "overflow: hidden;" here

.color_title { background: #76a637;color:#fff; overflow: hidden;}

it gets better, as the main area is white.
But I still have a lot of green on the footer (and tabs).


If I could find out to which bug it refers, it would be easier to find a solution.
Any hint would be appreciated!

Thanks!

Luca

Hello all

I have an elastic design in which an image clips to the appropriate size via overflow: hidden. Is there any way to control which sides are cropped? What I mean is, can one emulate the background-position property for IMGes with overflow: hidden?

Thanks

Tom

Hello, after a few hours I managed to identify the CSS element responsible for this problem. However so far I have no solution on how I could solve this problem. Basically the problem is very minor but still frustrating.

I am using the following command to set a DIV element with transparent background;

Code:

filter: progid:DXImageTransform.Microsoft.gradient
(gradientype=0,startColorstr='#60ff0000', endColorstr='#60ff0000');

The DIV element becomes transparent. However the parent element - which is set with the CSS attribute overflow:hidden - is always displaying an extra pixel on the right of the container. This might not be clear at first, which is why I attached the following screen shot.

(the light red line is the extra 1px I am referring to)

If I remove the transparency CSS attribute for IE8 then this extra 1px will disappear. However that means loosing the wanted transparency. I have also developed the following example of the problem;

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>

		<style>

body {

	margin: 0px;
	padding: 0px;
	/*
	 * IE hack to center .content div (part1).
	 */
	*text-align: center;
}

div.content {

	width:600px;
	margin: 0px auto;
	/*
	 * IE hack to center .content div (part2).
	 */
	*text-align: left;
}

div#a {

	border-bottom: 1px solid grey;
	border-top: 1px solid grey;
	padding-bottom: 5px;
	padding-top: 5px;

}

div#a div#b {

	overflow: hidden;
	height: 280px;
	position:relative;
}

div#a div#b div#c {
	
	position: absolute;
}

div#a div#b div#c img {
	
	border: none;
	display: block;
}

div#a div#b div#e {

	background-color: red;
	color: #fff;
	position:absolute;
	padding: 20px 10px;
	width:260px;
	height: 240px;
	margin-left: 500px;
	/* IE8 hack for background colour with alpha value */
	filter: progid:DXImageTransform.Microsoft.gradient
	(gradientype=0,startColorstr='#60ff0000', endColorstr='#60ff0000');
}
			
		</style>
	</head>
	<body>
		<h1>Test 5</h1>
		<div id="a" class="content">
			<div id="b">
					<div id="c">			
						<img src="pic.png" />
					</div>
					
					<div id="e">			
						hello
					</div>
			</div>
		</div>	
	</body>
	
</html>

Does anyone know what's causing the problem and how I can solve it. It is true that 1px might not sound much. But it still frustrates me knowing that it is there and the fact that on Firefox all works great.

Here's my next IE challenge (or frustration). It deals with the overflow attribute. Overflow property was a challenge on my page since the page emulates position fixed for IE.

The present scenario deals with the pre element. Sometimes the content in the pre container exceed the parent container's width. IE expands the parent containers width as a result. The workaround for this scenario relates to the overflow property and using a wrapper with the height set to 1% . Now, IE maintains the parent container width. Apparently, the wrapper ensures that IE renders hasLayout. I am not exactly sure why it works, but it has predictable results.

The workaround involves wrapping a pre element in a div, WrapOverflow. Now, you could set the overflow auto attribute on the child pre element. Apparently, the wrapper ensures that IE renders hasLayout. I am not exactly sure why it works, but it has predictable results.

Firefox has no need for the wrapper and still renders the page accurately with the superfluous code. The problem relates to IE rendering pre/wrapper with a smaller height. By controlling the horizontal expansion; the workaround has somehow constrained the height as well. The net effect is a vertical scroll bar, which is not ideal.

Compare the scenario in both Firefox and IE; set the browser next to each other; notice the div.WrapOverflow pre container height. Screenshots are below and review the code for a full illustration.

Yes, you must be thinking change overflow auto to overflow vertical. Let's not jump to a quick conclusion. Understanding what is going on here is important as well. The pre container's height should grow in IE, but the page's complexity and various hacks muddle the scenario. I have already spent a month on this scenario, but do not have the skill to decipher what various hacks impose on my layout. Let me know if you have any good ideas, explanations, or suggestions on this situation.

http://neville.f2o.org/nifty_TEMP2.html

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.

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?

My CSS works in IE and Mozilla but not Netscape or Opera
I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there).

Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately?

Here are the related parts of my CSS:

/* CSS styles */
BODY {
font-family : Verdana, Arial, Helvetica, sans-serif ;
font-size : 10pt;
background : Black;
color : White;
margin: 0;
padding: 0;
border-width: 0;
overflow: hidden;
}


HTML {
overflow: hidden;
}


#LeftNavDIV {
position:relative;
width:185px;
height:100%;
float:left;
padding:2px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:1px solid white;
overflow:auto;
}


#ContentDIV {
position:relative;
height:100%;
width:75%;
float:right;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:0px dashed #336699;
overflow:auto;
}

I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically??

Code:

<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div>
<div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div>

</div>


<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div>
<div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div>

</div>

Hey,

I came across this forum and hopefully somebody can help me.

Here is my website: http://www.jmuelectricmotorcycle.tk

When the page is in firefox, If you page zoom out, the navbar goes under the content instead of staying on the right. I think it has something to do with padding and the sidebar not having enough room so it drops down. When I set the content to 1005 instead of 1000, it works, but there's a giant 5 pixel gap between my side bar and my content container.

Also, does anybody know how to style called data from ssi.php in SMF forums? I want my login boxes to look like my main page.

Thanks. Here is my css:

Code:

html {
	font: normal 12px verdana, arial;
        background-color: #000
}

body {
text-align: center
}

#fw-container {
margin: 0 auto;
width: 1000px;
text-align: left
}

.hasSidebar #fw-container {
	width: 1000px;
}

a, 
a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* --- Header --- */

#fw-head {
	position: relative;
	height: 196px;
	background: #242424;
}

#fw-title {
	font: bold 26px verdana;
	letter-spacing: -1px;
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 0;
	margin: 0;
	z-index: 10;
}

#fw-title a, 
#fw-title a:visited, 
#fw-title a:hover {
	color: #fff;
}

.fw-logo {
	width: 760px;
	height: 196px;
	position: absolute;
}

.hasSidebar .fw-logo {
	width: 1000px;
}

/* --- Navigation --- */

#fw-mainnavwrap {
	background: #242424;
	padding: 10px 20px;
	font-family: arial;
	font-weight: normal;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

#fw-mainnavwrap ul {
	margin: 0;
	padding: 0;
	background: transparent;
	list-style-type: none;
}

#fw-mainnavwrap li {
	margin: 0px 15px 0px 0px;
	display: inline;
}

/* --- Content --- */


#fw-bigcontain {
	width: 760px;
	float: left;
}

.fw-paragraph {
	background: #242424 url('../Waveform/img/bg-p.gif') repeat-x top left;
	border-bottom: 1px solid #000;
	padding: 15px 20px 10px;
	overflow: hidden;
}

.fw-title {
	margin: 0px 0px 10px;
	font: 18px verdana;
	color: #fff;
}

.fw-text {
	margin-bottom: 10px;
}

/* --- Sidebar stuff --- */

.hasSidebar #fw-sidebar {
	width: 239px;
	float: right;
	font-size: 12px;
	clear: right;
	border-left: 1px solid #000;
}

#fw-sidebar .fw-title a,
#fw-sidebar .fw-title a:visited,
#fw-sidebar .fw-title a:hover {
	color: #fff;
	text-decoration: none;
}

#fw-sidebar .fw-title {
	font-size: 1.3em;
	font-weight: normal;
}

/* --- Footer --- */


#fw-footer {	
	font: normal 10px verdana, sans-serif;
	background: #242424;
	margin: 0px;
	padding: 11px 0px 1px;
	color: #999;
	clear: both;
	width: 760px;
}

.fw-footertext {
	background: #161616;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	margin: 0px;
	padding: 6px 0px 6px 20px;
}

this is the code i'm having problems with:

Code:

<style type="text/css">

body {
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	color:#666;
 	margin : 0;
	padding : 0;
}

/* text */

h1 {
	font: bold 10px Verdana, Arial, Helvetica, sans-serif;
	line-height:30px;
}

/* div classes */

div.row {
	position:relative;
	left:10px;
	width:326px;
	height:20px;
	z-index:1;
	margin-bottom:8px;
	text-align:right;
}

div.cell_title, div.cell_content {
	position:absolute;
	top:0px;
	float:left;
	padding:0px 0px 0px 8px;
	border:1px solid #E4E4E4;
	text-align:left;
	line-height:17px;
	
}

div.cell_title {
 	background-color: #E4E4E4;
	left:0px;
	width:100px;
	z-index:2;
}

div.cell_content {
	background-color:#FCFCFC;
	left:100px;
	width:224px;
	z-index:3;

}

/* form elements */

.input {
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	color:#666;
	background-color: #FCFCFC;
	height:15px;
	width:213px;
	border:0;
	}

.textarea {
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	color:#666;
	background-color: #FCFCFC;
	height:100px;
	width:213px;
	border:0;
	overflow:auto;
	}

</style>

<h1>Contact</h1>
<form action="?menu=contact" method="post" name="contact">
<div class="row">
	<div class="cell_title"><label for="name">name:</label></div>
	<div class="cell_content"><input type="text" class="input" name="name" id="name"/></div>
</div>

<div class="row">
	<div class="cell_title"><label for="email">email:</label></div>
	<div class="cell_content"><input type="text" class="input" name="email" id="email" /></div>
</div>

<div class="row">
	<div class="cell_title"><label for="message">message:</label></div>
	<div class="cell_content"><textarea class="textarea" name="message" id="message"></textarea></div>
</div>

<div class="row">
	<input type="image" src="includes/images/btn_add.gif" name="Submit" value="Submit">
</div>
</form>

My problem is that my "row" div's overlay if their content is larger. Because of that i cannot see the send button from my form (the textarea height is bigger that the height of the "row" div - i need the layer to expland according to the content, but i don't want it to overlay on what is after it!).
I hope that you understood my problem and could help my with it.

Thanks in advance!