[ale] learning CSS

[William Witt]

This is what I've come up with for my content pane:

div.contentpane {
            background-color: #ffffcc;
            position: absolute;
            top: 75px;
            height: expression(document.body.clientHeight - 75 + "px");
            bottom: 0;
            left: 100px;
            width: expression(document.body.clientWidth - 100 + "px");
            right: 0px;
            overflow: auto;
            padding-left: 75px;
            padding-right: 50px;
            padding-top: 50px;
            padding-bottom: 75px;     
}

Firefox ignores the expression lines and IE ignores the bottom and right 
lines, so it all comes out in the wash.

Will

Geoffrey wrote:
> So I'm trying to learn how to code css that works for multiple browsers. 
>    I'm getting a very large headache with trying to make this work with IE.
>
> For example, a page that has a fixed banner image, followed by a fixed 
> navigation area below the logo, to the left and scolling content to the 
> right of the navigation.  Used to be, I'd do that with a combination of 
> frames and/or tables.
>
> So, I've got css that builds this page nicely in Mozilla, Firefox and 
> Opera, although Opera required a little extra work.  I can't figure it 
> out for IE.
>
> Basically, even though the css sets the content margin-top such that it 
> will start below the logo image, IE has it start below the navigation 
> area.  I can't for the life of me figure out how to get the content to 
> be properly displayed next to the navigation and below the logo.  Now I 
> could have taken a completely wrong approach to this, so criticism is 
> expected. Suggestions would be appreciated even more so. Here's some of 
> the css to give you an idea how I've approached this:
>
> #logo {
>      vertical-align: top;
>      position: fixed; top: 0px; left: 0px;
>      background: white;
>      top: 0;
>      margin: 0;
>      padding: 0;
> }
> #nav {
>      color: yellow;
>      background: green;
>      width: 150px;
>      height: 100%;
>      position: fixed; left: 0px; top: 120px;
>      margin-top: 0px;
>      padding: 0;
> }
>
> #content {
>      margin-top: 120px;
>      margin-left: 180px;
>      width: 500px;
>      padding: 0;
> }
>
>