CSS positioning problems

[metrov]

Hi,

I'm trying to resolve a positioning problem.

1 -- I need to position a small table that contains sidebar menu links.

2 -- I first tried positioning the table the old fashioned way, by nesting it in the left side column [cell] of the main table.

3 -- This works fine in FF, but in IE it shows up in different positions on different pages -- and for no explicable reason, I might add.

4 -- Then I tried using CSS to position the menu table, and wahlah! It worked perfectly, or so I thought.

5 -- An associate pointed out that the table moves to the LEFT at higher screen resolution.

6 -- Being new to CSS, I discovered that I was using 'absolute' positioning.

7 -- So I then tried 'relative' positioning, 'fixed' positioning, and finally 'float' positioning. I got the table to stay in place regardless of screen resolution, but for some reason [again inexplicable], the table shows up in different places on different pages, and I cannot see any difference in the HTML code.

I was having the most success with 'float' positioning, but still, the table shows up at different heights on different pages???

Can someone please recommend the best type of CSS positioning to use to make sure a table stays in the same spot despite the screen resolution?

Any other tips welcome.

Thanks very much

[¤| battousai |¤]

The reason for your floating tables to show different on every page is probably due to the fact that float in some way works a bit the same as position: relative and top: 0. So if there is something sitting in it's way - someting for it to base it's positioning on - than that's probably the reason why it's shifting around the pages.

Float is meant to be used together with divisions in the first place, and this is more predictable. I don't know if it's whise to use float on tables, but I wouldn't recommend it.

If you are new to css, you should consider to learn about divisions and tableless layout, as they are more flexible and powerfull than tables and allow for cleaner html code.

As for the positioning problem, I can't give you any advice there, but I think it's best not to use any css positioning on tables, as they don't work together well.

I hope someone who has more experience with tables can help you with this, but I'd personally like to recommend agains using them.

[metrov]

Hi, thanks for your response.

My table is within 'div' tags.

Maybe I'll try without the 'table'

I am new to CSS positioning, so at this point, I'm doing a lot of experimenting.

Thanks

[metrov]

I've eliminated the 'table' from my div tags, and now just display the links in a cell [I found I have to use the cell because I need my text aligned left, and couldn't see another way to do it. But maybe there is?]

Anyway, I have discovered that, using 'float' positioning, I still have a problem with where the TOP of the links end up. I'm talking about a side bar links similar to what you see on the right of this forum website page [see, to the right -- here on this page]

The TOP of the sidebar links change according to the overall page size. So the longer the page, the more the links drop down out of position.

Does this trigger any ideas for a solution?

Thanks

[MidiMagic]

Here's the real cause of the problem:

Mozilla browsers consider any margins, borders, and padding to be OUTSIDE the declared dimensions and positions of a box object. This includes floats.

IE consider any margins, borders, and padding to be INSIDE the declared dimensions and positions of a box object. This includes floats.

So you have to design your page in such a way that this discrepancy doesn't matter. The trick is to nest some stuff.

On the outside, place a div with a style class with "none" for the margin, border, and padding, and positioned and sized how you want it. If a containing table is used outside the object, this can be a td with a similar class instead of a div.

Inside that, place a div with the margin, border, and padding you want in a style class.

Inside that, place your content table or div, again with a style class with "none" for the margins, border, and padding.

You can use the style text-align: left; to left-justify the text.

[metrov]

Thanks very much for the tips.

I finally resolved my issue by learning what 'relative' actually means. I had to reposition my menu items so they were all in the same cell in the various pages, and that fixed the height discrepancy.