Jump to content

vAlign


Twentyoneth

Recommended Posts

I have a page, where I have everything centered and vertically aligned to the top....problem is, with everything vAligned to the top, I still get a gap.. see here: [a href=\"http://12.27.247.70:8000/csite\" target=\"_blank\"]Example[/a]

Any ideas on how to fix this?

It works if I take out this little piece of code:

[code]               </td>
            </tr>

            <tr>
               <td>[/code]

It is inbetween the "banner" table and the "content" table...

[NOTE: Everything is aligned in the css. It still wont align correctly when aligned in html.]
Link to comment
Share on other sites

I almost hate to suggest this because I was unsuccessful in solving your problem, but I went through you CSS and HTML and retuned it. It wasn’t working quite right. It actually aligned left in FF. That void is still there no matter what I do. Hopefully you’ll be able to solve your problem.

To work on it easy I placed the css in the html...
[code]<html>

   <head>
      <style type='text/css'>
         body {
               background-color: #000000;
               margin-top: 0px;
               margin-bottom: 0px;
              }
         div {
               background-color: #000000;
               text-align: center;
               margin-left: auto;
               margin-right: auto;
              }
         tr {
               vertical-align: top;
              }
         td {
               vertical-align: top;
              }
         .main {
               background-color: #FF0080;
               width: 700px;
               height: 100%;
               border-style: dashed;
               border-top-width: 0px;
               border-bottom-width: 0px;
               border-left-width: 2px;
               border-right-width: 2px;
               border-color: #ffffff;
               padding-top: 0px;
               padding-bottom: 0px;
               padding-left: 10px;
               padding-right: 10px;
               margin-left: auto;
               margin-right: auto;
               margin-bottom: 0px;
              }
         .banner {
               background-color: #000000;
               background-image: url("P90.jpg");
               width: 100%;
               height: 200px;
               border-style: dashed;
               border-top-width: 2px;
               border-bottom-width: 0px;
               border-left-width: 2px;
               border-right-width: 2px;
               border-color: #ffffff;
               padding-left: 0px;
               padding-right: 0px;
               padding-top: 0px;
               padding-bottom: 0px;
              }
         .content {
               width: 100%;
               height: 100%;
               background-color: #000000;
               vertical-align: top;
               margin-top: 0px;
              }
         .spacer {
               width: 100%;
               height: 100%;
               border-style: dashed;
               border-top-width: 2px;
               border-bottom-width: 0px;
               border-left-width: 0px;
               border-right-width: 0px;
               border-color: #ffffff;
              }
         .menu {
               width: 220px;
               height: 100%;
               border-style: dashed;
               border-top-width: 0px;
               border-bottom-width: 2px;
               border-left-width: 2px;
               border-right-width: 2px;
               border-color: #ffffff;
               text-align: center;
              }
         .link {
               width: 220px;
               height: 27px;
               background-image: url("P90.jpg");
               text-align: center;
               vertical-align: top;
              }
         .closepic {
               width: 437px;
               height: 319px;
               background-image: url("P90.jpg");
               filter-: alpha(oopacity=70);
               -m-oz-opacity: .70;
               border-style: dashed;
               border-width: 2px;
               border-top-width: 0px;
               border-color: #ffffff;
               vertical-align: top;
              }
      </style>
   </head>

   <body>
      <div>
         <table class='main' cellpadding='0' cellspacing='0'>
            <tr>

               <td>
                  <table class='banner' cellspacing='0' cellpadding='0'>
                     <tr>
                        <td>
                        </td>
                     </tr>
                  </table>
               </td>
            </tr>

            <tr>
               <td>
                  <table class='content' cellspacing='0' cellpadding='0'>
                     <tr>
                        <td>

<!-- menu -->
<table class='menu' cellpadding='0' cellspacing='0'>
   <tr>
      <td>

         <table class='link'>
            <tr>
               <td>
                  <font style='color: #ffffff;'>
                     Link Here
                  </font>
               </td>
            </tr>
         </table>

      </td>
   </tr>
</table>
<!-- /menu -->

                        </td>
                        <td class='spacer'>
                           l
                        </td>
                        <td>

<!-- closepic -->
<table class='closepic'>
   <tr>
      <td>
      </td>
   </tr>
</table>
<!-- closepic -->

                        </td>
                     </tr>

                  </table>
               </td>
            </tr>
         </table>
      </div>
   </body>

</html>[/code]

Actually, I think it’s ridicules because from my perspective, it shouldn’t be doing that.
Link to comment
Share on other sites

I'm trying to make it so I can just edit the css to change anything. Except I don't know how to do a layout without tables.... I've seen someone on here say something about using pure css, and no tables, but I have no idea how I would do that.
Link to comment
Share on other sites

I personally would rather use tables. To each his own. I of course have my site set up so I can change the whole layout and what not with only three files. I don't like to update all of my pages to change something small, however I greatly enjoy writing html. So for me, those three files will allow me this! Others of course want to change the whole layout and what not with one file, which would be the advantages to using css to control everything!

The way you have it set up, you will be able to change the colors, size, ect. basic stuff.
Link to comment
Share on other sites

  • 3 weeks later...
hey, I cant see you your site on my work computer because of its network settings but it sounds like me and you have the same problem. On IE it leaves big ugly open space inbetween a part of your border? I have found out nothing, I use firefox and everything looks wonderful but IE has an weired issue. GRR. Tell me if you come up with anything, and Ill do the same for you.
Link to comment
Share on other sites

It might be easier to solve the problem if we could actually see some code - or even view the page on an accessible server.

Could be merely a whitespace problem; could be an improperly coded table (unmatched tags, etc.); could be .. almost anything.
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.