Quick question about css

I was playing around with the idea of doing away with tables. And I ran across this little problem with position absolute. Does any one know why when a graphic is placed at the end of an html file, that 0,0 does not mean the upper left hand corner, however placing the graphic before the text does mean upper left hand corner? I always thought absolute meant always at that location no matter what. This is acting like relational to other items on the page.
Is there a bug in IE6 or am I just wrong about how this process works? Ok may not so quick of a question.:)
Silk

When you set an element to postion:absolute, it means it is absolutely positioned within its containing block. Look at this HTML:

<body>
  <div class="outer">
    <div class="inner">
    </div>
  </div>
  <div class="other">
  </div>
</body>

If you set the position of the inner DIV to absolute, you may position it within the outer DIV. If you set the position of the outer DIV or the other DIV to absolute, you may position them within the BODY.

Ok I think I get what you mean. Setting a block to absolute does not give it permission to overlay another block, it must stay within the parent block.
So for graphics would it be better to use in-line rather than block? As this would keep that graphic in the same block.
Sorry if these questions seam foolish, but I am reading a book as I test out my theories.
Silk

In reply to:
Setting a block to absolute does not give it permission to overlay another block, it must stay within the parent block.
So for graphics would it be better to use in-line rather than block? As this would keep that graphic in the same block.

Uh, you're trying to make something complex sound simple.

Elements are layed out according to flow (ie one after the other).

Block elements are layed out vertically.

An inline element is an element that should be layed out horizontally before vertically, like words in a paragraph. (just as words appear in lines and lines appear in paragraphs, inline elements appear in lineboxes and lineboxes appear in block boxes)

An absolutely positioned element is removed from flow, and thus can overlay other elements by specificying an offset. But the offset will be relative to the containing block. You can have a negative offset, allowing the element to be positioned outside the containing block.

Thus whether or not a graphic is inline or not depends on whether or not you want it to appear in a linebox and possibly be horizontally adjacent to other inline elements.

cool Perl / MySQL / HTML+CSS

I think I was misunderstanding what display properties were for. I thought it change an element from block to inline and visa-versa. But as I read further in the book it looks like all it does is change how it looks not how it functions. So a list of links can be displayed to look like a block with out having to end each link with an ending p or br tag.
Anywho, I was able to get the graphic to be placed where it should with just a float:right. Doing away with the absolute postion. Which is what I really wanted anyways. As I want to make sure it looks right on all monitors if possible. I still have the graphic placed before the text div. But I am thinking that graphic should have been allowed after that div, if the right margin is far enough left to let the graphic float up to the top edge of that text div.
The graphic may not be using the correct block type. It currently is using a p class wrapped around an anchor.
Maybe below will help explain what I am doing. It's abreviated for posting.
Silk

It would be better (and easier) if you were to post a URL. Also, what is <menu>? There is no such element in HTML.

For what ever reason <menu> works. I thought there was no element but since it worked I left it. The link is http://www.silkrooster.com/links.htm
Silk

Menu is apparently an element of html 4.01
http://www.w3.org/MarkUp/html-spec/html-spec_5.html#SEC5.6.4

-Matttail

Thanks for the link. I have been to w3 web site before. I guess I didn't pay much attention to their files.

BTW, I forgot to mention I also have an external stylesheet
Once I am satisfied the styles will all go into the external sheet.
Quick question I hope, does anyone know why background-image: url('webgraphics/background.jpg') does not work in firefox in an external sheet? In firefox my background is white.
Silk

body { font-family: Century Schoolbook, Times New Roman; color: rgb(192,192,192); background-image: url('webgraphics/background.jpg') }
h1 { font-family: Comic Sans MS, Arial; font-size: 36; color: #8080FF; font-weight: bold }
h2 { font-family: CentSchbook BT, Times New Roman; font-size: 18 }
h3 { font-family: Comic Sans MS, Arial; font-size: 14; color: rgb(192,192,192); font-weight: normal; font-style: italic; font-variant: normal; text-transform: capitalize; text-align: center; background-position: center top }
h4 { font-family: Century Schoolbook, Times New Roman; font-size: 24; color: rgb(192,192,192); text-align: justify; margin-right: 15px }
a:link { color: blue; text-decoration: none }
a:active { color: red; text-decoration: none }
a:visited { color: blue; text-decoration: none }
a:hover { color: green; text-decoration: underline; background: #F9EDED }

In reply to:
Menu is apparently an element of html 4.01

You're right. It has been part of HTML since the early days, and it has been deprecated since 1999. I'd never heard of it before.

I've been looking at your HTML and CSS, and it seems to me that you are trying to make a 3-column page. Would that be a fair assessment? I wrote an article on the wiki that talks about how to use CSS to make an easy-to-maintain two-column layout. It can easily be adapted to include an extra column with the addition of another DIV, and a modification to the CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  <head>
    <title>Two-Column Layout</title>
    <style type="text/css">

#wrap {
    width: 750px; /* remove for fluid layout */
    margin: 1em auto;
}
#sidebar_left {
    width: 18%;
    float: left;
}
#content {
    width: 60%;
    float: left;
    margin: 0 2%;
}
#sidebar_right {
    width: 18%;
    float: right;
}
#footer {
    clear: both;
}
    </style>
  </head>

  <body>
    <div id="wrap">

      <div id="header">
        ...header content goes here
      </div>

      <div id="sidebar_left">           
        ...sidebar content goes here
      </div>

      <div id="content">
        ...main content goes here
      </div>

      <div id="sidebar_right">           
        ...sidebar content goes here
      </div>

      <div id="footer">
        ...footer content goes here
      </div>

    </div>
  </body>

</html>

----------------
Simon Jessey
Keystone Websites (business site) | si-blog (personal site with affiliate links)

Looks like both IE and Firefox both support it yet. I thought menu maybe depreciated or will be. Perhaps I should rename it to div class="menu" to be safe.
Silk

I think you might as well call it 3 column. Looks to me like I needed the right margin set to auto maybe even left margin.
I had set the left margin to keep it from flowing in the left column. Would it be better to set the left margin and keep width and right margin at auto? I manually used a
at the lines that went in the right column. But setting the width using a percentage value would envoke wrapping, or set a padding value?
Sorry about all these questions my mind is racing figuring out all of this. I would assume there is more than one way to accomplish the same thing.
I know I could just easily copy and use the code you provided. But I am trying to grasp all of this. I want to thank you for taking the time and I appreciate the help greatly.
Back to the original problem - The reason why the right hand graphic did not go in the right column when placed at the end of the html must have been because the text div was too wide. Would that be correct?
Silk

>Looks like both IE and Firefox both support it yet. I thought menu maybe depreciated or will be. Perhaps I should rename it to div class="menu" to be safe.

Depreciated is a funny term when it comes to HTML. HTML 4.01 is the most rescent version, and the last. So when an element is depreciated it basically means it's not going to carry over to xhtml. Most of the time there's a better way to accomplish the same thing through css, so that's the way to go. But as long as browsers support html, that tag should work. The same should also hold true for other such tags (if IE ever gets around to being comlient.)

-Matttail

Well i think I have the css code down to where it should be. But from what I gather all floating elements must be at the top of the html then the non floating text. Because I can set the right margin to 80% so very little text is displayed per line and the image will still not move to the top.
Anyways, thanks everyone. I guess I can place the styles in the external sheet now.
Silk

In reply to:
I still have the graphic placed before the text div. But I am thinking that graphic should have been allowed after that div, if the right margin is far enough left to let the graphic float up to the top edge of that text div.

Floats don't float up or down!

"A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there's a line box, the top of the floated box is aligned with the top of the current line box."

Thus if you have multiple lines before the float, the float will align with the top of the last line, because the last line is the current line box.

cool Perl / MySQL / HTML+CSS

Re: "When you set an element to postion:absolute, it means it is absolutely positioned within its containing block."

Small nit: an absolutely positioned element's containing block is the nearest ancestor that has a position other than static (static is the default).

So, if you have this code:

.foo { position: absolute; }
.shubbery { position: relative; }

[...]

<html>
<div>
<div class="foo">
</div>
</div>

<div class="shubbery">
<div class="foo">
</div>
</div>
</html>

The first instance of div "foo" will have <html> (the root element) as its containing block. The second instance of foo will have div "shubbery" as its containing block.

In reply to:
Re: "When you set an element to postion:absolute, it means it is absolutely positioned within its containing block."

Small nit: an absolutely positioned element's containing block is the nearest ancestor that has a position other than static (static is the default).

Yes. I assumed that it was obvious - that's what comes from doing it all the time, I suppose.

I am sure most of you know this by now. But I will post this for those still battling with getting a background color or image to work with firefox. Firefox uses the html tag instead of the body tag. From what I can tell IE will use either. But for a so called "gauranty" I use both tags with identical settings.
Silk

In reply to:
I am sure most of you know this by now. But I will post this for those still battling with getting a background color or image to work with firefox. Firefox uses the html tag instead of the body tag. From what I can tell IE will use either. But for a so called "gauranty" I use both tags with identical settings.

Actually, it is supposed to work that way only for XHTML documents. XHTML is an XML application, and XML doesn't have any analog to HTML's BODY element. In HTML, the BODY element is a somewhat magical thing with weird properties (largely of a presentational nature).

In reply to:
I am sure most of you know this by now. But I will post this for those still battling with getting a background color or image to work with firefox. Firefox uses the html tag instead of the body tag. From what I can tell IE will use either. But for a so called "gauranty" I use both tags with identical settings.
Silk

You're talking about getting a background colour and image? You're not suppose to style the HTML tag. That's just a "over all" enveloping tag. It's not for styling.

Firefox, Opera, Safari and IE will all let you style the <body> tag. Just use: body { yourstuff: value }

If that doesn't work, there's something else wrong. Don't style HTML cause it's not there for styling, it's just there to envelope the whole page into a single parent tag (think XML).

In reply to:
You're talking about getting a background colour and image? You're not suppose to style the HTML tag. That's just a "over all" enveloping tag. It's not for styling.

I'm sorry, but that just isn't correct for the reasons I explained earlier. In XML you must set background color/image properties on the root element, which is the HTML element in the case of XHTML. In the case of plain old HTML, you must style the BODY element instead.

I know it sounds wrong, but read the relevant bit of the CSS spec if you don't believe me. Bear in mind that this behavior only works in standards mode rendering (including IE6), so you will need to include the correct DOCTYPE to make sure the HTML element represents the canvas.

All I know is that I can't get into a who's right conflict as I am not qualified.
By using the body tag, my browser plus others have mentioned that the background is pure white. I read in a css book that some browser may require background values be placed in the html tag. Low and behold it fixed firefox.
According to that link from scjessey it seams to me that firefox is more xml complient than it is html/css complient.
Silk

It also has to do with the way the page is being served (text/html, text/xml or application/xhtml+xml).

This thread may be helpful:

http://archivist.incutio.com/viewlist/css-discuss/50593

In reply to:
It also has to do with the way the page is being served (text/html, text/xml or application/xhtml+xml).

This thread may be helpful:

http://archivist.incutio.com/viewlist/css-discuss/50593

That isn't entirely right either. It has more to do with your DOCTYPE declaration, to be honest. For example, Internet Explorer 6.0 running in standards mode will allow the root element (HTML) to be styled, even if the document is being served as text/html. It is safer to simply do this:

html, body {
    background: whatever;
    color: whatever;
}

----------------
Simon Jessey
Keystone Websites (business site) | si-blog (personal site with affiliate links)

*edit

Okay, I ran some tests on my dev server and I found it does have to do with the content-type, at least for Firefox.

While I never had problems with the background colour, the comment about the content-type got me thinking. I have 100% correct DOCTYPE and <?xml starter, but my page was still getting served as text/html. So I manually added a Content-type: text/xml and now I see the problem previously mentioned.

It is rather interesting, actually. I'll have to keep this in mind from now on. Guess I need to start manually setting the content type on my websites!

However, it does completely screw up IE as it's not smart enough to know these new fangledangle technologies.

Opera: Doesn't make a difference. Body colour fully covered the entire window.
Firefox: Only covered the body portion of the webpage. The rest of the window was the default colour.
IE: Gave XML parsing errors: to compound IE's errors, W3 appears to be down right now (or having problems) and IE is unable to download the xhtml-stict DTD making the webpage take AGES to load. (IE seems to have a 5 hour timeout -- okay, make that 5 minutes, but it feels like 5 hours).Edited by guice on 01/22/06 10:11 AM (server time).

It isn't just a background color you need to worry about. The biggest problem appears to be with tiled background images - they need to be applied to the HTML element in XHTML.

In reply to:

html, body { background: whatever; color: whatever;

duh I can't beleive I did it long handed. I totally forgot about stacking tags like that. Funny part is a few days earlier I stacked other tags to reduce the file size.
This is getting to be an interesting thread. From the way this reads it sounds like firefox has its own quirks vs. standard modes. BTW, I don't beleive I set a content type, perhaps that is the culprit.
Silk

In reply to:
From the way this reads it sounds like firefox has its own quirks vs. standard modes. BTW, I don't beleive I set a content type, perhaps that is the culprit.

There are three modes in most modern browsers:

1. Quirks mode - triggered by having no DOCTYPE (can also be triggered in IE6 if the XML prolog is added to an XHTML document).
2. "Almost" standards mode - triggered by having a DOCTYPE, but with the DTD URL omitted.
3. Standards mode - triggered by having the correct DOCTYPE (including the DTD URL).

All of these are handled by the HTML parser of the browser in the usual way, unless the document is a Strict XHTML document with a content type (set at the server level, of course) of text/xml, or more appropriately application/xhtml+xml. Such documents must also be well-formed, or they will produce an error (meaning that none of the document is rendered), because they are handled by the XML parser, rather than the HTML parser.

In reply to:
From the way this reads it sounds like firefox has its own quirks vs. standard modes. BTW, I don't beleive I set a content type, perhaps that is the culprit.

What Simon said. I just never realized that my pages were being sent as a content-type text/html until I took a closer look at it.

You want to try your best to keep at least at mode 3 since that's the mode you can control most.

OK, so for either browser to be in true "standards mode" then I need the url in the doctype to w3c.com
I recently added the doctype and left the url off. Now this doctype has to be on every html page correct?
Silk

In reply to:
OK, so for either browser to be in true "standards mode" then I need the url in the doctype to w3c.com
I recently added the doctype and left the url off. Now this doctype has to be on every html page correct?

Correct. You can only get standards mode (HTML 4 and XHTML) if you use complete and accurate doctype declarations. If you include the XML prolog (which is many case is not required), it will trigger quirks mode in IE6. For a full list of doctypes, see this article.

jessey: standards, nutella and keep your mouth closed when you chew, you're like my dream girl, but you're a dude :)

jason

In reply to:
jessey: standards, nutella and keep your mouth closed when you chew, you're like my dream girl, but you're a dude :)

Er... thank you. I think.

LOL :)