CSS + tables + FireFox = swedguy going nuts
 

I'm ripping my hair out!

What I want to achieve is the way IE calculates table width. If you don't set a width, it expands to the biggest item in the table.

I tried style="min-width:700px;max-width:100%" which worked perfectly in IE. But it's not the proper behavior for CSS2, since those doesn't apply to tables so it doesn't work in FF.

width="auto" doesn't seem to work either, except in IE.

Anyone got a clue?

I think this is what you looking for:

http://www.webmasterworld.com/forum83/5926.htm

crap, that link wont work if your not a member.

check your pm for code examples.


I didnt test the code, so Im not sure its what your looking for.

-

Awsome. I think I will be able to get something out of that. Thanks |thumb

I got it to work half way. Now I just have to center align the div without center aligning the text inside the div.

I give up!

It's simple to center a fixed div. But to center a div that changes with the content seems to be impossible.

This wont help you solve your problem, but it might help you figure out a solution.

http://users.bathspa.ac.uk/markhelp/...l_css_ref.html

The important parts are where it tells you how to install DOM inspector and Firefox's web developer tools.

Put a link of what you have so far, explain exactly what it is suppose to do and I will look at it tomorrow :)


-

Thanks for the link. I'll take a look at it tomorrow :)

http://www.nuvisiongroup.com/test.html

That's what I have so far.
The div that holds the text should be centered, but the text itself should be left aligned. I don't know how long the text lines are, so I don't want to set a fixed width on the div. If I could, it would be piece of cake to center it.

Tart took a look at it before too and she came to the same conclusion as me, it probably doesn't work unless you set a fixed width.

I think that I understand what you are trying to make happen. I can center the div with the text within the grey block in Firefox, but for whatever reason, it remains sucked to the left in IE. |angry| http://www.maladaptedmedia.com/swed.htm

I've toyed with it a bit, so don't just copy over your current code. I may have pulled something that you need. ;)

In order to make that text div center, display: inline; in #content needs to be changed to display: table; and
margin-left: auto;
margin-right: auto; needs to be added.

This will not play well with margin: 0; that is set in your body style. You'll have to change that to:
margin-left: 0;
margin-right: 1px;
in order to not get a horizontal scroll in Firefox. Note the right margin is 1. 0 gives the scroll.

I've added padding within the text div just pull the text off of the border.

This may help, or it may just add even more confusion. |dizzy|

NIIIICE!

One step closer to perfection. You da man |thumb

Or actually.... SHAME ON YOU! Now you got me hooked on this again ;)

Whew! This was a trick!

This works in IE6. I didnt test in other browsers.

Your div is now centered on the page and the black box now expands and contracts with the size of the line/text.

You cant test by putting various lines of text in.

EDIT: You can test

...and right aligned in FireFox =)

Let me see if I can combine yours and UW's and get something that can work in both. Good job |thumb

Alright! I got a hack that works in both IE and FireFox |thumb

I will clean up the code and change couple of things around tomorrow. But it work sin both at least.

Thanks for your help guys, much appreciated |thumb

http://www.nuvisiongroup.com/test.html

The picky bitch!

This works in IE6 and Netscape 7.1

Ooops! I should I have checked before I posted.

I'm going to download FireFox and see if mine works.

Nice job btw |thumb


-

The only problem with the " white-space: nowrap; " is that it will create a horizontal scroll bar if there are long lines. I kinda want them to break instead.

hmmm....

your test lines had
tags at the end. I assumed that you have those on a live page.

Its getting closer. We are still further along than we were yesterday :)


Back to the drawing board lol


-

This is the best I can do. The div container centers both in IE6 and Firefox. But, the text is centered also.

With that said, the only way to give the appearance that it was working in IE6 was to delete the 1px border around the text. The border does work correctly in Firefox though.

Sorry I couldnt be more help :(