I’ve been working on my website lately. Along the way I had to recreate my style sheet. No, I didn’t have a backup when I blew it out. Don’t ask.
Anyway, I find that I can no longer get a margin-bottom to appear beneath my pages’ main <DIV>. I would swear this used to be working. I can’t figure out what the hell is wrong. I’ve used w3.org’s validators, and they tell me nothing. The problem is browser-independent, as far as I can tell.
Here’s a good example of what I’m talking about. There should be 18 pixels of black beneath the big white box. But nooooo. Here’s my style sheet.
Any advice? Avenues of inquiry? Is this something I shouldn’t expect to work anyway? I’m starting to go nuts.
The margin bottom is there, it’s just when the text exceeds the browser’s screen height, the bottom margin will not display. Remove about 2/3 of the text in the main section to see it. Looks like a bug to me.
I’m not so sure. The desired effect here is that the margin should appear even when the content exceeds one screen in height. The style sheet should be forcing the bottom margin into existence. If you scroll down to the bottom of the page, the last thing to scroll up should be 18 pixels of black space.
This is possible, isn’t it? Or am I making things up?
I believe your problem is that you’ve specificed position: absolute for the #content div. While I understand why you did this, it takes the block out of the normal flow, and the containing block, in this case the body, doesn’t have to contain it. I haven’t figured out a solution, yet, but that might help a little.
For IE6 there is a bug in that when placing a <P> inside a <DIV>, the <DIV> “reverse inherits” the margin-bottom of the paragraph.
I’m really not up to scratch with the amount of abolute positioning that you have going on here (I still use the tables method).
You may want to seriously look at the various use of external styles, inline styles, styles declared in your <p> and <div> tags.
It looks (no proof) like some of your margin-bottom properties are being inherited somewhere along the way which is causing a less than desirable result.
Maybe you should work through each style removing the bottom-margin until you can see if there is one causing grief to another.
I’ve found a way to make it look right on Netscape and IE without abandoning absolute positioning. It involves nested divs, so instead of this:
<div id=content>
…
</div>
you have this:
<div id=con><div id=tent>
…
</div></div>
Then you place the positioning style on the outer (“con”) div, and the margin style on the inner (“tent”) div. It introduces a problem or two, however, and I haven’t worked it out yet. But you may not like this “solution” at all.
Huh. Okay, Caught’s approach seems like the way to go in terms of tracking down the source of the error. I’ll build the stylesheet from the ground up and see what ‘breaks’ the margin. Achernar’s approach sounds interesting, but…can you use a nested <div> to ‘inherit up’ attributes like that? Or maybe I’m misunderstanding. What the hell, I’ll try anything at this point. I’ll let you know what happens. Anyone with ideas still to offer is still encouraged to shout 'em out.
Thanks to everybody who has devoted any processing cycles to this whatsoever. I am deeply grateful. As I said, this problem has been making me nutso.
I tried removing position:absolute and it didn’t do diddley. I tried adding a table around the whole thing and it didn’t do diddlely. I tried just sticking an img on the bottom, but the margins made it untenable. I tried lots of marginheight and marginwidth in every parameter. Arr. I freely admit I am not one who prefers using solely stylesheets for complex page positioning. I could do this in a new york minute with tables, but working with the existing stylesheets is tough. However, GrandfatherTrout, since you are working with stylesheets I think completely redoing all-stylesheet pages to “older” table-oriented pages would be less than welcome, no?
Hmm, you’re right. It fixes it in Netscape but not IE.
Let me just show you what I had in mind. In addition to the HTML I replaced, making one div into two, I changed this bit of CSS:
#content {
position: absolute;
top: 18px;
left: 259px;
min-height: 450px;
margin-right: 18px;
margin-bottom: 18px;
padding-left: 36px;
padding-right: 18px;
padding-bottom: 18px;
background-image: url(/images/stripe.gif);
background-repeat: repeat-y;
background-color: white;
}
to this:
#con {
position: absolute;
top: 18px;
left: 259px;
min-height: 450px;
vertical-align: top;
}
#tent {
padding: 0 18px 18px 36px;
margin: 0 18px 18px 0;
background: white url(images/stripe.gif) repeat-y;
}
Here’s the result. As you can see, the bottom is closer to what you wanted, but there’s a problem at the top. This problem goes away if in Netscape if you specify anything other than 0 for the padding-top property of #tent, but it’s still bad in IE. I’m not sure why yet.
Okay, I finally got something that works, although I don’t know why it works and what’s originally there doesn’t. Here’s the relevant code, with the parts I changed bolded:
**#con {**
position: absolute;
top: 18px;
left: 259px;
min-height: 450px;
}
**#tent {**
padding: **36px** 18px 18px 36px;
margin: 0 18px 18px 0;
background: white url(images/stripe.gif) repeat-y;
}
.AHead {
display: block;
padding-left: 72px;
margin-right: 18px;
** margin-top: 0px;**
margin-bottom: 18px;
background-color: rgb(102,9,51) ;
}
[ HTML | CSS ]
I also had to change a couple of URI’s into relative URI’s, but all I did was delete the / at the front. I’m sure you can figure that out.
Hey, looky that! It works! Achernar, you are the bomb. Next time I see you at a Doper-related gathering, please allow me to provide you with a libation of your choice.
I wonder why you can’t give a div an absolute position and a margin at the same time. Having to use a double-div goes against the elegance that CSS should be about, but who cares? It works! Why does it work? What’s actually happening here? No idea, but who cares? It works! I’ll set to implementing it directly.
And yes, Gaudere, this would have been much easier with tables, but tables couldn’t support some of the things I wanted to do. Plus it would have been like backing down from the intellectual challenge I’d set for myselfto use CSS and only CSS wherever possibleand the idea of doing so just galled me. I knew that CSS could do what I wanted…so I had to figure out how to make that happen. Even now, having to use a double-div trick that makes no logical sense to me is annoying, but what the hell. I’ll take it.
Thanks again, folks.