CSS + tables + FireFox = swedguy going nuts

[swedguy]

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?

[Barron]

I think this is what you looking for:

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

[Barron]

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.

-

[swedguy]

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

[swedguy]

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

[swedguy]

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.

[Barron]

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

http://users.bathspa.ac.uk/markhelp/firefox/ff_html_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 :)


-

[swedguy]

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.

[Useless]

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|

[swedguy]

NIIIICE!

One step closer to perfection. You da man |thumb

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

[Barron]

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



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Untitled</title>
<style type="text/css">

body {
margin: 0;
padding: 0;
border: 0;
max-width: 100%;
width: 100%;
}

#container {
margin: 0 auto;
width: 5em;
max-width: 100%; /* for compliant browsers to apply */
white-space: nowrap;
}

#content {
border: 1px solid black;
padding: 10px;
left-margin:10px;
float: left;
display: inline; /* to combat IE's double margin bug */
}
</style>
</head>
<body>
<div id="container">
<div id="content">

This is you test asdasd test a;skdjf;laskdjfa;s ldkfja;sdlkfjas;dkflsjadfk asdfsdfsdfsdf<br>
This is my test for lines

</div>
</div>
<!-- need this --><br style="clear: both;">

</body>
</html>

[swedguy]

...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

[swedguy]

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

[Barron]

The picky bitch!

This works in IE6 and Netscape 7.1




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Untitled</title>
<style type="text/css">

body {
margin: 0;
padding: 0;
border: 0;
max-width: 100%;
width: 100%;
}

#container {
margin: 0 auto;
width: 5em;
white-space: nowrap;
max-width: 100%; /* for compliant browsers to apply */
display: table;
}


#content {
border: 1px solid black;
padding: 10px;
left-margin:10px;
float: left;

}


</style>
</head>
<body>
<div id="container">
<div id="content">
This is you test asdasd test a;skdjf;laskdjfa;s ldkfja;sdlkfjas;dkflsjadfk asdfsdfsdfsdf<br>
This is my test for lines

</div>
</div>
<!-- need this --><br style="clear: both;">
sfsdfsdfsdf
</body>
</html>

[Barron]

Ooops! I should I have checked before I posted.

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

Nice job btw |thumb


-

[swedguy]

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.

[Barron]

hmmm....

your test lines had <br> 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


-

[Barron]

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 :(


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Untitled</title>

<style type="text/css">
html, body {
padding: 0;
border: 0;
margin: 0;
text-align: center;
}
#container {
width: 0 auto;
margin-left: auto;
margin-right: auto;
position: relative;
visibility: visible;
display: table;
}
#content {
padding: 10px;
}
.large { /* adjust width of this to mimic large content */
width: 650px;
height: 40px;
background: #ffc;
border: 1px solid #000;
margin: 20px;
}
</style>
</head>
<body>
<div id="container" align=center>
<div id="content">
This is my test
</div>
<div style="clear:both;"></div>
</div>
<br><br>
<div id="container">
<div id="content">
This is my test asdf asdf asdf asd asdf asdf aasd f as lskd ;alskdfoi a;lsdkf o aosidf lk aosid laskdfoi alksdfoi aldi liasd lis dlknf lasdfoiasd flk ais lskdoi alskdfoia sldkf oiasd flaksdf alsdkiuuuks nk 44n 34 34k 3lk4 34jrol3i4r o3i4j5
</div>
</div>
<div style="clear:both;"></div>
<br><br>
<div id="container">
<div id="content">
This is my test asdf asdf asdf asd asdf asdf
</div>
</div>
<div style="clear:both;"></div>
<br><br>
<center>sfsdfsdfsdf</center>
</body>
</html>