[ale] learning CSS

Geoffrey esoteric at 3times25.net
Sun May 21 14:50:35 EDT 2006


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;
}

-- 
Until later, Geoffrey

Any society that would give up a little liberty to gain a little
security will deserve neither and lose both.  - Benjamin Franklin



More information about the Ale mailing list