Which forum should this question be posted in?

Anyway, thanks for your suggestion, but "float:right" as opposed to "position:absolute" throws the right links out of the box entirely - didn't solve the problem.

I've read the brainjar website before, but I can't seem to fix this particular problem.

Appreciate the help. Let me know if you have any other thoughts.

Thanks,

-jca

just strolled in and looked at your site in IE 5.1 in OS X and i don't see what you're talking about. i'm assuming you fixed it?

Making the move from Grey Matter to Moveable Type, and [gasp] from HTML tables to an all CSS layout.

Having a problem with my content overflowing out of the boundries of box I'm using to border the entire page of the blog.

You can see an example (assuming your browser reproduces the problem I see in Mac IE 5.1 OS X) here:

CSS Layout Problem Example

The ARCHIVE BY MONTH right menu flows outside the two CSS boxes that create the black/grey border of the page. What am I missing in CSS? (I'm pretty green when it comes to CSS and HTML in general, for that matter. I've been looking at all the reference sites, and the various style sheets of other MT sites, but can't seem to solve this problem.)

Can anyone offer any help/info?

Thanks!

-jca

Wrong forum

I'm no expert, but I'm pretty sure you need to use float:right instead of position:absolute. Check out this tutorial here on css positioning:
http://www.brainjar.com/css/positioning/default.asp

Also, it's probably a good idea to use shorthand (and grouping) for font definitions, margins and padding etc. Makes life easier.

HTH!

Ugh... I didn't read the description for the Stylesheet forum, so I guess this is the right one... sorry, my bad

Anyway I had a look at your code and the following changes seemed to fix it:





added the stuff from #box to this, because it wasn't appearing properly without it when I changed stuff below... may have need the width stuff... *shrug*



Added float:left (without it the links were getting pushed out when they were floated right)



Added float:right, and commented out the other redundent stuff, which I think you can delete.

So now the links appear in place, but the logo has disappeared so...



Changed position to relative, which is redundent I think (it defaults to relative) and commented out the other stuff. Added 30px padding to give it some space above it.

This is about right now, but the links seem to be aligned right (touching the RHS of the box) - personally, I like them there, they align nicely with the pic and look good with the underline touching the side, but nevertheless adding the following will center it (more or less)



Just added 20px padding.

So that seems to work, in IE6 at least

edit: preview before posting :/

Still can't find a solution and it's driving me crazy... Maybe I should repost this in another forum? Is that bad form or too off topic in say, Stylesheet Issues? :) Would that be bad form Ben?

-jca

Yeah, wasn't able to solve the problem. Several nice people over at the css-discuss mailing list helped out, but CSS is such a bear when it comes to cross platform/browser issues.

So I rebuilt the site uses [gasp] tables. It's okay, but still a bit quirky and not quite what I wanted. I'm disappointed that I couldn't make the all CSS version work - it's important because websites are moving in that direction.

-jca

No worries jca, too bad you weren't about to fix it.

But don't worry, tables will be around for a long time yet. I got a kick out of zeldman's daily report today:





Did you get what I was saying about floats and relative positioning vs absolute positing before tho?

Well, I'm sure it has to do with using "position:absolute" for things like "#links", but I can't seem to remove the problem.

Anyone?... Anyone?... Bueller?... Bueller?...

-jca

No problem. Doesn't seem like this particular forum gets much traffic anyway. Just glad you were here.

First of all, I wanted to say:

I really appreciate all the trouble you went to looking at my CSS and making changes to it.

Certainly above and beyond the call of duty. Thank you so much.

I think I probably tweaked the CSS further before I read your post, so my CSS wasn't exactly the same as before. Regardless, I tried the changes you made, and they didn't fare to well in IE 5.1 on the Mac. (I tested it in IE 5 in Win, a bit better, but a few problems.)

I went in and (fixed?) the Win IE 5.0 bug with that ugly hack going around at the various CSS-centric sites. (Something about IE 5.0 getting box widths wrong.)

Anyway, the other problem I addressed was the "#link"s breaking the box border on the right in Win IE 5.0. Seemed to have gotten that one fixed to.

But I still have the remaining (original) problem of the right menu/content/links flowing out of the two boxes I'm using to create the border. This problem isn't evident on the main page, only when the right side menu is longer than the left side content - as in the original archive link I posted in the first message in this topic.

Back to the drawing board, I guess... I really don't want to give in and do tables.

Thanks again for all your hard work, Luke.

Take care,

-jca

Yes, I understand what you said, in theory, Luke. However, I've gotten different directions from different people on this.

Thanks for your help/advice; much appreciated.

Clearly CSS involves it's own set of voodoo that people are less used to dealing with, then say, tables.

The whole thing (as I say on my blog) reminds me why I'm a movie poster (print! yea print!) as oppsed to a web designer.

-jca