CSS - Overflow:hidden;height:10%; Does Not Work

While trying to get text-overflow: ellipsis going with list items, I noticed that bullets were disappearing in Webkit (Safari and Chrome) and Opera browsers. I narrowed the problem down to overflow: hidden.

I understand why putting overflow: hidden on a list item can hide the bullets (firefox also hides them in that case), but I'm putting it on a div inside the list item, and the bullets are still going away in those browsers (firefox and ie still show them, but not webkit and opera).

This illustrates what I'm trying to do:
http://sethsticco.net/files/possiblebug.html

..and this narrows the problem down to overflow: hidden:
http://sethsticco.net/files/simpler.html
The first list is normal, with no styling. The second one has overflow: hidden applied to the <li> tags. The bullets disappear for firefox, webkit, and opera, but not ie. The third list is the important one. It only applies overflow: hidden to the <div> tags inside the <li> tags, but bullets still disappear for Webkit and Opera. The fourth list is only there to show what happens if I try using <span> tags. They act like divs when they get display: block, and they don't get the ellipsis when they're inline.
I feel like I've found a bug, but regardless, I really just want to get text-overflow: ellipsis going on list items. Does anyone have any ideas?

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 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,
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, 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.

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?

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?

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?

Can anyone tell me whether they have experienced height and overflow problems with FireFox and Mozilla browsers?

Check this out: Test Page.

It looks fine in IE, but not the other two. I've been working on this half the day with no solution. Can anyone help? If the problem can be solved without the use of javascript, that would be preferred.

Thanks,
Darin

i am doing an alternative splash page for a website that uses the same template as the rest of the site but uses a black background color and hides a few elements, especially the h1 element.
Code:

<h1>Home</h1>

I have attempted using display:none; display:transparent; and visibility:hidden. The first two elements leave a faint outline of the link in both IE and Netscape. Using visibility: hidden works in IE but the outline remains in Netscape. I have cleared the cache and tried other various obvious things like assigning color: #000000;

Does anyone have any ideas. To see this in action, see
www.lubuto.org




Code:

h1 {                                   
                              
visibility:hidden;
                                        }

I am building a custom form control that behaves more or less like a <select> menu. For the dropdown portion of the menu, I need to set a max-height. If the dropdown contains enough options to go beyond the max-height a vertical scrollbar should appear.

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Custom Auto-Complete</title>
<script type="text/javascript">
<!--
	function initPage()
	{
	
	}
-->
</script>
<style type="text/css">
<!--
body	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 76%;
}

input	{
	width: 200px;
	background: #f4f4f4;
	border: 1px solid #999;
	font-size: .9em;
	/*
	*/
}

.clearfix {
    display: inline-block;
}

.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}




.cAutoCompleteCtl	{
	position: relative;
	/*
	border: 3px solid red;
	*/
}

.cAutoCompleteCtl input	{
	margin: 0 5px 0 0;
	display: block;
	float: left;
}


.cAutoCompleteCtl a.dwnarrow	{
	width: 15px;
	height: 15px;
	border: 1px solid #999;
	background: url(images/downarrow.gif)
				no-repeat;
	background-position: center center;
	background-color: #efefef;
	float: left;
	display: block;
	font-size: 1px;
	text-decoration: none;
}

.cAutoCompleteCtl .acCtlDropdwn	{
	position: absolute;
	top: 20px;
	left: 0px;
	z-index: 100;
	visibility: visible;
	min-width: 300px;
	max-width: 600px;
	height: auto;
	max-height: 200px;
	background: #fff;
	padding: 5px;
	border: 1px solid #999;
	overflow: auto;
	
	/*
	width: 400px;
	*/
}

* html .cAutoCompleteCtl .acCtlDropdwn	{
	width: expression( this.scrollWidth < 330 ? "300px" : ( this.scrollWidth > 620 ? "600px" : "auto" ) );
	height: expression( this.scrollHeight < 20 ? "200px" : ( this.scrollHeight > 301 ? "300px" : "auto" ) );
}

.cAutoCompleteCtl .acCtlDropdwn a	{
	white-space: nowrap;
	display: block;
	text-decoration: none;
	padding: 2px 5px;
	color: #000; 
	border: 1px solid #fff;
}

.cAutoCompleteCtl .acCtlDropdwn a.lastOption	{

}

.cAutoCompleteCtl .acCtlDropdwn a:hover	{
	background: #f5f5f5;
	border: 1px solid #b3b3b3;
}
-->
</style>
</head>

<body onload="initPage();">

<div class="cAutoCompleteCtl clearfix">
	<input type="text" /><a href="" class="dwnarrow">&nbsp;</a>
	<div class="acCtlDropdwn">
		<!--<a href="#">options here	options here	options here	options here	options here	options here	options here	options here	options here	options here	options here</a>-->
		<a href="#">options here</a>
		<a href="">Boulder Logic</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>		
	</div>
</div>

</body>
</html>

I'm seeing some unexpected behaviour ihn Firefox. When the page is loaded for the 1st time, the height of the dropdown portion of the menu is only large enough to see 1 option and no scrollbars are displayed. If I hit refresh (without holding the Shift key), the menu's height goes to its max-height and displays as expected.

The only property I could find that has any effect on this behaviour is overflow. If I remove it all together or set it to scroll, it displays at the correct height. Unfortunately, neither of these are an option since they will not produce the desired scrolling behaviour.

Can anyone see where I'm going wrong?

I have a div layout that I am using, and for the life of me cannot get my left and right columns to expand to 100% height in IE. It works just fine in FF.

Here is my css:

Code:

div#content {
  min-height: 100%;
  border: 5px solid yellow;
  height: 100%;
  width: 100%;
}

div#header {
  clear: both;
  height: 100px;
  background-color: white;
  padding: 1px;
}

div#left_col {
  float: left;
  position: absolute;
  top: 0px;
  width: 9%;
  background-color: #c8dae3;
  height: 100%;
  border-right: 2px solid #333;
}

div#right_col {
  float: right;
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 3;
  width: 9%;
  background-color: #c8dae3;
  height: 100%;
  border-left: 2px solid #333;
}

div#nav {
  padding: 0px 0px 0px 0px;
  margin: 0px;
  background-color: #005698;
  height: 20px;
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
}

div#main {
  padding: 0px 160px 5px 160px;
  margin: 0px;
  background-color: #a2cde3;
/*
  top: 0px;
  color: #000000;
  margin: 0px 0px 0px 0px;
  border: 2px solid red;*/
}

div#footer {
  clear:both;
  background-color: white;
}

HTML
Code:

<div id="content">
<div id="header" align="center"><img src="images/webdev_02.gif" alt="Exceptional web design made affordable"/></div>
<div id="left_col">left column</div>
<div id="right_col">right column</div>
<div id="nav">Navigator</div>
<div id="main">middle column</div>
<div id="footer">footer</div>
</div>

http://www.plumeriawebdesign.com/webdevgirl/

I have provided the link as well. Please excuse the funky borders, I use them for testing placement as guides.

Any help is much appreciated

On my rounded corner example here, the height of the object can't be changed. The width works fine and can be changed but not the height, why?

....

body{


overflow:scroll;
margin:0%;
padding:0%; }

#tt { position:absolute ; top:50px;left:50px;
height: 260px; //has no effect when i change it
width: 450px;

}

#t {
background: url(border1/dot.gif) 0 0 repeat-x;

}


#b {background: url(border1/dot.gif) 0 100% repeat-x}
#l {background: url(border1/dot.gif) 0 0 repeat-y}
#r {background: url(border1/dot.gif) 100% 0 repeat-y}
#bl {background: url(border1/bl3.gif) 0 100% no-repeat;}
#br {background: url(border1/br3.gif) 100% 100% no-repeat;}
#tl {background: url(border1/tl3.gif) 0 0 no-repeat}
#tr {background: url(border1/tr3.gif) 100% 0 no-repeat; padding:10px}


</style>
</head>
<body bgcolor="#ffffff">
www
<div id="tt"><div id="t"><div id="b"><div id="l"><div id="r">
<div id="bl"><div id="br"><div id="tl"><div id="tr">
Lorem ipsum dolor sit amet consectetur adipisicing elit<br><br>jlkjlk
</div></div></div></div></div></div></div></div> </div>