Date: 07/11/07 (WebDesign)    Keywords: browser, css, html, web

EDIT: Okay, I'm slowly making headway, I forgot about floats and clears and all that fun stuff, and I managed to get the layout to work the way I want in IE7, but of course, as these things happen, the codes aren't working in Firefox. These two anamolies are what are happening in that browser:
1) When I make the entry div id float left, the background inherent in the pagebody div id that contains the entries and the sidebar disappears.
2) The background from pagebody won't repeat as the sidebar increases in size. The background WILL repeat, however, if the entries increase in size. I don't understand why it will for one and not the other when both are contained within the same tags.

It also seems that while the sidebar will now align vertically with the entries in IE7 it won't on Firefox.

Any help appreciated, the files to take a gander at are:
http://nolifeproductions.com/html/leaf/index.txt
http://nolifeproductions.com/html/leaf/leaf.css

(Also I realize the bugs more than likely come from the IE side of things, but IE is what I'm used to working in and generally I don't have such aggravating problems between browsers so I'm at a pretty good loss.)


-----------------------------------------------------------------------------------------------
Allrighty, so I'm making a journal layout, conceivably I want it to look like this:
http://nolifeproductions.com/html/leaf/
And it (seems) to be working fine as it is, but I was just wondering a couple of things about CSS. Everything in that layout essentially is positioned relatively, so it can float and recenter itself depending on a person's browser size. However, in that particular version of the layout the sidebar is positioned absolutely else it would look like this:
http://nolifeproductions.com/html/leaf/index2.html
The sidebar is shoved under the entries, which makes logical sense because it's floating relative to the position of the entry tags, however is there a way to have the sidebar remain relative in its position but have it look like it does in the version it's absolutely positioned?

And finally, one more question, concerning the version with the sidebar positioned absolutely, if the sidebar is longer than the entries, the background pattern I have repeating in the pagebody tag won't extend along with the sidebar, even though I have the sidebar contained within the pagebody. IE it looks like this. I assume it's because of the absolute position, but again I was wondering if there was a way to fix it that I'm just not figuring out.

I am trying to keep the CSS as simple as possible because I was making layouts with the common user in mind so they can easily implement it instead of having 20 pages of confusing codes, so if there are solutions to these problems that are simple I'd be very excited to use them. I wouldn't be surprised if the solutions are so simple I merely looked them over, which is so often the case, amirite.

Thanks for any help.
Oh and to make your life easier:
Here's the CSS for the position:absolute sidebar layout
and here's the CSS for the position:relative sidebar layout
It's a bit messy, I haven't streamlined it yet, sorry.

(Also, let me apologize if my "lingo" isn't the "official jive" of the webdeveloper world, and I hope that I'm making some sense. If you need me to clarify just ask.)

Source: http://community.livejournal.com/webdesign/1280341.html