Results 1 to 6 of 6
  1. #1
    Join Date
    Jun 2003
    Location
    NC
    Posts
    41

    Pages load oddly

    Lets see if I can explain this correctly...

    Code:
    <table align=center valign=center>
    <tr>
    
    <!--Menu-->
    <td align=center valign=top>
    <img src="image.jpg">
    </td>
    
    <!--Body-->
    <td align=center valign=top>
    Blah Blah Blah<br>
    Blah Blah Blah<br>
    Blah Blah Blah
    </td>
    
    <!--Right Menu(advertisements, specials, etc)-->
    <td align=center valign=top>
    <img src="image.jpg">
    </td>
    
    </tr>
    </table>
    Ok, pages load left to right (well, code from up to down, but rows are from left to right in up to down code... yeah...)

    The left side of a particular site I'm working on loads correctly. Now, depending on how much is inside the center, the right side will (sometimes) not be aligned correctly. It's as if it loads the left, part of the center, and the right, then it loads the rest of the center... so if I had blah x 500 in the center, the right side would slowly move down while the center loads (say the center Blahs were all images).

    If you hit refresh, it corrects itself.

    No big deal if everyone understood to just hit refresh when something looks bad, but considering this happens almost every time on first load, it gives a horrible first impression.

    Any clue how to optimize this so maybe after the page is done loading it'll check to make sure everything is actually aligned correctly? I wouldn't mind the right side moving down as things load and then suddenly shoot back up to the top where it's supposed to be.

    I'll send the website url if no one understands what I'm asking...

    Thanks!

    -Rad

  2. #2
    Join Date
    Jun 2003
    Location
    NC
    Posts
    41
    hmm

    on a second note... the left side td's background image doesn't always want to repeat-y on the first load.

    In the .css file:
    Code:
    .menu_bg {background-image: url(shared_images/bg_repeat_1.jpg); background-repeat: repeat-y;}
    same type of code for the right side. Neither background images want to actually repeat-y the first load, but will after a refresh.

    O.o

    ...

  3. #3
    Join Date
    Jul 2001
    Location
    Canada
    Posts
    1,284
    That's not an uncommon occurance for tables. The apparent correctable misalignment. If the page is long enough often just paging down and back up will correct the display.

    I'm also guessing you aren't using a <!DOCTYPE> on the page, in which case behaviour is unpredictable between browsers. Better to use CSS for layout anyway.

    One thing you should note is that "center" is not a valid value for valign. It should be "middle" if you want it aligned top to bottom.
    "Obsolesence is just a lack of imagination."

  4. #4
    Join Date
    Jun 2003
    Location
    NC
    Posts
    41
    thanks a ton nyteowl.

    it's funny the things you end up overlooking when you teach yourself a coding language (I've never even known about !DOCTYPE as something important after ~6 years of teaching myself =P)

    So now I believe I should use doctype 4.01 traditional:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    because I have css and javascript, along with html and php.

    After about 2 hours of fixing "errors" (according to w3c validation) all the errors are finally gone... one problem though, apparently HEIGHT isn't a valid <table> attribute??

    Using the height attribute I can make my page look like how I want it, but then it becomes "invalid" html 4.01.

    Is there a way through CSS that I can add a style to my table to give it the height attribute?

    thanks!

    -Rad

    (EDIT nevermind, too much code and too much reading was confusing me, I can fix the problem with a height in the td, thanks again )
    Last edited by Rad; 05-20-2005 at 05:47 PM.

  5. #5
    Join Date
    Jul 2001
    Location
    Canada
    Posts
    1,284
    Sure is , you can use height in a css style statment, same way you do width.

    eg. <table style="height: 400px;">, <table style="height: 100%;">

    One caveat - IE seems to handle width/height percentages slightly different than other browsers, even when using a <!DOCTYPE> so best to test both in IE and something else such as Mozilla or Firefox.
    "Obsolesence is just a lack of imagination."

  6. #6
    Join Date
    Jun 2003
    Location
    NC
    Posts
    41
    you're my new favorite

    I test my sites in both IE and firefox (i use firefox as my main, die IE die).

    I need to download netscape and then I'll have all three major bases covered.

    Thanks again!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •