Question about HTML markup and cross-browser compatibility?

O

Ogoun Er2012-03-09 12:59:56

HTML

Ogoun Er, 2012-03-09 12:59:56

The following layout is needed:

Where the left and right columns should not exceed the height of the page. Those. the page itself should not scroll, only the content in the columns scrolls. I solved it with the following styles:

<style>
        body
        {
            position: absolute;
            margin: 0;
            padding: 80px 0 0 0;
            right: 0;
            top: 0;
            left: 0;
            bottom: 0;
            display: block;
        }

        #area
        {
            width: 100%;
            height: 98%;
        }

        #header
        {
            position: absolute;
            width: 100%;
            height: 75px;
            top: 0px;
        }

        #left
        {
            position: relative;
            display: block;
            overflow: scroll;
            height: 100%;
        }

        #right
        {
            min-width: 400px;
            position: relative;
            display: block;
            overflow: scroll;
            height: 100%;
        }
    </style>

Which I use for this HTML:

<body>
    <div id="header">
        <h1>Заголовок</h1>
    </div>
    <table id="area" border="1">
        <tr>
            <td style="height: 100%; width: 40%;">
                <div id="left">
                </div>
            </td>
            <td style="height: 100%;">
                <div id="right">
                </div>
            </td>
        </tr>
    </table>
</body>

Works fine in IE, Chrome, Opera and Safari, and doesn't work at all in Firefox.
Can anyone suggest a reason?
I myself am far from layout and HTML, and I don’t know, maybe there are simpler ways to solve such a problem?
Solutions with HTML5 and css-expressions are not good. You need simple HTML and CSS.

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

S

Silver_Clash, 2012-03-09
@Silver_Clash

The problem is that you have mixed sizes in absolute and relative terms. It's better to use one.
If you specify the dimensions in relative terms, then you must CLEARLY specify the height / width (I understand that the main problem you have is with the height) for all parent elements starting from body. At the same time, do not forget to also register tbody in the table and specify the dimensions for it too. That is, all elements must be specified height=100%; (well, or how much your layout requires).
If at least one parent element does not have a size explicitly specified, what will FF consider height/width = auto (stretch to content) for such an element. Accordingly, for all child elements it will already be useless to indicate 100%, because 100% of auto = auto.
The second option is to specify the dimensions in absolute terms, but at the same time it will not be possible to adjust the content to the page height without crutches. As crutches, you can use js to calculate the dimensions on the client and change them if necessary.

M

Mikhail Krainov, 2012-03-09
@medved13

Since you decide to use position: absolute, try this: cssdesk.com/JeHff

E

egorinsk, 2012-03-10
@egorinsk

Tried to add then html { position: relative; height: 100%; }? For example, read this: www.w3.org/TR/CSS2/visuren.html#positioning-scheme - apparently your body is torn out of the stream and html has a height of 0.
And, about "works in IE" - you got excited, in The 6th IE will definitely not work, and maybe in the 7th.