CODEWITHSUNDEEP
htmlcssinternet-explorerxhtmlquirks-mode
Markos Fragkakis
Markos Fragkakis

Reputation: 7771

height:100% problem in IE7, not in FF

I want to display a page with no scrollbar (height:100%). I have read suggestions to add this argument to html and body. But it does not work as I expect. In FF indeed I do not see a scrollbar. But in IE7 and 8 (Standards mode) there is a scrollbar. In Quirks mode it works as expected. Please take a look at this:

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <!-- saved from url=(0053)http://apptools.com/examples/tables/standardscss.html -->
    <html><head><title>standards compliance mode with css rendering</title>
    <meta content="text/html; charset=iso-8859-1" http-equiv=content-type>
    <meta content=no http-equiv=imagetoolbar>
    <meta name=mssmarttagspreventparsing content=true>
    <style type=text/css>body {
        padding-bottom: 0px; background-color: #fff; margin: 0px; padding-left: 0px; padding-right: 0px; color: #000; padding-top: 0px
    }
    table {
        border-bottom: #008 1px solid; border-left: #008 1px solid; border-top: #008 1px solid; border-right: #008 1px solid
    }
    html {
        height: 100%
    }
    body {
        height: 100%
    }
    .fullheight {
        height:100%
    }
    </style>

    <meta name=generator content="mshtml 8.00.6001.18876"></head>
    <body>
    <table width=450 bgcolor=#ccccff align=center height="100%">
      <tbody>
      <tr>
        <td colspan="2" height="200px">
          <p>paragraph</p>
    </td></tr>
      <tr class="fullheight"><td >
      <p>paragraph</p>
      </td>
      <td>
      <p>paragraph</p>
      </td>
      </tr>


      </tbody></table></body></html>

Upvotes: 2

Views: 1167

Answers (2)

Davide Muzzarelli
Davide Muzzarelli

Reputation: 989

If the problem is the scrollbar, you can use the CSS "overflow" attribute in order to force the behavior:

  • visible: the overflow is not clipped. It renders outside the element's box. This is default;
  • hidden: the overflow is clipped, and the rest of the content will be invisible;
  • scroll: the overflow is clipped, but a scroll-bar is added to see the rest of the content;
  • auto: if overflow is clipped, a scroll-bar should be added to see the rest of the content.

Upvotes: 1

Tom
Tom

Reputation: 30698

Umm... what you're asking can get into complicated territory, but I'd start with eliminating inconsistencies in your code. For example:

  • Your table is 100% height.
  • Inside, you have a 200px high <td> inside one <tr>
  • Inside, you also have a 100% high second <tr>

So you're telling the code that 100% + 200px = 100%. That fails logically, although you might want to hack your code that way sometimes.

First, try adjusting the properties so that they work logically and try to reduce your code to greater simplicity, and then work your way up from there. After that, if a scrollbar still appears, you'll probably need to start tweaking with negative margins. This will get so "intimate" with your code that frankly anyone advising you would need a clear sense of your objectives, rather than advising on individual code elements.

Upvotes: 1

Related Questions