CSS Scroll Problem in IE

**Mark__G** · 10-16-2007, 08:34 AM

I can't figure out why the scrollbar wont show up in IE but works fine in Mozilla?

Code:

html ---->

<div class="tableContainer" id="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="755" class="scrollTable">
<tbody class="scrollContent">
<tr>
<td>
<br/>
SCROLLABLE PAGE CONTENT
</td>
</tr>
</tbody>
</table>
</div>

css ---->

/* define height and width of scrollable area. Add 16px to width for scrollbar          */
/* allow WinIE to scale 100% width of browser by not defining a width                   */
/* WARNING: applying a background here may cause problems with scrolling in WinIE 5.x   */
div.tableContainer {
	clear: both;
	border: 0px;
	height: 440px;
	width: 750px;
	overflow: auto;
}

/* WinIE 6.x needs to re-account for it's scrollbar. Give it some padding */
\html div.tableContainer/* */ {
	padding: 0 16px 0 0;
	width: 750px;
}

/* clean up for allowing display Opera 5.x/6.x and MacIE 5.x */
html>body div.tableContainer {
	height: auto;
	padding: 0;
}

/* Reset overflow value to hidden for all non-IE browsers. */
/* Filter out Opera 5.x/6.x and MacIE 5.x                  */
head:first-child+body div[class].tableContainer {
	height: 440px;
	overflow: hidden;
	width: 750px
}

/* define width of table. IE browsers only                 */
/* if width is set to 100%, you can remove the width       */
/* property from div.tableContainer and have the div scale */
div.tableContainer table {
	float: left;
    width: 100%
}

/* WinIE 6.x needs to re-account for padding. Give it a negative margin */
\html div.tableContainer table/* */ {
	margin: 0 -16px 0 0
}

/* define width of table. Opera 5.x/6.x and MacIE 5.x */
html>body div.tableContainer table {
	float: none;
	margin: 0;
	width: 100%
}

/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
head:first-child+body div[class].tableContainer table {
	width: 100%
}


/* define the table content to be scrollable                                  */
/* set TBODY element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto                     */
/* Filter out Opera 5.x/6.x and MacIE 5.x                                                 */
head:first-child+body tbody[class].scrollContent {
	display: block;
	height: 440px;
	overflow: auto;
	width: 750px;
}

/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                             */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
	background: #FFF;
	border-bottom: none;
	border-left: none;
	border-right: 0px;
	border-top: 0px;
	padding: 5px 5px 5px 5px
}

tbody.scrollContent tr.alternateRow td {
	background: #FFF;
	border-bottom: none;
	border-left: none;
	border-right: 0px;
	border-top: 0px;
	padding: 5px 5px 5px 5px
}

/* define width of TD elements: 1st, 2nd, and 3rd respectively.          */
/* All other non-IE browsers.                                            */
/* http://www.w3.org/TR/REC-CSS2/select...cent-selectors        */
html>body tbody.scrollContent td {
	width: 33%
}

html>body tbody.scrollContent td + td {
	width: 33%
}

html>body tbody.scrollContent td + td + td {
	width: 33%
}

What really makes it frustrating is it works in IE if I change the HTML DOC TYPE to just <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> with <html>

rather than:
<!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" xml:lang="en" lang="en">

but in doing so it screws up other css code in IE?????? WHY wont it work with the above doctype?

**dog** · 10-16-2007, 06:09 PM

Hmmm... i don't really know much about the doctypes but if you want scrollbars to appear in IE I would suggest that you change

Code:

overflow:hidden

to

Code:

overflow:scroll

.

I haven't tested it or even necessarily understood the problem but take a look and see if this helps.

Peace
dog

**boogyman** · 10-16-2007, 06:15 PM

What really makes it frustrating is it works in IE if I change the HTML DOC TYPE to just <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> with <html>

rather than:
<!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" xml:lang="en" lang="en">

you shouldn't be using either of those. The transitional DOCTYPE was designed for when CSS1 was first release and XHTML is not supported by IE so you will be in quirks mode and you cannot expect your code to render correctly every time. instead you should be using HTML4.01 Strict

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3c.org/TR/html4/strict.dtd">
<html>
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     <title>TITLE</title>
</head>
<body>
...

**Mark__G** · 10-16-2007, 06:15 PM

Thanks for the reply but that is unfortunately not it. It hides the horizontal scroll in Mozilla.

**Mark__G** · 10-16-2007, 07:49 PM

OK Thanks I will try that DOCTYPE and see what happens

**djr33** · 10-16-2007, 07:55 PM

please post code in [code] tags. SO much easier to read.

**Mark__G** · 10-17-2007, 11:29 PM

Sorry...

html ---->

Code:

<div class="tableContainer" id="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="755" class="scrollTable">
<tbody class="scrollContent">
<tr>
<td>
<br/>
SCROLLABLE PAGE CONTENT
</td>
</tr>
</tbody>
</table>
</div>

css ---->

Code:

/* define height and width of scrollable area. Add 16px to width for scrollbar          */
/* allow WinIE to scale 100% width of browser by not defining a width                   */
/* WARNING: applying a background here may cause problems with scrolling in WinIE 5.x   */
div.tableContainer {
	clear: both;
	border: 0px;
	height: 440px;
	width: 750px;
	overflow: auto;
}

/* WinIE 6.x needs to re-account for it's scrollbar. Give it some padding */
\html div.tableContainer/* */ {
	padding: 0 16px 0 0;
	width: 750px;
}

/* clean up for allowing display Opera 5.x/6.x and MacIE 5.x */
html>body div.tableContainer {
	height: auto;
	padding: 0;
}

/* Reset overflow value to hidden for all non-IE browsers. */
/* Filter out Opera 5.x/6.x and MacIE 5.x                  */
head:first-child+body div[class].tableContainer {
	height: 440px;
	overflow: hidden;
	width: 750px
}

/* define width of table. IE browsers only                 */
/* if width is set to 100%, you can remove the width       */
/* property from div.tableContainer and have the div scale */
div.tableContainer table {
	float: left;
    width: 100%
}

/* WinIE 6.x needs to re-account for padding. Give it a negative margin */
\html div.tableContainer table/* */ {
	margin: 0 -16px 0 0
}

/* define width of table. Opera 5.x/6.x and MacIE 5.x */
html>body div.tableContainer table {
	float: none;
	margin: 0;
	width: 100%
}

/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
head:first-child+body div[class].tableContainer table {
	width: 100%
}


/* define the table content to be scrollable                                  */
/* set TBODY element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto                     */
/* Filter out Opera 5.x/6.x and MacIE 5.x                                                 */
head:first-child+body tbody[class].scrollContent {
	display: block;
	height: 440px;
	overflow: auto;
	width: 750px;
}

/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                             */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
	background: #FFF;
	border-bottom: none;
	border-left: none;
	border-right: 0px;
	border-top: 0px;
	padding: 5px 5px 5px 5px
}

tbody.scrollContent tr.alternateRow td {
	background: #FFF;
	border-bottom: none;
	border-left: none;
	border-right: 0px;
	border-top: 0px;
	padding: 5px 5px 5px 5px
}

/* define width of TD elements: 1st, 2nd, and 3rd respectively.          */
/* All other non-IE browsers.                                            */
/* http://www.w3.org/TR/REC-CSS2/select...cent-selectors        */
html>body tbody.scrollContent td {
	width: 33%
}

html>body tbody.scrollContent td + td {
	width: 33%
}

html>body tbody.scrollContent td + td + td {
	width: 33%
}

**Mark__G** · 10-17-2007, 11:42 PM

The Strict DOCTYPE did not solve my problem..

Thread: CSS Scroll Problem in IE

Thread Tools

Search Thread

CSS Scroll Problem in IE

Bookmarks

Bookmarks

Posting Permissions