CSS Layout Problem

**Travis G** · Mar 1st, 2004, 02:05 PM

I have the following sample page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
              "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>My Problem</title>
    <style type="text/css">
      body {
        width: 48em;
        font: 10pt sans-serif;
        color: black;
        background-color: white;
        margin-left: auto;
        margin-right: auto;
      }
      input {
        width: 6em;
      }
    </style>
  </head>
  <body>
    <table style="width: 100%;">
      <tr>
        <td style="width: 33%; text-align: left;">
          <input type="submit" name="submit" value="Left">
        </td>
        <td style="width: 33%; text-align: center;">
          <input type="submit" name="submit" value="Center">
        </td>
        <td style="width: 33%; text-align: right;">
          <input type="submit" name="submit" value="Right">
        </td>
      </tr>
      <tr>
        <td style="width: 33%; text-align: left;">
          <input type="submit" name="submit" value="Left">
        </td>
        <td style="width: 33%; text-align: center;">
        </td>
        <td style="width: 33%; text-align: right;">
          <input type="submit" name="submit" value="Right">
        </td>
      </tr>
    </table>
  </body>
</html>

The body is set to a relative width, and centers itself in the view port. The body is meant to be roughly 640px wide with a 10pt font, incase you are on a 640x480 screen. I want it to remained centered as the user changes the size of the font with the UA.

I also want to set up the input submit buttons without the use of a table. I'm having huge problems doing this. I can either get them set when all three buttons are present, but not when the center one is missing, or I can get them set with all three or only two buttons, but the buttons don't move apart as the page widens or narrows.

Any suggestions?

**phpman** · Mar 2nd, 2004, 01:35 PM

delete this line

"http://www.w3.org/TR/html4/loose.dtd"

that is very buggy and will cause IE to go into bad quirks mode.

**Travis G** · Mar 2nd, 2004, 03:34 PM

It is standards compliant. I don't care about IE. Do you have anything to contribute to the thread?

**phpman** · Mar 2nd, 2004, 04:18 PM

I see your attitude hasn't changed Travis.

that is funny, with it it doesn't do it, without it it runs like you hope. so until you step off your high horse and try it I will consider this to be fixed.

taken that line out will still make it standards compliant, for html4 quirks mode. but if you want a cross-browser fix then take the width out of the body.

also you forgot a meta content tag so no, it is not compliant.

**Travis G** · Mar 2nd, 2004, 05:28 PM

Originally posted by phpman
I see your attitude hasn't changed Travis.

Uhm... you are missing a comma. And my attitude has nothing to do with it.

that is funny, with it it doesn't do it, without it it runs like you hope.

This is why my attitude has nothing to do with it. What runs as I'd hope? With the DTD line, the example I've given renders exactly like I want, even in IE!

My problem is not trying to get it to look like I want. The problem is, getting it to look like I want without using a table for layout. I want to set style on the input elements so they will appear in the same position with the absence of the table.

To further complicate things, the center button may not always be present, so the left and right need to not set themselves off of it.

which you might've noticed if you so until you step off your high horse and try it I will consider this to be fixed.

Perhaps if you got your head out of my horse's ass, then you would see that nothing is fixed.

**phpman** · Mar 3rd, 2004, 11:18 AM

then I appologize for not understanding what you wanted.

is this closer?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>My Problem</title>
    <style type="text/css">
      body {
        width: 48em;
        font: 10pt sans-serif;
        color: black;
        background-color: white;
        margin-left: auto;
        margin-right: auto;
      }
      input {
        width: 6em;
      }
      #one {
	position: absolute;	
        width: 48em;
     }
     #one #left {
	position: absolute;
	width: 33%;
     }
     #one #right {
	position: absolute;
	right: 0px;
     }
     #one #middle {
        text-align: center;
     }
     #two {
	position: absolute;
	top: 200px;
        width: 48em;
     }
     #two #left {
	width: 33%;
	position: absolute;
     }
     #two #right {
	right: 0px;
	position: absolute;
     }
     #two #middle {
	width: 33%;
         text-align: center;
     }
    </style>
  </head>
  <body>
   <div id="one">
 <div id="left"><input type="submit" name="submit" value="Left"></div>
 <div id="right"><input type="submit" name="submit" value="Right"></div>
 <div id="middle"><input type="submit" name="submit" value="Center"></div>
</div>
<div id="two">
 <div id="left"><input type="submit" name="submit" value="Left"></div>
 <div id="right"><input type="submit" name="submit" value="Right"></div>
 <div id="middle"></div>
</div>

  </body>
</html>

but IE's box model is horrible.

**Travis G** · Mar 3rd, 2004, 01:16 PM

Thanks, that helps. This is what I have now:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
              "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>My Problem</title>
    <style type="text/css">
      body {
        font: 10pt sans-serif;
        color: black;
        background-color: silver;
      }
      .pageSpace {
        color: black;
        background-color: white;
        margin: 0px auto;
        width: 48em;
        min-height: 100%;
      }
      .questionnaire {
        width: 80%;
        margin: 5px auto;
        border: 1px solid black;
      }
      .questionnaire caption {
        margin: 0px auto;
        font-variant: small-caps;
      }
      .buttonRow {
        position: relative;
        margin: 25px auto;
        width: 100%;
      }
      .buttonLeft {
        position: relative;
        margin-right: 14.6em;
        width: 6em;
        left: 10px;
      }
      .buttonCenter {
        position: absolute;
        width: 6em;
        margin: 0px auto;
      }
      .buttonRight {
        position: absolute;
        margin-left: 14.6em;
        width: 6em;
        right: 10px;
      }
    </style>
  </head>
  <body>
    <div class="pageSpace">
      <div class="buttonRow">
        <input type="submit" name="topLeft" value="Left" class="buttonLeft">
        <input type="submit" name="topCenter" value="Center" class="buttonCenter">
        <input type="submit" name="topRight" value="Right" class="buttonRight">
      </div>
      <table class="questionnaire">
        <caption>Sample Table</caption>
        <tr>
          <td><label for="sampleQuestion1">Sample Question</label></td><td><input type="text" id="sampleQuestion1"></td>
        </tr>
        <tr>
          <td><label for="sampleQuestion2">Sample Question</label></td><td><input type="text" id="sampleQuestion2"></td>
        </tr>
      </table>        
      <div class="buttonRow">
        <input type="submit" name="topLeft" value="Left" class="buttonLeft">
        <input type="submit" name="topRight" value="Right" class="buttonRight">
      </div>
    </div>
  </body>
</html>

I have two problems with this:[list=1][*]The pageSpace doesn't go from the top of the view port to the bottom. I don't want to see the gray background above or below the white box.[*]In Mozilla, if the view port is narrower than pageSpace, it continues to center the page. Part of what you should see will fall off the left side and you can't get to it.[/list=1]

**phpman** · Mar 3rd, 2004, 02:51 PM

well, seeing how IE and safari have a lack of support for the min-height attribute, I just made it height: 100% and fixed the bottom, sort of.

I added

html, body {
height: 100%;
}

which was suppose to cure the min-height support, but it didn't.

also I added margin-top:0px; to the body and it fixed the gap up top.

for #2 I get a scroll bar if I made the viewport smaller in width than the pageSpace

**Travis G** · Mar 3rd, 2004, 04:24 PM

Originally posted by phpman
well, seeing how IE and safari have a lack of support for the min-height attribute, I just made it height: 100% and fixed the bottom, sort of.

My fear here is, what if the page is longer than the view port? If I set the height, will the extra data be clipped? I guess I could test that. I assumed that would be the case, but then again, several other things aren't working as advertised.

for #2 I get a scroll bar if I made the viewport smaller in width than the pageSpace

I only have the problem in Mozilla. It works fine in IE. I haven't tested anything else, yet.

**phpman** · Mar 3rd, 2004, 05:19 PM

Originally posted by Travis G
My fear here is, what if the page is longer than the view port? If I set the height, will the extra data be clipped? I guess I could test that. I assumed that would be the case, but then again, several other things aren't working as advertised.

both showed the samething when the viewport was smaller. scrollbar for me

Originally posted by Travis G
I only have the problem in Mozilla. It works fine in IE. I haven't tested anything else, yet.

if the content is more than the height you still should get a scrollbar, wouldn't you think? but then again I have seen the text or whatever go off the page if the box is set absolutely and no horizontal scroll bar.

Thread: CSS Layout Problem

Thread Tools

Display

CSS Layout Problem

Posting Permissions