Well, you say, of course it is! Yeah, yeah, hear me out.
My aim here is to achieve the effect of a sheet of paper (with a shadow) hovering above my site design, poised a bit below the top edge and extending a bit below the bottom edge. I have actually done rather well with it, achieving precisely what I want in Firefox. The problem is that in IE the "paper" pushes the bottom edge of the container down so that it "grows" well below the bottom edge of the "paper."
The "paper" needs, I believe, to be contained within the main site container because of positioning. The main site is not the full width of the screen. I suspect the "tip" to get IE to let the div "sipll out" of its container div is pretty simple, I just haven't been able to find it.Don't set a height for the containerUnfortunately, instead of solving the problem for IE, it created the same problem for Firefox. I had defined a height for the container so I took it off, and now both browsers are pushing the bottom of the container down.got a link and some code to look at?Sure, why not. I put the page itself here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/eight/conform.html">http://www.sonora-sw.com/eight/conform.html</a><!-- m -->) and the css pages are here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/eight/bassmain.css">http://www.sonora-sw.com/eight/bassmain.css</a><!-- m -->), here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/eight/fontycolor.css">http://www.sonora-sw.com/eight/fontycolor.css</a><!-- m -->) and here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/eight/floating.css">http://www.sonora-sw.com/eight/floating.css</a><!-- m -->). The three supporting pages has to do with this being one of many pages in a largse site, and I like to keep my css defs grouped by category for easier maintenence.
Anyway, if you load the page with Firefox you'll see what I want to achieve, and with IE you'll see what the problem is.Bump. Nobody has a solution for this one?Ahhh... I get what you're trying to do. You're running into an Internet Explorer CSS bug that expands elements to fit their contents. Since your "page" is positioned relatively, it still exists on the same layer as the rest of your page, causing IE/Win to expand the container. Firefox is correct. What you'll want to do is position the whole "page" absolutely so it's taken out of the document flow and placed into its own layer -- and you may only have to do that with IE/Win. But try the absolute positioning approach with all browsers.I get what you are saying, but could use a hint on how to do it. The main page is defined with a width of 760px and is centered in the screen. That, to the best of my knowledge, requires relative positioning, since there is no way of knowing how wide the screen is. So how do I go about positioning the "floater" absolutely?
Or, let me put it this way. Of course there is a way to know the screen width. But is there an easier way than using javascript to get the screen width and calculating the horizontal position from that?Using absolute positioning it is possible to set the left edge to a percentage as well as the width. So, let's say you wanted the papers width to be %75 of the total screen width, and the left edge to start 15% of the screen over (an offset of 15% of the total width) set:
.someclass{position: absolute; width: 75%; left: 15%;}
Is that something along the lines of achieving what you are looking for?Unfortunately, my form is a fixed width. I guess I could center the elements within a variable-width form, but since I am designing for 800 x 600 screen, that could wind up with some really wide margins on the form. I think I need to go for the javascript. It's not that big a deal and it is a solution.
Thanks, all who have helped, for the input. Especially toicontien, I didn't know that thing about the layers.Well I can tell you that IE will expand a container to fit the content, even if you set a definite size for the container. Opera and FF will not. The content will be allowed to overflow the container.I get what you are saying, but could use a hint on how to do it. The main page is defined with a width of 760px and is centered in the screen. That, to the best of my knowledge, requires relative positioning, since there is no way of knowing how wide the screen is. So how do I go about positioning the "floater" absolutely?
Negative margins. Here's how.
#yourPageDIV {
left: 50%;
margin-left: -380px; /* 50% of #yourPageDIV width */
position: absolute;
width: 760px;
}
One thing to note, the "page" would be positioned according to it's closest relatively positioned containing element. If no element is relatively positioned, the "page" will be positioned according to the viewport. Something else of note: Quick Positioning Explanation (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&postid=294184#post294184">http://www.webdeveloper.com/forum/showt ... post294184</a><!-- m -->) if you have a questions.Perfect: solved my immediate problem, and taught me something for future reference. It doesn't get any better than that. Thank you.No problem. Anytime.
My aim here is to achieve the effect of a sheet of paper (with a shadow) hovering above my site design, poised a bit below the top edge and extending a bit below the bottom edge. I have actually done rather well with it, achieving precisely what I want in Firefox. The problem is that in IE the "paper" pushes the bottom edge of the container down so that it "grows" well below the bottom edge of the "paper."
The "paper" needs, I believe, to be contained within the main site container because of positioning. The main site is not the full width of the screen. I suspect the "tip" to get IE to let the div "sipll out" of its container div is pretty simple, I just haven't been able to find it.Don't set a height for the containerUnfortunately, instead of solving the problem for IE, it created the same problem for Firefox. I had defined a height for the container so I took it off, and now both browsers are pushing the bottom of the container down.got a link and some code to look at?Sure, why not. I put the page itself here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/eight/conform.html">http://www.sonora-sw.com/eight/conform.html</a><!-- m -->) and the css pages are here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/eight/bassmain.css">http://www.sonora-sw.com/eight/bassmain.css</a><!-- m -->), here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/eight/fontycolor.css">http://www.sonora-sw.com/eight/fontycolor.css</a><!-- m -->) and here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/eight/floating.css">http://www.sonora-sw.com/eight/floating.css</a><!-- m -->). The three supporting pages has to do with this being one of many pages in a largse site, and I like to keep my css defs grouped by category for easier maintenence.
Anyway, if you load the page with Firefox you'll see what I want to achieve, and with IE you'll see what the problem is.Bump. Nobody has a solution for this one?Ahhh... I get what you're trying to do. You're running into an Internet Explorer CSS bug that expands elements to fit their contents. Since your "page" is positioned relatively, it still exists on the same layer as the rest of your page, causing IE/Win to expand the container. Firefox is correct. What you'll want to do is position the whole "page" absolutely so it's taken out of the document flow and placed into its own layer -- and you may only have to do that with IE/Win. But try the absolute positioning approach with all browsers.I get what you are saying, but could use a hint on how to do it. The main page is defined with a width of 760px and is centered in the screen. That, to the best of my knowledge, requires relative positioning, since there is no way of knowing how wide the screen is. So how do I go about positioning the "floater" absolutely?
Or, let me put it this way. Of course there is a way to know the screen width. But is there an easier way than using javascript to get the screen width and calculating the horizontal position from that?Using absolute positioning it is possible to set the left edge to a percentage as well as the width. So, let's say you wanted the papers width to be %75 of the total screen width, and the left edge to start 15% of the screen over (an offset of 15% of the total width) set:
.someclass{position: absolute; width: 75%; left: 15%;}
Is that something along the lines of achieving what you are looking for?Unfortunately, my form is a fixed width. I guess I could center the elements within a variable-width form, but since I am designing for 800 x 600 screen, that could wind up with some really wide margins on the form. I think I need to go for the javascript. It's not that big a deal and it is a solution.
Thanks, all who have helped, for the input. Especially toicontien, I didn't know that thing about the layers.Well I can tell you that IE will expand a container to fit the content, even if you set a definite size for the container. Opera and FF will not. The content will be allowed to overflow the container.I get what you are saying, but could use a hint on how to do it. The main page is defined with a width of 760px and is centered in the screen. That, to the best of my knowledge, requires relative positioning, since there is no way of knowing how wide the screen is. So how do I go about positioning the "floater" absolutely?
Negative margins. Here's how.
#yourPageDIV {
left: 50%;
margin-left: -380px; /* 50% of #yourPageDIV width */
position: absolute;
width: 760px;
}
One thing to note, the "page" would be positioned according to it's closest relatively positioned containing element. If no element is relatively positioned, the "page" will be positioned according to the viewport. Something else of note: Quick Positioning Explanation (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&postid=294184#post294184">http://www.webdeveloper.com/forum/showt ... post294184</a><!-- m -->) if you have a questions.Perfect: solved my immediate problem, and taught me something for future reference. It doesn't get any better than that. Thank you.No problem. Anytime.