1. Home
  2. Forums Index
  3. Browser Side / CSS 8:32 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Problem with CSS and IE - position Relative

in IE, position relative is pushing my footer down a bit.

         

anverc

1:24 am on Aug 11, 2009 (gmt 0)

10+ Year Member



I'm having a problem with IE where I have a div using position relative and scroll bars inside of another div. The site is rendering fine with webkit browsers and firefox, but in IE, the footer is getting offset.

Anyone have a clue how to get this to look correctly in IE, Firefox, Chrome and Safari?

Try the code below... Notice I've marked two areas shades of red (everything else is gray scale). In IE you can see the red, in other browsers you cannot... I'd like for IE to look like the other browsers.
CSS 

body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background: #FFFFFF;
text-align: center;
}
#page {
background-color: #CCCCCC;
border: 1px solid #CCCCCC;
}
#header {
background: #AAAAAA;
}
#header-sized {
min-width: 814px;
width: 814px;
max-width: 814px;
min-height: 104px;
height: 104px;
max-height: 104px;
}
#content {
background: #FF9999;
 margin-left: auto ;
 margin-right: auto ;
min-width: 814px;
width: 814px;
max-width: 814px;
min-height: 500px;
height: 500px;
max-height: 500px;
}
#content-left {
background: #888888;
float: left;
}
#content-x-sized {
min-width: 10px;
width: 10px;
max-width: 10px;
min-height: 500px;
height: 500px;
max-height: 500px;
}
#content-right {
background: #666666;
float: left;
}
#content-center {
background: #FF0000;
float: left;
min-width: 794px;
width: 794px;
max-width: 794px;
min-height: 500px;
height: 500px;
max-height: 500px;
}
#content-scroll {
background: #444444;
position: relative;
overflow: auto;
z-index: 999;
top: -22px;
min-width: 794px;
width: 794px;
max-width: 794px;
min-height: 535px;
height: 535px;
max-height: 535px;
}
#content-actual {
text-align: left;
}
#footer {
min-width: 814px;
width: 814px;
max-width: 814px;
min-height: 31px;
height: 31px;
max-height: 31px;
 margin-left: auto ;
 margin-right: auto ;
}
#footer-left {
background: #222222;
float: left;
}
#footer-left-sized
{
min-width: 24px;
width: 24px;
max-width: 24px;
}
#footer-right {
background: #222222;
float: left;
}
#footer-right-sized
{
min-width: 23px;
width: 23px;
max-width: 23px;
}
#footer-left-sized,#footer-right-sized
{
min-height: 31px;
height: 31px;
max-height: 31px;
}
#footer-center {
background: #000000;
float: left;
min-width: 767px;
width: 767px;
max-width: 767px;
min-height: 31px;
height: 31px;
max-height: 31px;
text-align: center;
}

HTML 

<html>
<head>
<LINK REL="StyleSheet" HREF="test.css" TYPE="text/css" MEDIA="screen" /> 
</head>
<body scroll="no">
<div id="page">
<div id="header" role="banner">
<div id="header-sized"></div>
</div>
<div id="content" role="main">
<div id="content-left" role="banner">
<div id="content-x-sized"></div>
</div>
<div id="content-center">
<div id="content-scroll">
<div id="content-actual">
<!-- CONTENT GOES HERE -->
<table>
<tr><td>Item 1</td></tr><tr><td>Item 2</td></tr><tr><td>Item 3</td></tr><tr><td>Item 4</td></tr><tr><td>Item 5</td></tr><tr><td>Item 6</td></tr><tr><td>Item 7</td></tr><tr><td>Item 8</td></tr><tr><td>Item 9</td></tr><tr><td>Item 10</td></tr><tr><td>Item 11</td></tr><tr><td>Item 12</td></tr><tr><td>Item 13</td></tr><tr><td>Item 14</td></tr>
<tr><td>Item 1</td></tr><tr><td>Item 2</td></tr><tr><td>Item 3</td></tr><tr><td>Item 4</td></tr><tr><td>Item 5</td></tr><tr><td>Item 6</td></tr><tr><td>Item 7</td></tr><tr><td>Item 8</td></tr><tr><td>Item 9</td></tr><tr><td>Item 10</td></tr><tr><td>Item 11</td></tr><tr><td>Item 12</td></tr><tr><td>Item 13</td></tr><tr><td>Item 14</td></tr>
<tr><td>Item 1</td></tr><tr><td>Item 2</td></tr><tr><td>Item 3</td></tr><tr><td>Item 4</td></tr><tr><td>Item 5</td></tr><tr><td>Item 6</td></tr><tr><td>Item 7</td></tr><tr><td>Item 8</td></tr><tr><td>Item 9</td></tr><tr><td>Item 10</td></tr><tr><td>Item 11</td></tr><tr><td>Item 12</td></tr><tr><td>Item 13</td></tr><tr><td>Item 14</td></tr>
<tr><td>Item 1</td></tr><tr><td>Item 2</td></tr><tr><td>Item 3</td></tr><tr><td>Item 4</td></tr><tr><td>Item 5</td></tr><tr><td>Item 6</td></tr><tr><td>Item 7</td></tr><tr><td>Item 8</td></tr><tr><td>Item 9</td></tr><tr><td>Item 10</td></tr><tr><td>Item 11</td></tr><tr><td>Item 12</td></tr><tr><td>Item 13</td></tr><tr><td>Item 14</td></tr>
<tr><td>Item 1</td></tr><tr><td>Item 2</td></tr><tr><td>Item 3</td></tr><tr><td>Item 4</td></tr><tr><td>Item 5</td></tr><tr><td>Item 6</td></tr><tr><td>Item 7</td></tr><tr><td>Item 8</td></tr><tr><td>Item 9</td></tr><tr><td>Item 10</td></tr><tr><td>Item 11</td></tr><tr><td>Item 12</td></tr><tr><td>Item 13</td></tr><tr><td>Item 14</td></tr>
</table>
</div>
</div>
</div>
<div id="content-right" role="banner">
<div id="content-x-sized"></div>
</div>
</div>
<div id="footer" role="footer">
<div id="footer-left">
<div id="footer-left-sized">
</div>
</div>
<div id="footer-center">
footer text
</div>
<div id="footer-right">
<div id="footer-right-sized">
</div>
</div>
</div>
</div>
</body>
</html>

D_Blackwell

3:49 am on Aug 11, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I have tweaked a number of colors to get look at what is where, and tweaked a number of comments. IMO, the problem lies with #content-scroll, and recommend that you take a look at this declaration. The 'revised' code stands up in FF, Opera, and IE.

Took me a minute to realize that you were adding code for ARIA. Don't see much of that. Are you doing much with ARIA? Any thoughts or comments that you'd like to share?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>
</title>
<meta http-equiv="imagetoolbar" content="no" />
<meta name="robots" content="index,follow" />
<meta name="language" content="english" />
<meta name="keywords" content="" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="" />
<meta name="" />
<meta name="verify-v1" content="" />
<!--##########
<LINK REL="StyleSheet" HREF="test.css" TYPE="text/css" MEDIA="screen" />
-->
<style type="text/css" media="screen" />
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background: #fff;
text-align: center;
}

#page {
background-color: #ccc;
border: 1px solid #ccc; /**********Do you need a border if it matches the background-color:?*/;
}

#header {
background-color: #aaa;
}
#header-sized {
min-width: 814px;
width: 814px;
max-width: 814px;
min-height: 104px;
height: 104px;
max-height: 104px;
}

/**********Problem 1 - OK*/
#content {
background: green;
margin-left: auto ;
margin-right: auto ;
min-width: 814px;
width: 814px;
max-width: 814px;
/*min-height: 500px;*/
height: 500px;
/*max-height: 500px;*/
}

/**********Not OK? - Checks out.*/
#content-left {
background: teal;
float: left;
}

#content-x-sized {
min-width: 10px;
width: 10px;
max-width: 10px;
/*min-height: 500px;*/
height: 500px;
/*max-height: 500px;*/
}

/**********Not OK? - Checks out.*/
#content-right {
background: teal;
float: left;
}

/**********Problem 2 - OK*/
#content-center {
background: blue;
float: left;
min-width: 794px;
width: 794px;
max-width: 794px;
/*min-height: 500px;*/
height: 500px;
/*max-height: 500px;*/
}

/**********Definite problem. Likely source. height: 535px; is an issue.*/
#content-scroll {
background: #444;
/*position: relative;*/
overflow: auto;
z-index: 999;
top: -22px;
min-width: 794px;
width: 794px;
max-width: 794px;
/*min-height: 535px;*/
height: 500px;
/*max-height: 535px;*/
}

#content-actual {
text-align: left;
}

#footer {
min-width: 814px;
width: 814px;
max-width: 814px;
min-height: 31px;
height: 31px;
max-height: 31px;
/*margin-left: auto ;
margin-right: auto ;*/
margin: 0 auto;
}

#footer-left {
background: #222;
float: left;
}

#footer-left-sized
{
min-width: 24px;
width: 24px;
max-width: 24px;
}

#footer-right {
background: #222;
float: left;
}

#footer-right-sized
{
min-width: 23px;
width: 23px;
max-width: 23px;
}

#footer-left-sized,#footer-right-sized
{
min-height: 31px;
height: 31px;
max-height: 31px;
}

#footer-center {
background: #000;
float: left;
min-width: 767px;
width: 767px;
max-width: 767px;
min-height: 31px;
height: 31px;
max-height: 31px;
text-align: center;
}
</style>
</head>
<!--#########
I'm having a problem with IE where I have a div using position relative and scroll bars inside of another div. The site is rendering fine with webkit browsers and firefox, but in IE, the footer is getting offset.

Anyone have a clue how to get this to look correctly in IE, Firefox, Chrome and Safari?

Try the code below... Notice I've marked two areas shades of red (everything else is gray scale). In IE you can see the red, in ther browsers you cannot... I'd like for IE to look like the other browsers.
-->
<div id="page">
<div id="header" role="banner">
<div id="header-sized"></div>
</div>
<div id="content" role="main">
<div id="content-left" role="banner">
<div id="content-x-sized"></div>
</div>
<div id="content-center">
<div id="content-scroll">
<div id="content-actual">
<!-- CONTENT GOES HERE -->
<table>
<tr><td>Item 1</td></tr><tr><td>Item 2</td></tr><tr><td>Item 3</td></tr><tr><td>Item 4</td></tr><tr><td>Item

5</td></tr><tr><td>Item 6</td></tr><tr><td>Item 7</td></tr><tr><td>Item 8</td></tr><tr><td>Item 9</td></tr><tr><td>Item

10</td></tr><tr><td>Item 11</td></tr><tr><td>Item 12</td></tr><tr><td>Item 13</td></tr><tr><td>Item 14</td></tr>
<tr><td>Item 1</td></tr><tr><td>Item 2</td></tr><tr><td>Item 3</td></tr><tr><td>Item 4</td></tr><tr><td>Item

5</td></tr><tr><td>Item 6</td></tr><tr><td>Item 7</td></tr><tr><td>Item 8</td></tr><tr><td>Item 9</td></tr><tr><td>Item

10</td></tr><tr><td>Item 11</td></tr><tr><td>Item 12</td></tr><tr><td>Item 13</td></tr><tr><td>Item 14</td></tr>
<tr><td>Item 1</td></tr><tr><td>Item 2</td></tr><tr><td>Item 3</td></tr><tr><td>Item 4</td></tr><tr><td>Item

5</td></tr><tr><td>Item 6</td></tr><tr><td>Item 7</td></tr><tr><td>Item 8</td></tr><tr><td>Item 9</td></tr><tr><td>Item

10</td></tr><tr><td>Item 11</td></tr><tr><td>Item 12</td></tr><tr><td>Item 13</td></tr><tr><td>Item 14</td></tr>
<tr><td>Item 1</td></tr><tr><td>Item 2</td></tr><tr><td>Item 3</td></tr><tr><td>Item 4</td></tr><tr><td>Item

5</td></tr><tr><td>Item 6</td></tr><tr><td>Item 7</td></tr><tr><td>Item 8</td></tr><tr><td>Item 9</td></tr><tr><td>Item

10</td></tr><tr><td>Item 11</td></tr><tr><td>Item 12</td></tr><tr><td>Item 13</td></tr><tr><td>Item 14</td></tr>
<tr><td>Item 1</td></tr><tr><td>Item 2</td></tr><tr><td>Item 3</td></tr><tr><td>Item 4</td></tr><tr><td>Item

5</td></tr><tr><td>Item 6</td></tr><tr><td>Item 7</td></tr><tr><td>Item 8</td></tr><tr><td>Item 9</td></tr><tr><td>Item

10</td></tr><tr><td>Item 11</td></tr><tr><td>Item 12</td></tr><tr><td>Item 13</td></tr><tr><td>Item 14</td></tr>
</table>
</div>
</div>
</div>
<div id="content-right" role="banner">
<div id="content-x-sized"></div>
</div>
</div>
<div id="footer" role="footer">
<div id="footer-left">
<div id="footer-left-sized">
</div>
</div>
<div id="footer-center">
footer text
</div>
<div id="footer-right">
<div id="footer-right-sized">
</div>
</div>
</div>
</div>
<!--##########Took me a minute to realize that you were adding code for ARIA. Don't see much of that. Are you doing much with ARIA?-->
</body>
</html>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 8:32 pm May 1, 2026