I have a div set to overflow: auto, max-width of 250px.
Inside the div I have a paging control, which allows users to pull back 10, 20, 50, or 100 results. If they pull back enough results, the inner content (table) will grow larger than the div and should then be scrollable.
This works fine in Firefox 3.5 and IE8, however in IE7, the scrollbar only shows after the first postback that requires a scrollbar (e.g. user selecting 20). If the user then selects another amount that requires the scrollbar (50, 100), the bar in IE7 will disappear.
If the user goes back to 10 results (no scroll needed), then proceeds to 20 results (scroll needed) the scrollbar will once again show up in IE7.
I can still scroll the inner content with my mousewheel, there is just no scrollbar.
Anyone know what the issue could be? I'm stumped... can provide details if needed.
Clarification: The scrollbar is disappearing even when the content is overflowing the Div.
Change the CSS property overflow from auto to scroll
See http://www.w3.org/TR/CSS2/visufx.html#propdef-overflow
I had a similar issue and managed to resolve it. Now, understand I had the width of a table set to 100%. I believe the problem is related to the doctype. I tried setting the doctype to
<!DOCTYPE html> <!-- HTML5 -->
and I still had the same problem. It was only after removing the doctype declaration that the IE7 bug went away (quirks mode, which I wouldn't recommend). I have also tested it using XHTML 1.0/1.1/HTML 4.01 doctype declarations (Strict, Transitional, Frameset) and the same problem occurs. It appears this issue arises because using a doctype declaration tells the browser to use standard mode. IE7 and less does not handle standard mode browsing very well.
To resolve it for IE7, I set the width to 99%.
Here is working sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#Content
{
overflow-y: auto;
overflow-x: hidden;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="Content">
<table width="99%" border="1">
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
</tbody>
</table>
</div>
</body>
</html>
Related
When I create say a div container with a say 100px width and place 2 div elements one floating to the left and the other to the right with a border of 2px and a width of 46px each they should be drawn on the same line side by side covering the whole width of the parent container. This happens in Firefox and Chrome but IE9 draws them on separate lines and in order to have the same effect as in the other browsers I need to specify a width of 102px in the parent element.
Why is that?
Here's the code:
<html>
<head>
<style>
div {
margin:0;
padding:0;
}
</style>
</head>
<body>
<div style="border: 5px solid;width:100px;height:100px">
<div style='border:2px solid green;width:46px;height:46px;float:left'></div>
<div style='border:2px solid
green;width:46px;height:46px;float:right'></div>
<div>
</body>
</html>
Personally, I'd much rather use display: inline-block than much around with floats.
Anyway, the most likely cause of the problem is the empty whitespace between the two <div> elements. It could be shifting the second one down. Try removing it (ie. <div...>...</div><div...>...</div>)
OK I found a solution to the problem.
What you have to do is you have to add the Doctype declaration e.g.:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
It doesn't seem to be because of the ie box model bug http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
As this behaviour would result in smaller elements...
I'm really confused...
Are these properties not considered standard CSS?
I'm using something like this, which works properly on Chrome 12, FF4, Opera 11, and Safari 5, but on IE9 the min-width is not respected if width < min-width.
<span style="float:left; width:11%; min-width:150px;">
...
</span>
Edit: a little annoyed at the liberal editing and migrating of my question, but w/e. Here's a fuller example that shows a clear difference in IE9 vs other browsers.
<html><body>
<p style="width: 600px">
<span style="float: left; width: 11%; min-width: 150px">Hello.</span>
<span style="float: left; width: 11%">World.</span>
</p>
</body></html>
Edit 2: As noted in Kevin's comment below, adding <!DOCTYPE html> to the beginning solves the IE issue.
If what you are saying is true, IE9 would be deviating form the spec. However, I cannot duplicate your complaint. Using your example, IE9 respects min-width if width is less than 150px per this jsfiddle.
EDIT:
NOTE: Quirks Mode follow different rules and does not comply with standard CSS in any browser. If you add a doctype to the page, this should resolve the problem (add: <!DOCTYPE html>).
To expand on the issue, Quirks Mode is not standardized. There are some things that most browser implement, but new features are undefined in those defacto standards. Thus, some browsers are allowing new CSS to be used (as you have observed), but IE9 is ignoring new css values, as they have no place in Quirks Mode.
I found that <!DOCTYPE html> was insufficient — I had to go strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Try following code:
#limit-size
{
min-width: 998px;
width: expression(this.width < 998 ? 998: true);
min-height: 250px;
height: expression(this.height < 250 ? 250: true);
}
//html:
<div id="limit-size"></div>
I ran into the following problem:
how to make a general container (HTML + CSS; no javascript)
that is contrained vertically (it has a fixed outer height), so it may have a vertical scrollbar
but that can grow horizontally (as needed by the content of the container), so it never has a horizontal scrollbar
it has to work in IE8, FF, Chrome (no IE7 or earlier)
the solution semms to be be trivial at first
but I can not get rid of the horizontal scrollbar in IE8:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<div style="display: table;" class="container-div-1">
<div style="display: table-cell;" class="container-div-2">
<div style="overflow-y: scroll; height: 19em;" class="container-div-3">
<div style="width: 30em; height: 30em; background-color: red;" class="example-content"></div>
</div>
</div>
</div>
</body>
</html>
in this example, we need a 19em high container, that can grow horizontally, as needed by the content (in this case, the "example-cotent" div)
please don't suggest to modify the "example-content" div, as it is just a sample content (any content could be there)
this problem is the generalization of this issue:
IE8 horizontal scrollbar problem
Floating will probably get the result you're looking for. Check out my example here:
http://jsbin.com/ivegi4/4/edit
I took away the containing divs, as I didn't think they were necessary, but I wouldn't see a problem adding them back in if you absolutely needed them.
Set position: absolute on the container-div-3 div. This will cause the div to shrink-wrap whatever is inside, and works fine in IE8.
I have the following code that I am using to display a search tool with a scrolling results section. In IE the code works fine:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html style="background:black;height:100%;width:100%;">
<head>
<title>Report</title>
</head>
<body style="background:black;">
<table HEIGHT="100%" WIDTH="100%" style="background:red;">
<tr>
<td>
Search Area
</td>
</tr>
<tr>
<td HEIGHT="100%" WIDTH="100%" style="background:orange;">
<div style="overflow-y:scroll;height:100%;">
<table style="width:100px;height:1000px;">
<tr>
<td style="background:white;">
Results Area
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
But when I set the meta tag to use IE8 formatting by adding:
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
The bottom DIV tag expands beyond the page. I have tried a number of options though and can't find a way around it without actually specifying a height for the values. Which will not work as I want the page to take up 100% of the screen no matter the size of the browser window.
Any help would be much appreciated.
This metatag enables correct CSS rendering, and in CSS – by design – height:100% basically doesn't work.
You need to give specific height to every single ancestor of the element, including <body>, <table>, <tr> and even <tbody> element that's automatically inserted by the parser.
Anyway, this layout can be achieved in easier way:
.topBanner {
position:absolute; position:fixed;
height:2em;
top:0; left:0; width:100%;
}
body {padding-top: 2em}
this will degrade nicely in IE6, and unlike overflow, will work properly in Mobile Safari.
Edit:
Removing the DOCTYPE declaration will make height="100%" work but it puts the browser in quirks mode though, which is not desirable.
Generally speaking using tables for layout is discouraged, you should use CSS instead.
For example: http://jsfiddle.net/rf649/7/
HTML
<div id="search">Search Area</div>
<div id="results">Results Area</div>
CSS:
#search {
background-color: red;
position: fixed;
height: 150px;
width: 100%;
}
#results{
background-color: orange;
position: fixed;
top: 150px;
width: 100%;
bottom: 0;
overflow: auto;
}
You should set all margins and paddings for the parent elements to zero in order to get what you want.
Update: Sorry, didn't understand the problem at once. Ben's hint should be the better one I assume. :)
Update 2: Oops, since Ben has deleted his answer my first update doesn't make any sense. Try setting the body's height to 100%, that should solve the problem.
My understanding about cross browser CSS is not that big so it might not be the best solution, but it's a solution.
As far as I've seen, you always have to set the height/width of the container that you want to overflow, so you need to set them.
To deal with the resolution I would suggest you to add a jQuery script at the onReady event that dynamically would fix the height and width making the overflow work.
I had the similar problem like you and finally the solution was to modificate a CSS line entry that had an !important modificator for a fixed height declaration. In the HTML code the class (defined in CSS) had the height assigned to 100%, but the CSS applied the !important during the style loading.
On an ASP.NET GridView, I have a field that prints a string from the database. This data can range from 10 to 100 characters. When it is longer than normal, the field word-wraps the data, making the row take up more vertical space than the others. I want to truncate any data that does not fit on the row, and then have a "..." next to it to indicate there is more. I don't need to allow them to resize, I just don't want any rows of different height. I'm hoping this can be done dynamically on the client-side, for SEO purposes.
See the ActiveWIdgets Grid here, and resize the company name so that it does not fit. You will notice that it does not wrap the contents, but it instead does exactly what I want to do.
How can I apply this technique to an ASP.NET GridView? I assume some Javascript is involved. If that is true, I would prefer to NOT use a library like jQuery (don't ask why -- I am not allowed to use an external dependency for this project).
Table of contents
Illustration of problem
Illustration of one solution
Illustration of problem
Copy the following HTML into your browsers (at least Firefox and Internet Explorer 7, but you should try Opera too):
<!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></title>
<style type="text/css">
div, td
{
width: 100px;
border: solid 1px black;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<div>
content content content content content content
</div>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
content content content content content content
</td>
</tr>
</tbody>
</table>
</body>
</html>
Notice that the td element does not hide the overflowing content. Only the div element nows how to do this. Internet Explorer's td element does not even know how to stop wrapping the content.
Strictly speaking, according to the standard, the td element does not support the white-space rule. The div and th elements do.
Illustration of one solution
This is one solution to the problem (Tested in Opera, Firefox and Internet Explorer 7):
<!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></title>
<style type="text/css">
td
{
border: solid 1px black;
}
div
{
width: 100px;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<div>
content content content content content content
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
If you know your user is using Internet Explorer, you can use the following IE only CSS:
td.nooverflow
{
text-overflow:ellipsis;
}
Then set the ItemStyle for the column you want to fix the width of as <ItemStyle CssClass='nooverfolow'/> (you'll need to play with the CSS to get it right for your application)
Unfortunately since this is IE only, for other browsers, there are some hacks available to simulate the same thing:
Here's one for Firefox.
Here's another for Firefox
Here's one using jQuery