Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 2031

Jun 13th, 2007

CSS positioning problems

Expand Post »

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

Last edited by metrov; Jun 13th, 2007 at 2:20 pm.

Similar Threads

CSS Positioning & Width/Height Issue in HTML and CSS
opera problems with hover menu in JavaScript / DHTML / AJAX
Css ? in HTML and CSS
starting with CSS ! in HTML and CSS

metrov

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

4 posts
since Jun 2007

Permalink

Jun 13th, 2007

Re: CSS positioning problems

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.

¤| battousai |¤

Reputation Points: 17

Solved Threads: 1

Light Poster

Offline

37 posts
since Sep 2006

Permalink

Jun 13th, 2007

Re: CSS positioning problems

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

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

4 posts
since Jun 2007

Permalink

Jun 13th, 2007

Re: CSS positioning problems

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

metrov

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

4 posts
since Jun 2007

Permalink

Jun 14th, 2007

Re: CSS positioning problems

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.

Last edited by MidiMagic; Jun 14th, 2007 at 4:51 pm.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Jun 14th, 2007

Re: CSS positioning problems

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.

metrov

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

4 posts
since Jun 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Bold

Next Thread in HTML and CSS Forum Timeline: Opening Blank Page from within Pop-up

DaniWeb Message

Cancel Changes

User Name
Password