CSS Scroll Problem in IE [Archive] - Dynamic Drive Forums

View Full Version : 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?

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/selector.html#adjacent-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
overflow:hidden to
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

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

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

Mark__G

10-17-2007, 11:42 PM

The Strict DOCTYPE did not solve my problem..