PDA

View Full Version : Can't convert frames to CSS



Rilien
Mar 9th, 2010, 07:47 PM
The layout is very, very simple. (This forum deletes the spaces that would make this a rectangle.)

-----------------------------------------------------------------
| |
| This menu area is fixed and does not scroll up off the page |
| - NO SCROLL BARS - |
|---------------------------------------------------------------|
| |
| | ------------------------------------------------------| |
| | | |
| | | |
| | This area, with padding on the left and right, | |
| | has a scroll bar on it's right side (not all | |
| | the way to the right side of the page), and is | |
| | attached to the bottom of the browser window - | |
| | when the bottom of the browser is resized up, | |
| | this windows shrinks, and scroll bars DO NOT | |
| | appear on the far right side of the page. | |
| | ------------------------------------------------------| |
|---------------------------------------------------------------|

The code that implements the above with frames works in IE7, IE8 and Firefox 3.6, with no browser dependent code. The frames code pulls in two .html pages to fill the two "windows" above. Simple. Terrible for Google.

I changed the code to use CSS, and include the two .html pages with server side includes. I modified the included pages so there is only one <body>, and to fix the colors that got broken when I did that.

Here is an example of code that doesn't work. I've tried many variations. I'm running the Apache server locally to pull in the SSI's.




<html>
<body>

<div style="float: top; position: fixed; width: 95%; height: 140; border-style: solid">
<!--#include virtual="/somefile.html" -->
</div>

<div style="overflow: auto; top: 100; width: 900; height: 500; background-color:white; color:black; text-decoration:none">
<!--#include virtual="/someotherfile.html" -->
</div>

</body>
</html>



What the example above does in Firefox: The bottom scrolling window is at the top of the page (no margin). (Very wrong.) When the bottom of the browser window is moved up (making the browser window smaller) a scroll bar appears on the right side of the page. (Wrong.)
What the example above does in IE 8: The bottom scrolling window sits properly below the top menu window, but there is a scroll bar for the whole screen on the right side, and you have to use both scroll bars to get to the bottom of the text. (This is the only example I tried in IE 8, as I've spent all my time trying to get it to work in Firefox.)

Rilien
Mar 9th, 2010, 08:42 PM
This problem was resolved on the other forum I posted it on.

http://stackoverflow.com/questions/2411493/cant-convert-frames-to-css-help-needed

Thanks