CSS - Overflow:hidden Note Working In Ie6

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?

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

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

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.

#navList {
background-color: #FF0000;
height: 10px;
overflow: none;
width: 600px;
float: left;
line-height: 0px;
}

#navList li {
float: left;
cursor: pointer;
overflow: none;
}

in every other browser the next div after the list touches navList, which contains images that are 42px high. in ie6, there are an extra 2 pixels. at first I put height: 42px; overflow: none, to see what would happen - and nothing did. i set it to 10 for kicks to see if the overflow would do anything at all and it's not. very confused today.

Hi, Here's the page: http://www.caillouette.com/alpha-dream3/alpha-maschio2.html
Scroll down and you will see a row of parfume bottles. The width of the box is supposed to be 300px, but it comes out much bigger.

Here's the CSS Code:

#productImages{
postion:absolute;
height:78px !important;
width:300px;
overflow: auto;
border:1px solid #333333;
white-space:nowrap;
} 

Here's the HTML: Code:

  <table  bordercolor="333333" border="1" cellpadding="8"><th valign="center"><p class="productText"> MEET THE PHERMONES</p></th>
             <tr><td height="75" width="300" id="productImages">
            
             <a href="MaschioPage/MaschioText1.html" target="maschioText"><img src="images/products/thumbs/prod1T.jpg" border="0"></a>
              <a href="http://www.caillouette.com/alpha-dream3/MaschioPage/MaschioText2.html" target="maschioText">
              <img src="images/products/thumbs/prod2T.jpg" border="0"></a>
              <a href="../../MaschioPage/MaschioText3.html" target="maschioText"><img src="images/products/thumbs/prod3T.jpg" border="0"></a>
             <a href="#"><img src="images/products/thumbs/prod4T.jpg" border="0"></a>
             <a href="#"><img src="images/products/thumbs/prod5T.jpg" border="0"></a>
             <a href="#"><img src="images/products/thumbs/prod6T.jpg" border="0"></a>
             <a href="#"><img src="images/products/thumbs/prod7T.jpg" border="0"></a>
             <a href="#"><img src="images/products/thumbs/prod8T.jpg" border="0"></a>
             <a href="#"><img src="images/products/thumbs/prod9T.jpg" border="0"></a>
             <a href="#"><img src="images/products/thumbs/prod10T.jpg" border="0"></a>
             <a href="#"><img src="images/products/thumbs/prod11T.jpg" border="0"></a>
             <a href="#"><img src="images/products/thumbs/prod12T.jpg" border="0"></a>
             
                                                          </td>
                                                        </tr>
                                                        <tr>
                                                          <td height="138"><iframe name="maschioText" src ="maschioText0.html">
                                                           </iframe> 
                                                          <p>&nbsp;</p>
                                                          </td>
                                                        </tr>
                                                      </table>

Pretty simple stuff, except I can't make the div stay at a 300px width, and have only a horizontal scrollbar. Can somebody please help me out?

thanks
-

Hello everyone, relatively new web developer seeking help! I'm working on a template that will eventually be used with Joomla, but right now I'm just concerned about getting the layout to work with just the HTML and CSS.

I want to create a fixed frame around the webpage that expands and contracts to fit different resolutions and browser window resizing, and then have the content scroll inside of that frame. The frame is also comprised of transparent PNG's since the client wanted lots of art on the frame around the content.

It mostly works in Firefox, and is a giant mess in IE at the moment. I'd like to get it working in the standards compliant browsers first and then figure out some hacks that I can use for IE. Hopefully I can do that....

Here is my HTML:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>Site Test</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <link rel="stylesheet" type="text/css" href="site_test.css" />
 </HEAD>

 <BODY>
<div id="wrapper">

<div id="frame_left">
</div><!--End frame_left-->

<div id="logo">
</div><!--End logo-->

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

etc, etc, 

</div><!--End content-->

<div id="frame_right">
</div><!--End frame_right-->

</div><!-- End wrapper -->
  
 </BODY>
</HTML>

Here is the CSS:
Code:

#wrapper {
	margin: 0px;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	background-image: url(frame_middle.png);
	background-repeat: repeat-x;
	z-index: 10;
}

#frame_left {
	margin: 0px;
	background-color: transparent;
	background-image: url(frame_left2.png);
	background-repeat: no-repeat;
	width: 224px;
	height: 625px;
	position: fixed;
	left: 0px;
	top:0px;
	z-index:50;
}

#frame_right {
	margin: 0px;
	background-color: transparent;
	background-image: url(frame_right2.png);
	background-repeat: no-repeat;
	width: 198px;
	height: 625px;
	position: fixed;
	right: 0px;
	top: 0px;
	z-index: 25;
}

#logo {

	margin: 0px;
	background-color: transparent;
	background-image: url(pink_logo2.png);
	background-repeat: no-repeat;
	width: 316px;
	height: 125px;
	position: fixed;
	top: 0px;
	left: 34.5%;
	z-index: 75;
}

#content {

	background-color:transparent;
	position: fixed;
	top: 145px;
	bottom: 60px;
	left: 160px;
	right: 150px;
	width: auto;
	height: auto;
	overflow: auto;
}

In FireFox everything works and the scroll bar pops up, but won't actually scroll anywhere, even though there is content off screen? Any thoughts?

I am slightly concerned that this is just totally undoable, but then I look at some of the stuff on CSS Zen Garden and think that there must be a way to pull it off!

Any help is very, very much appreciated.

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;
}

While working on my site, I am testing it in Mozilla Firefox 1.0pr and IE 6. In my code:

body, td, iframe, table, div, tr {
font-variant: small-caps;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
background-color: #666666;
scrollbar-3dlight-color: #666666;
scrollbar-arrow-color: #666666;
scrollbar-base-color: #666666;
scrollbar-darkshadow-color: #666666;
scrollbar-face-color: #666666;
scrollbar-highlight-color: #666666;
scrollbar-shadow-color: #666666;
}
a:link {
color: #ffffff;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #ffffff;
}
a:hover {
text-decoration: none;
color: #ff0000;
}
a:active {
text-decoration: none;
color: #ffffff;
}
select, option, textarea, input {
border: #ffffff 1px solid;
font-size: 11px;
font-variation: normal;
font-family: Verdana;
background-color: #666666;
}

I would add "overflow: auto;" right under 'body, td, iframe, table, div, tr {' so that in Mozilla the scrollbars would not show up. However, when I load it in IE, the windows do not scroll at all. Is there a quick-fix for this, or what can I do so it will work properly in both browsers?

How do I make the DIV overflow in the below codes? It works in IE but not
firefox.



<html >
<head>
<style type="text/css">
html, body { height : 100%; }
</style>
</head>
<body>

<table style="height : 100%; width : 100%">
<tr style="height : 64px; background-color : Blue;">
<td></td>
</tr>

<tr style="height : auto; background-color : red;">
<td>
<!-- THIS IS THE PROBLEM -->
<div style="height :auto; overflow-y : scroll">
<!-- THIS IS THE PROBLEM -->

asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
</div>
</td>
</tr>

<tr style="height : 64px; background-color : Blue;">
<td></td>
</tr>
</table>

</body>
</html>