[Resolved] CSS2 Question [Archive]

Kudose

06-28-2005, 01:37 AM

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

:D

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">

</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:

-----------------------------------------
| adbar |
| |
-----------------------------------------
|menu | |
-----------------------------------------
|Main content |
-----------------------------------------

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

06-28-2005, 04:05 AM

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 (http://www.w3.org/TR/CSS21/visuren.html#fixed-positioning):
<!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

06-28-2005, 04:19 AM

: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

06-28-2005, 05:09 AM

The power of tables is greater :evilgrin:

planetsim

06-28-2005, 06:14 AM

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 :)

http://www.johnconde.net/spf/images/ieweglovefx.gif
(img stolen from SP post which i think was stolen else where)

Weedpacket

06-28-2005, 07:02 AM

Originally posted by planetsim
http://www.johnconde.net/spf/images/ieweglovefx.gif
(img stolen from SP post which i think was stolen else where) Just stolen again. :D

Post Scriptum: Found this (http://www.howtocreate.co.uk/fixedPosition.html) and then this (http://tagsoup.com/-dev/null-/css/fixed/). 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

06-28-2005, 07:09 AM

Originally posted by NetNerd85
The power of tables is greater :evilgrin: Wot, you can do scrolling table cells?

planetsim

06-28-2005, 07:34 AM

Originally posted by Weedpacket
Just stolen again. :D

Post Scriptum: Found this (http://www.howtocreate.co.uk/fixedPosition.html) and then this (http://tagsoup.com/-dev/null-/css/fixed/). 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

06-28-2005, 08:19 AM

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

You can, but not in IE :D

Kudose

06-28-2005, 09:35 AM

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

06-28-2005, 02:15 PM

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

They are called MICROSOFT IE INLINE FRAMES :p

Weedpacket

06-29-2005, 03:44 AM

Originally posted by NetNerd85
They are called MICROSOFT IE INLINE FRAMES :p What are they? Anything like iframes (http://www.w3.org/TR/html4/present/frames.html#edef-IFRAME)?

Jason Batten

06-29-2005, 04:47 AM

So how do you make a cell scroll? :confused: