CSS Forum

**antitoxic** · 07-01-2008, 06:37 PM

Briefly a centred layout. One little box absolute positioned aiming the top right corner.
Problem (firefox only):
When content is less then the browser window the little box is positioned relatively to the browser window, not to the page.

The problem is solved for all other browsers with this:
Example for all other the browsers:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>All other</title>
</head>

<body style="background:#ccc; position:relative; display:table; width:100%;">
<div>
    div wrapper
    <div style="margin:0 auto; width:800px; height:300px; background:#FFCC66">
        <div style="position:absolute; top:0px; right:0px; background:#F03">absolute div</div>
        content div
    </div>
</div>
<br /><div style="z-index:3" class="smallfont" align="center">Content Relevant URLs by vBSEO 3.0.0 &copy;2007, Crawlability, Inc.</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-139461-1";
urchinTracker();
</script>
</body>
</html>

Different versions of Firefox has different bugs rendering so I used them to make different layout which does not work on other browsers for a pity and one is not valid css:
Example for Firefox 3 only

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FF3</title>
</head>

<body>
<div style=" background:#ccc; position:relative; min-width:-moz-min-content;">
    div wrapper
    <div style="margin:0 auto; width:800px; height:300px; background:#FFCC66">
        <div style="position:absolute; top:0px; right:0px; background:#F03">absolute div</div>
        content div
    </div>
</div>
<br /><div style="z-index:3" class="smallfont" align="center">Content Relevant URLs by vBSEO 3.0.0 &copy;2007, Crawlability, Inc.</div></body>
</html>

Example for firefox 2 only

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FF2</title>
</head>

<body style="background:#ccc; float:left; position:relative;">
<div style="display:table; width:100%;">
    div wrapper
    <div style="margin:0 auto; width:800px; height:300px; background:#FFCC66">
        <div style="position:absolute; top:0px; right:0px; background:#F03">absolute div</div>
        content div
    </div>
</div>
<br /><div style="z-index:3" class="smallfont" align="center">Content Relevant URLs by vBSEO 3.0.0 &copy;2007, Crawlability, Inc.</div></body>
</html>

Effect: Firefox is buggy because does strech the display:table to 100% and have the table properties as having minimum width equal to its content width but does not position the block to the element but ti the browser window?
Desire:
Any ideas how to be fixed [:

**LadynRed** · 07-01-2008, 08:03 PM

Quote:

Different versions of Firefox has different bugs rendering

No, Firefox has very FEW bugs, it's IE that is the LEAST compliant with the standards!

Quote:

Firefox is buggy because does strech the display:table to 100%

It's NOT a bug, unless something has been added to Bugzilla on this that I haven't seen.

Why are you using moldy old tables anyway ??

First of all this is just incorrect:

Quote:

You cannot position the BODY and it's incorrect to use display:table; (or display anything but none) on the BODY. The width WILL default automatically to 100%, so that's also a waste of time and energy.

Quote:

When content is less then the browser window the little box is positioned relatively to the browser window, not to the page.

Incorrect, the height of the browser window or the content in it has NOTHING to do whatsoever with how an element is positioned, sorry. Positioning isn't relative to the WINDOW at all, but to the BODY if there is nothing else positioned.

Use a 'wrapper' div to contain ALL of the rest of your site, set IT to position: relative, give it a defined width and center it with margin: 0 auto; if you want a centered layout. If not, leave that part off, the default width WILL be 100%.

Then anything you position INSIDE of the "wrapper" will be positioned relative to the wrapper rather than the body.

I think you should read thru this:
http://www.barelyfitz.com/screencast...s/positioning/

Quote:

As for this:
<body style="background:#ccc; float:left; position:relative;">

You can NOT float the BODY !

As for your table 100% problem, if you write your HTML and CSS correctly, then you should get the result you want without resorting the multitude of unnecessary versions you've created for yourself.

**wayfarer07** · 08:07 PM

Remove
position:relative; display:table; width:100%;
From the body.

This does not belong there.
display:table, has very little use, if any, on any element. You never need to position the body, nor does the body need width, ever.

HTML Code:

align="center"

should never be used. Remove it everywhere, and read the stickies about how to center an element.

Inline styles are mostly a bad idea. Most of your CSS should be in external stylesheets, although this does not affect the problems you are having.

***EDIT***
I now see that LadynRed posted right before I did. She has a lot of useful things to say, I would read what she posted carefully.

**LadynRed** · 07-01-2008, 08:12 PM

Hey Abel, we were both on it at the same time

**antitoxic** · 10:12 PM

Well, well ,well.

What angry scots whe have here [:

Firstly these are debug test examples, mates. I wrote them on fly so inline styling is faster then creating new files.[/b]
@LadynRed, where did I exactly use tables ?

Have anyone here tryed to center uknown width container ?

Applying to styles to the body is just as effective as applying them to one more extra div code.

Quote:

The width WILL default automatically to 100%, so that's also a waste of time and energy.

Writing in capitals does loudly echo in my ears, yes. But did you even look at the code. How does it function. This is the bug, dear moderator. If not a bug you call it, a wrong rendering. Try it without width:100%. Try it even not on the body but a div wrapper of everything . That is now just useless.

Quote:

Incorrect, the height of the browser window or the content in it has NOTHING to do whatsoever with how an element is positioned, sorry. Positioning isn't relative to the WINDOW at all, but to the BODY if there is nothing else positioned.

Did you test it ? What height ? Width.

Try the layout without position:relative. The absolute element will stick to the browser windows end, not the content limits as if there is this little trick.

Quote:

HTML Code:

align="center"

should never be used. Remove it everywhere, and read the stickies about how to center an element.

Where did I use that now ?

Are those premade answers ?

Quote:

Incorrect, the height of the browser window or the content in it has NOTHING to do whatsoever with how an element is positioned, sorry. Positioning isn't relative to the WINDOW at all, but to the BODY if there is nothing else positioned.

What laddie ? So getting browser window to width less than 800px, this is positioned to the body right now you say? The body slips to the browser window width, that is.

Yes, you've done enough to make me abandon the forum after my first thread. Thank you.

**chrishirst** · 07-02-2008, 06:16 AM

Quote:

Have anyone here tryed to center uknown width container ?

Well quite frankly. No! Because you can't "centre" something that is as wide as the container it is in.

Quote:

Code:

align="center"

should never be used. Remove it everywhere, and read the stickies about how to center an element.

Where did I use that now ?

that would be here then (from post #1)

Code:

<div style="z-index:3" class="smallfont" align="center">Content

Quote:

What laddie ? So getting browser window to width less than 800px, this is positioned to the body right now you say? The body slips to the browser window width, that is.

Not sure where you are going with this reasoning?
The element is set exactly where the markup tells it to be set!

I do think that you should learn a lot more about HTML / CSS markup before you decide that what you are seeing with incorrect markup is a bug or browser incorrect behaviour.

**antitoxic** · 06:48 AM

Quote:

<div style="z-index:3" class="smallfont" align="center">Content Relevant URLs by vBSEO 3.0.0 ©2007, Crawlability, Inc.</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-139461-1";
urchinTracker();
</script>

This is not mine. It was generated after previewing my post. Obviosly from the forum.

Quote:

Well quite frankly. No! Because you can't "centre" something that is as wide as the container it is in.

http://www.antitoxicstudio.com/other...tml/index.html
So can it ?
This is my coding. An starting xhtml page, reset css stylesheet, handcrafted. Additional rules for the project. Background colors are for debug purposes.

Well written article is present in sitepoint about future of display:table.

I still have no answer about me using tables? And my unnecessary code ?

Stop yelling at me to read more. If you have just tried the code an idea could have grown. Resizing window to width less than content makes the body/wrapper div shrink to the window size not content. As display:table; and width:100% come in hand they apply the property of table to be min width of its conten. This works in all browsers (no capitals or exclamation marks, this is called normal emphasizing) inlcuding most compilant Opera, Safari, just tested Konqueror, even silly IE.
Firefox now shows the background of the element (body/div wrapper) all the way the content width but does the absolute positioned element does not reach this dimensions but still sticks to the browser window.

Arrivederci

**angele803** · 07-02-2008, 03:04 PM

antitoxic - Try adding "position:relative" to your div wrapper in your code you posted for "all other browsers". I think that might solve your problem.

**LadynRed** · 07-02-2008, 03:14 PM

Quote:

Applying to styles to the body is just as effective as applying them to one more extra div code

No, it isn't. There are some things, like the body, that are pointless to add styling to.

Where are you using tables ? Ok, no tables in your code by WHY would you set an entire document to display:table in the first place ??

If you feel there are bugs in Firefox, then register over at Bugzilla and make your complaints there, but the developers there don't have much tolerance for bad coding and then call it a bug in their product.

For the record, nobody's angry

**Candygirl** · 05:55 PM

Quote:

Originally Posted by LadynRed

You cannot position the BODY and it's incorrect to use display:table; (or display anything but none) on the BODY.
[...]
You can NOT float the BODY !

Yes we can as body is not the root element, but html is.

Quote:

Originally Posted by LadynRed

Positioning isn't relative to the WINDOW at all, but to the BODY if there is nothing else positioned.

I disagree with this. A fixed positioned element is alway relative to the viewport, never the body. An absolute positioned element is relative to the initial containing block if no ancestor is positioned, not the body either.

Quote:

Originally Posted by chrishirst

Well quite frankly. No! Because you can't "centre" something that is as wide as the container it is in.

How about floating elements or absolute positioned elements ?

Quote:

Originally Posted by antitoxic

Have anyone here tryed to center uknown width container ?

Yes, I did. For horizontal centering I'd use 2 relative positions:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>centering float</title>
<style type="text/css">

* {margin:0;padding:0;}

div {
    float:right;
    position:relative;
    right:50%;
}

p {
    position:relative;
    left:50%;
    background:red;
}
</style>
</head>

<body>
    <div>
    <p>This is an unknown width centered element</p>
    </div>
</body>
</html>

But this can be buggy depending of the context; FF2 has problem when floating list items are involved (corrected in FF3) and sometimes safari needs an overflow:hidden to avoid a scroll bar.

Also about your problem, I've noticed that Firefox is not able to make a table as reference for an absolute positioning. Opera, safari and IE7 do. I think display:table might have the same effect ? I've searched in the css2.1 candidate recommendation but haven't found anything interesting about this issue yet.

Anyway I'm surprised you say that IE is displaying it well as IE7 and under don't know about display:table ? Or you might have try on IE8 beta which is supposed to support display:table?

**LadynRed** · 07-02-2008, 09:22 PM

Quote:

Yes we can as body is not the root element, but html is.

Just what would be the point of putting a float on the body ??

**antitoxic** · 03:21 AM

Thank you a lot, Candygirl. One man that infact did really answer. angele303 thank you tooo.

LadynRed, I don't know what is your specialization but please, dear not angry moderator stop then expressing wrong oppinions. As moderator at least you should inspire with knowledge.

Floatintg, position: absolute, and some values of display property makes

Code:

width:auto

to be equal to content width as if not it is equal to the parent. So... this is trick it is not just floating dear moderator.

Thank you again Candygirl, we'll collaborate surely something that works. But with the help of angele303 we might have found the perfect way to center uknown width layout.
And yes IE6 surprisingly does not show any bugs just because it does not support these properties [: ..

As you said:

Quote:

A fixed positioned element is alway relative to the viewport, never the body. An absolute positioned element is relative to the initial containing block if no ancestor is positioned, not the body either.

How was that moderators.. Oh yes... "I think you have a lot to read..... especially coding tricky layouts.

**antitoxic** · 03:20 AM

IE does it right because it does not shrink the body to viewport size [: . Additional it has text-align:center for the body as triggering the bug for centering block elements that way [:

I've tested the floating relative example Candygirl. Smart trick but buggy as you said in several situatians.

Truly that is the problem, firefox can not accept table as relative object for positioning obviously. That's why one more useles div with only position:relative might do the trick as it will have the table-behavior-container dimensions.

edit:
Oddly,
http://www.quirksmode.org/bugreports...never_rel.html

edit2:
The red lady you probably missed that:
https://bugzilla.mozilla.org/show_bug.cgi?id=63895

**Candygirl** · 03:35 AM

Quote:

Originally Posted by antitoxic

IE does it right because it does not shrink the body to viewport size [: .

IE does schrink the body to viewport size.

IE6 does it right because it does not accept that a container get less width then its content. So the minimum width is the width that fit to the content. This is a good thing here because it looks like a 100% table behavior.

But, in IE7 this bug is corrected and the display:table is not supported, so it won't work the way you'd like to. Or is it?

Quote:

Originally Posted by antitoxic

Truly that is the problem, firefox can not accept table as relative object for positioning obviously. That's why one more useles div with only position:relative might do the trick as it will have the table-behavior-container dimensions.

That's what I was writing right now but you've burned me

Thank you for those links that make sense to what I've observed.

**antitoxic** · 07-03-2008, 03:40 AM

Quote:

Originally Posted by Candygirl

So the minimum width is the width that fit to the content.

Yes that is what I meant. min width does not let (version 6 only for no good reasons ) to shrink.

Solution is trivial as it surely includes the way firefox apply the behavior of a table. Because more oddly than before it does it on display:table. That leads me that these xul properties (-moz....) that builds the behvaior of the table can be changed to achieve the desired result.

**wayfarer07** · 07-03-2008, 11:27 AM

Once again, applying the behavior of tables to divs is worthless. You are making things much too complicated for yourself.

**LadynRed** · 02:43 PM

Quote:

LadynRed, I don't know what is your specialization but please, dear not angry moderator stop then expressing wrong oppinions. As moderator at least you should inspire with knowledge.

What ??? English please. I told you, I'm not angry at anything or anyone! As for opinions, well, opinions are not facts and therefore cannot be deemed wrong or right

And don't presume to tell me what my role is as a moderator. My 'specialization' -- gee.. knitting ???

Quote:

min width does not let (version 6 only for no good reasons ) to shrink.

IE6 does not support min/max width/height - it never has.

Quote:

You are making things much too complicated for yourself.

Agree 100%

Sitepoint's example using CSS tables in a Feb blog post used display:table on a DIV named "body" - it was never applied to the <body> at all.