I don't know...

**CiberTHuG** · Apr 23rd, 2002, 09:30 AM

Sorry, I have no idea what a good subject would be.

And I am growing to hate the documentation at the W3C. I can't find what I need.

Code:

<html>
  <head>
    <title>Test Page</title>
    <style type="text/css">
      body {
        text-align: center;
      }
      .Container {
        text-align: center;
        width: 600px;
        border-style: solid;
        border-color: red;
        border-width: 2px;
      }
      .leftBox {
        position: relative;
        float: left;
        width: 40%;
        margin: 4%;
        border-style: inset;
        border-width: 4px;
        border-color: blue;
      }
      .rightBox {
        float: left;
        width: 40%;
        margin: 4%;
        border-style: inset;
        border-width: 4px;
        border-color: gray;
      }
    </style>
  </head>
  <body>
    <div class="Container" id="Container">
      <script type="text/javascript">
        document.write(document.getElementById("Container").style.borderColor);
      </script>
      <div class="leftBox">
        <p>bar</p>
      </div>
      <div class="rightBox">
        <p>blah</p>
      </div>
    </div>
  </body>
</html>

This page as two problems.

The first: document.getElementById() returns a Node object. .style.borderColor will return that Node objects inline style attribute border-color value. I want to get the border color set in the style sheet. I some how imagine this should be possible without using the ID attribute.

Second: This page doesn't show consistently on every browser. Go figure. I don't care so much about that, I just want to know how it is supposed to be displayed. Is text-align supposed to apply to block element children (div), or just inline (span)? Is the border for div.Container supposed to wrap around the children divs, or not? These are things that I am sure are specified in the standards, I'm just not finding what I want.

**CiberTHuG** · Apr 23rd, 2002, 09:34 AM

Just incase anyone cares, I want to to display like it is displaying in IE 5.0 (the out div's border encases the children, and all boxes are centered). But Netscape 6 and Opera 6 agree, so I'm thinking that I'm doing something wrong and IE is taking liberties, hence the reason I need to confirm with the standards how it is supposed to look.

**CiberTHuG** · Apr 23rd, 2002, 09:57 AM

Okay, I understand how to get the out box around the inner boxes. The inner boxes are overflowing, and by default, overflow is set to visible. If you set it to hidden, they disappear. I can set the height of the parent box and they will be in the parent's border.

**CiberTHuG** · Apr 23rd, 2002, 10:06 AM

margin: auto; does what I want (centering the boxes) in Opera and Netscape, but is ignored by IE. I'll have to double check the doco to see again if it is doing what it is supposed to and who is at fault.

**CiberTHuG** · Apr 23rd, 2002, 10:35 AM

Code:

<html>
  <head>
    <title>Test Page</title>
    <style type="text/css">
      body {
      }
      .Container {
        height: 480px;
        width: 600px;
        border-style: solid;
        border-color: red;
        border-width: 2px;
        margin-left: auto;
        margin-right: auto;
        padding: 0px;
      }
      .leftBox {
        float: left;
        width: 40%;
        height: 360px;
        margin: 4%;
        border-style: inset;
        border-width: 4px;
        border-color: blue;
        overflow: auto;
      }
      .rightBox {
        float: left;
        height: 360px;
        width: 40%;
        margin: 4%;
        border-style: inset;
        border-width: 4px;
        border-color: gray;
      }
    </style>
  </head>
  <body>
    <div class="Container" id="Container">
      <script type="text/javascript">
        document.write("<p>foo</p>");
      </script>
      <div class="leftBox">
        <p>bar</p>
      </div>
      <div class="rightBox">
        <p>blah</p>
      </div>
    </div>
  </body>
</html>

This does (most) of what I want, but only in Netscape. Opera doesn't present scroll bars if the content overflows, and IE doesn't compute the margins of the outter div to fill the entire container as specified.

Anyone keeping score (Justin), I have to write two versions of this because Netscape is the only one to get it correct.

**JoshT** · Apr 23rd, 2002, 11:08 AM

AFAIK, in the release notes for Opera, it doesn't fully support text-align or overflow.

And you need to correctly set the <!DOCTYPE> tag for IE to correctly render certain CSS it knows how to correctly render, and Mozilla sniffs the doctype as well.

**CiberTHuG** · Apr 23rd, 2002, 11:49 AM

I set the doctype, but it didn't change anything. I then realized that I am using IE 5, not IE 6, so I shouldn't be too hard on IE. I'm using IE 5 because it is the only browser I can't install twice. I have two versions of Netscape and Opera installed for testing purposes.

**CiberTHuG** · Apr 24th, 2002, 01:42 PM

Thanks for the offer, but we have a machine with IE 6 in the QA lab ('course, all the lab has is IE 5, 5.50, and 6, it doesn't have any other browsers), so it will eventually get tested there, in the mean time, it is a leap of faith on my part.

I had started working on this to replace to select boxes that were next to each other. I was going to add JavaScript to replace the functionality, but I found a way to set the width of the select boxes using style sheets (so simple, I don't know why I didn't do it sooner). Regretably, I don't think the select boxes have horizontal scroll bars if the text is wider than the box.

**Hawk** · Apr 24th, 2002, 04:36 PM

Very interesting CiberTHuG!

You post your question and you answer your own question too.

I would love to help but you know my web skills isn't up to your level. I agree about the W3C. I tried to look for information but it is just too unorganized.

Thread: I don't know...

Thread Tools

Display

I don't know...

Posting Permissions