Home/ Questions/Q 8903895
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T01:59:06+00:00

I have a very simple web page but something in the CSS causes a

  • 0

I have a very simple web page but something in the CSS causes a problem for Chrome.
Basically, if the content goes beyond what is rendered on the immediate screen Chrome will not be able to scroll down to it. The content and scrolling works fine in FF and IE.
The only way I have been able to get Chrome to show the content (beyond eliminating the CSS) is to
change html{height: 100%;} to some higher value (200%). Obviously that is not an ideal solution.

HTML and CSS:
http://cssdesk.com/Z3k52

Browsers:

Chrome 23.0.1271.91 // FF 16.0.2 // IE 9.0.8112.16421

I’m sure I’m just missing something simple, but I don’t know what.

HTML:

<!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>Home Page</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link href="layout.css" rel="stylesheet" type="text/css" />
</head>


<body>
    <div id="container">
        <div id="box_margin">
            <div id="title">Some Title, Info, Etc.</div>

            <div id="link_nav">
                <div class="links"><a href="index.html">Home</a></div>
                <div class="links"><a href="links.html">Links</a></div>
                    <div class="links"><a href="about.html">About</a></div>
                <div class="links"><a href="contact.html">Contact</a></div>
            </div>

            <div id="contentbox">
                <div class="box_header">Home Screen</div>
                <div class="pagecontent">
                    <p>Text at the top</p>
                    <p>Next line</p>
                    <p>Next line</p>
                    </br>....
                    </br>....
                    </br></br></br></br>text continues below....</br></br></br></br></br></br></br></br>and can be scrolled to in FF/IE</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>o</br>o</br>o</br>o</br>o</br>\ /</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>....keep going....</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br><p>But not Chrome</p>
                </div>
                        <div id="footer">Here is the footer</div>
            </div>
        </div>
    </div>
</body>
</html>

CSS:

html
{
  height: 100%;
}

body
{
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 150%;
  text-align: center;
  font-size: 62.5%;
}

*
{
  font-size: 1em;
  font-family: Arial, Verdana, sans-serif;
  color: #000000;
  text-align: left;
}

#container
{
  margin: 0 auto 0 auto;
  display: table;
  height: 100%;
  position: relative;
  overflow: hidden;
  width: 600px;
}

.links
{
  width:75px;
  margin-right:10px;
  float: left;
  margin-top:24px;
  text-align:center;
  font-family:Georgia, "Times New Roman", Times, serif;
  position:relative; bottom:0px;
  color: #e1a630;
}

.links a{
  font-family:Arial, Helvetica, sans-serif;
  font-size:1.2em;
  font-weight:bold;
}

#link_nav
{
  margin-right:10px;
  height:40px;
  width:600px;
}

#title
{
  width:230px;
  height:40px;
  margin-right:20px;
  margin-top:15px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:2em;
  font-weight:bold;
  text-align:center;
  float:left;
}

.box_header
{
  font-family:Verdana, Arial, Helvetica, sans-serif;
  color:#002664;
  font-size:1.9em;
  margin-top:15px;
  margin-left:15px;
  margin-right:15px;
  margin-bottom:15px;
  width:573px;
}

.pagecontent
{
  font-family: Arial, Helvetica, sans-serif;
  color:#000000;
  font-size:1.2em;
  margin-left:20px;
  margin-right:20px;
  width:560px;
}

#contentbox
{
    position: absolute;
    vertical-align: middle;
    background-color:#5284CC;
    width:600px;
    clear:both;
}

#footer
{
  width:600px;
  height:20px;
  background-color:#5284CC;
  background-repeat:no-repeat;
  text-align:center;
  color:#BDCDEC;
}

#footer a
{
  font-size:.8em;
  color:#BDCDEC;
}

#box_margin
{
  margin-top:25px;
}

html, body {
  text-align: center;
}

p {text-align: left;}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Don’t change the display property and positioning of the #container element.

    The code below work fine on chrome and firefox. Didn’t test on IE because im on a mac but i’m pretty certain it works.

    #container
{
  margin: 0 auto;
  overflow: hidden;
  width: 600px;
}

    http://cssdesk.com/tyCdB

    • 0