[Resolved] CSS2 Question

Kudose

Not really anything to do with PHP, but I love this forum so much, I dont want to look for another one.

😃

Anywho, I am trying to migrate from tables and such into CSS2. I hear it's the way to go. So I am reading a tutorial found at http://www.richinstyle.com and I have already hit a snag.

I've got this very basic code:

<html>
<head>
  <style type="text/css">
    <!--
      #adbar {
        posistion:fixed;
        height:20%;
        border: 1px solid #000000;
      }
      #menu {
        posistion:fixed;
        width:20%;
        top:20%;
        border: 1px solid #FF0000;
      }
      #main {
        posistion:fixed;
        top:20%;
        left:20%;
        border: 1px solid #00FF00;
      }
    -->
  </style>
<body>
  <div id="adbar">Adbar</div>
  <div id="menu">Menu</div><div id="main">Main content</div>
</body>
</html>

That is supposed to output something like this:

___________________________
|  adbar                   |
|                          |
|__________________________|
| menu  |                  |
|       | main             |
|       |                  |
|       |                  |
|       |                  |
|       |                  |
|       |                  |
|_______|__________________|

But...I get something like this:

[CODE]

| adbar |

| |

|menu | |

|Main content |

[/CODE]

Could someone help me to understand why this is happening?

The direct link to the real example is here:

http://www.richinstyle.com/guides/positioning2.html#fixedexample

Thanks. 🙂

Weedpacket

Well, that's a pretty munted site. The typos in the example CSS code ("postion"?) were enought to make me leery.

Your code also has typos: "position" only has one s.

Here's an alternate example I ripped from the specification:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>A frame document with CSS 2.1</TITLE>
    <STYLE type="text/css" media="screen">
      BODY { height: 8.5in } /* Required for percentage heights below */
      #header {
        position: fixed;
        width: 100%;
        height: 15%;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        border: 1px solid black;
      }
      #sidebar {
        position: fixed;
        width: 10em;
        height: auto;
        top: 15%;
        right: auto;
        bottom: 100px;
        left: 0;
        border: 1px solid red;
      }
      #main {
        position: fixed;
        width: auto;
        height: auto;
        top: 15%;
        right: 0;
        bottom: 100px;
        left: 10em;
        border: 1px solid green;
      }
      #footer {
        position: fixed;
        width: 100%;
        height: 100px;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        border: 1px solid blue;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <DIV id="header"> Header  </DIV>
    <DIV id="sidebar"> Sidebar  </DIV>
    <DIV id="main"> Main  </DIV>
    <DIV id="footer"> Footer  </DIV>
  </BODY>
</HTML>

It works ... but not in IE, which wouldn't know what to do with "position:fixed;" if it was lying across the desk glazed in honey.

Kudose

:eek:

Looks beautiful.

Thank you very much. W3C prevails over tutorials once again.

<note> Nice crack on IE, it was a good laugh. I've already converted to FireFox and try to get everyone else to as well. </note>

Jason_Batten

The power of tables is greater :evilgrin:

planetsim

Originally posted by NetNerd85
The power of tables is greater :evilgrin:

You have some fixated obsession with tables dont you, not sure why your sites wouldnt be very search engine friendly.

Anyway i love this pic can we have it as an emoticon 🙂

(img stolen from SP post which i think was stolen else where)

Weedpacket

Originally posted by planetsim

(img stolen from SP post which i think was stolen else where)

Just stolen again. 😃

Post Scriptum: Found this and then this. Haven't tried either, wouldn't particularly care to, doubt I'd use it in real life 'cos I'd only have to revert again later.

Weedpacket

Originally posted by NetNerd85
The power of tables is greater :evilgrin:

Wot, you can do scrolling table cells?

planetsim

Originally posted by Weedpacket
Just stolen again. 😃

Post Scriptum: Found this and then this. Haven't tried either, wouldn't particularly care to, doubt I'd use it in real life 'cos I'd only have to revert again later.

no i prefer the term borrowed :p stolen sounds so criminal.

Anyway with IE 7 its a pitty as much as I dislike it they arent going to do anything significant changes where they should be i.e. CSS. Hopefully Moz/FF can eat more and more of the IE userbase so developers can just forget about IE, maybe just maybe then they will do something about it.

goldbug

Originally posted by Weedpacket
Wot, you can do scrolling table cells?

You can, but not in IE 😃

Kudose

Originally posted by planetsim
Anyway with IE 7 its a pitty as much as I dislike it they arent going to do anything significant changes where they should be i.e. CSS. Hopefully Moz/FF can eat more and more of the IE userbase so developers can just forget about IE, maybe just maybe then they will do something about it.

The only way FireFox can exceed IE is if the word is spread better and "basic browsers" get FireFox shoved in thier face. Basic users aren't going to download a new browser, they will just use the one Microsoft gives them because they dont know any better.

Luckily, FireFox has some strong supporters and some of them are even implementing scripts into thier websites so when a user with IE visits, the page let's them know about FireFox and how they are getting shafted on a browsing experience.

Jason_Batten

Originally posted by Weedpacket
Wot, you can do scrolling table cells?

They are called MICROSOFT IE INLINE FRAMES :p

Weedpacket

Originally posted by NetNerd85
They are called MICROSOFT IE INLINE FRAMES :p

What are they? Anything like iframes?

Jason_Batten

So how do you make a cell scroll? 😕