Member Avatar for hajamie

Hello, I have a problem. I want a div element to be 90% the width of a cell in a table and 80% the height. The width bit works, but height doesnt.
I also want it to be centered in the cell. Doesnt work.
I also want there to be a verticle scrollbar when necessary.

so far i have:

#content {
height: 80%;
width : 90%;
margin-left: auto;
margin-right: auto;
padding: 5px;
text-align: center;
overflow: auto;
}

and I have set the html and body to have a 100% width and height.

The div scrolls in IE, but in firefox it expands downwards.
in firefox it is centered, but in IE it is not.
in firefox the height is auto (rather than 80%).

see http://www.nugit.co.uk/?dirr=1Home%2F1Products%2F1DVD+Players%2F2Portable


Thanks in advance.

  • 2 Contributors
  • 4 Replies
  • 191 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by hajamie

Dani AI

Generated

Short diagnosis: Firefox is behaving to spec — percentage heights are resolved against the element’s containing block. If any ancestor (table, tr, td, etc.) has an automatic height, a child set to a percent height won’t compute and will act as auto. Internet Explorer historically relaxed that rule, which explains the mismatch you saw: ’s div grows in Firefox but scrolls in IE. Horizontal centering with margin: 0 auto only works when the element is block-level and has a set width; vertical centering inside a table cell should use vertical-align: middle on the td.

Practical fixes (choose one that fits the layout):

  • Make percent heights compute by giving the whole ancestor chain an explicit height (html/body and the table/tr/td):
html, body { height: 100%; margin: 0; }
table.full, table.full tr, table.full td { height: 100%; }
table.full td { vertical-align: middle; }
  • Use absolute positioning inside a relatively positioned container to avoid percent-height quirks:
.container { position: relative; height: 100%; }
.content { position: absolute; top: 10%; bottom: 10%; left: 5%; right: 5%; overflow: auto; box-sizing: border-box; }
  • Modern, simpler approach: flexbox and viewport units (widely supported today):
.container { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.content { max-height: 80vh; max-width: 90vw; overflow: auto; box-sizing: border-box; }

Other checks to avoid surprises: ensure a proper DOCTYPE (no quirks mode), place style/script tags in the document head as recommended, do not quote numeric values in CSS, and confirm style.php is served with the text/css Content-Type header if you keep a PHP stylesheet. Quick checklist: set ancestor heights or switch to absolute/flexbox, add overflow:auto to the scrollable element (only after its height is resolvable), and validate the CSS to catch small syntax issues that trigger browser inconsistencies.

Recommended Answers

All 4 Replies

Member Avatar for DaveSW

style and script tags should be in the head section of your document.
Clear up your validation errors and it should start working in more browsers.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.nugit.co.uk%2F%3Fdirr%3D1Home%252F1Products%252F1DVD%2BPlayers%252F2Portable

Stylesheets should have a .css extension.
<link rel="stylesheet" type="text/css" href="style.php">
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.nugit.co.uk%2F%3Fdirr%3D1Home%252F1Products%252F1DVD%2BPlayers%252F2Portable

Member Avatar for hajamie

I like having a php style sheet, works in firefox and ie... i could tell the server to parse css files, but it's not my server. Cheers for the help:)

Member Avatar for DaveSW

Your 100%s and your entire font families should not be in quotes.

width: 100%;
not
width: "100%";

That was the only error flagged on the css sheet. The three warnings are there I think because you have all your fonts in one quotation. You can have them individually in quotes, but not the whole lot. You don't usually need them tho.

Member Avatar for hajamie

ahhh! nice one, thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.