Forum Moderators: not2easy
Page: <snip>
This is the css layout code:
* html {overflow:hidden;}
body {background:url(images/middle.gif); background-position: 173px 82px; background-repeat:no-repeat; background-attachment:fixed; margin:0; padding:0px 10px 0px 10px; border:0;
color: #000000;
background-color: #FFFFFF;
font-family: palatino linotype, palatino, times new roman, serif;
}
body {height:100%; overflow-y:scroll}
#top {position:fixed; display:block; top:0; right:0; left:0em; width:100%; height:50px; background:#FFFFFF; overflow:hidden; z-index:12;}
* html #top {position:absolute;}
#topmiddle {
background:url(images/top.gif); background-repeat:no-repeat; position:fixed; display:block; top:20px; right:0; left:20px; width:900px; height:135px; background-color:transparent; z-index:20;
padding: 0em;
text-align:left;
vertical-align:middle
}
* html #topmiddle {position:absolute;}
#midleft {
position:fixed; display:block; top:217px; right:0; left:20px; width:153px; height:313px; background-color:#333333; z-index:20;
font-family : Arial, Helvetica, sans-serif, Verdana;
padding: 0em;
text-align:left;
vertical-align:top
}
* html #midleft {position:absolute;}
#middle {
float:left; display:block; padding-left:180px; margin:160px 0px 0px 0px; width:60%; background:transparent; overflow:hidden; z-index:10;
text-align:left;
vertical-align:top
}
.text {display:block; padding:0 1em 0em 0; width:95%; text-align:justify; float:left;}
.textcol {display:block; padding:0 1em 0em 0; width:46%; text-align:justify; float:left;}
.textcol {width/* */:/**/46%;
width: /**/46%;}
.textcolb {display:block; padding:0 .5em 0em 0; width:30%; text-align:justify; float:left;}
.textcolb {width/* */:/**/30%;
width: /**/30%;}
#midright {
background:url(images/right.gif); background-repeat:no-repeat; position:fixed; display:block; top:155px; right:0; left:720px; width:200px; height:377px; background-color:transparent; z-index:20;
text-align:center;
vertical-align:middle
}
* html #midright {position:absolute;}
#botmiddle {
position:fixed; display:block; top:532px; right:0; left:20px; width:95%; height:100%; background:#FFFFFF; overflow:hidden; z-index:12;
font-family : Arial, Helvetica, sans-serif, Verdana;
padding-top:.5em;
text-align:left;
vertical-align:top}
* html #botmiddle {position:absolute;}
Iīve been seeking a solution for a long time. I tried changing body overflow-y:scroll to overflow:auto, but still get a blank page in mac IE, and loose scroll effect in other browsers like Opera and Mozilla. Getting upset :-(
I made an alternative design: <snip>
this time using overflow:auto in a div, not in the body, and it works (almost) fine in mac IE. I noticed mac IE does not take the z-index: but it just shows the divs in the same order they are written. Again :(
Please, does anybody know:
1-Why divs donīt show in macIE in the first design? what is wrong in the css?
2-Is there an alternative to z-index for macIE, to tell the browser which div goes on top?
Please, help me. This is driving me nuts!#!
Iīve tested other css frame-like designs I found on internet, like: [stunicholls.myby.co.uk...] but they all fail in macIE, also blank page :(
[edited by: SuzyUK at 7:40 am (utc) on Aug. 31, 2004]
[edit reason] sorry no personal links per TOS #13 [WebmasterWorld.com] [/edit]
1. Overflow. That's a bug..
[macedition.com ]
2. Z-index. As far as I know, giving elements a z-index is supposed to only work for positioned divs, not in floats.
And note that according to the TOS you're not allowed to post personal URLs here.
An macedition says:
[codes]Finally, setting html, body { overflow: hidden; } will hide the entire page from IE5/Mac[/codes]
I found a lot of css frame examples, but only a few of them are compatible with IEmac... Here: www.fu2k.org/alex/css/frames I found great working examples, even the scrolling effect works on IEmac for some of them (and in the other browsers too, of course).
As for z-index, I find it strange that other browsers take the right z-index order, except for IEmac, but Iīll try using position: on the div
