1. You are viewing our forum as a guest. For full access please Register. WindowsBBS.com is completely free, paid for by advertisers and donations.

Why Tables Appearance in Win Explorer Wrong?

Discussion in 'Firefox, Thunderbird & SeaMonkey' started by JeffNY, 2009/09/06.

Page 2 of 2
  1. 2009/09/14
    TonyT

    TonyT SuperGeek Staff

    Joined:
    2002/01/18
    Messages:
    9,072
    Likes Received:
    400
    Everything looks as it should in IE8 on Windows 7 Final except for the last menu cell, Site Feedback is aligned left.

    The likely reason for this is width of the cell needs to be increased. As I stated earlier in this thread, you are going to get varied rendering issues on different syustems because you have faikled to declare a font-family for the page. Unless you actually declare the font to be used the browser will use the viewer's defaul font as set in his/her browser. As you know, fonts vary in their width.

    Also, it's best to use table cells as containers and put <p>s in them for text.

    And why the <span> tags if already including text styles in the <td>s?

    Code:
    <td
 style= "vertical-align: top; text-align: center; background-color: rgb(204, 204, 204); width: 100px; "><a
 href= "mailto:statelineriders@yahoo.com?subject=Site%20Feedback "><span
 style= "font-weight: bold; ">Site Feedback</span></a></td>
]
     

    Attached Files:

    Last edited: 2009/09/14
    TonyT,
    #21
  2. 2009/09/14
    The Old Chief Lifetime Subscription

    The Old Chief Inactive

    Joined:
    2004/03/09
    Messages:
    233
    Likes Received:
    6
    I ask about the resolution because in my judgment that is the single most thing that effects how a web page is viewed in a Users Browser.

    We have gone from 640 X 480 to 800 X 600 and now according to most surveys I've seen the most popular and widely used is 1024 X 768. However, I think a whole bunch of us with me being one of them are clinging to 800 X 600 simply because we no longer see as good as we use too.

    I wondered about your using the 850 wide image and menu links because to me that doesn't seem to fit anything.

    If the User is using 800 X 600 then there is over 50 pixels of width they can not see of the right side and if they are using 1024 width then there is a lot of empty space on the right side.

    I decided to take a picture of my monitor to show what I am speaking of and that is at www.raysmyth.net/jeff-2

    I am working on another post and I will let you review this and I'll be back.

    You mentioned using a Text Editor to makes some changes so, perhaps your not are aware you can do that right in the SeaMonkey Composer.

    I'm up to 6 cents now -- Ray
     
    The Old Chief,
    #22


  3. to hide this advert.

  4. 2009/09/14
    The Old Chief Lifetime Subscription

    The Old Chief Inactive

    Joined:
    2004/03/09
    Messages:
    233
    Likes Received:
    6
    I'm Back,

    Jeff regarding what I have said about screen resolution. I use percentage setting in the code when possible and I took your page heading and did it like I would do a web page and used the percentage setting so it makes no difference the Resolution being used the Image and the Menu Link table will always be 95 percent of what ever size screen being used.

    I have a sample of that at www.raysmyth.net/jeff-3 and BTW all the links should work.

    I have stated I don't use the composer of SeaMonkey but, I ran a test and will suggest you try this on a test page if you care to and you should correct your difficulties.

    With your Home Page loaded in SeaMonkey Composer, click on View and Select "HTML Source" Next go down 7 lines where it has <img and delete from <img to where it ends the last table with </table> which is just before the text starts where it says "The Stateline Riders Motorcycle Club:.... "

    After deletion paste in the following code at that spot and save to a new page name or whatever your choice because you should now have the same as is at www.raysmyth.net/jeff-4

    Regardless of screen resolution your 850 pixels image and the menu links will be the same and fill the page to 95 percent of screen width space.

    <!-- Begin Top -->
    <center><img src= "http://www.statelineriders.org/images/stateline_banner_revised.jpg" border=0 width= "95% "></center>
    <!-- End Top -->

    <!-- Begin Table-1 -->
    <center>
    <table border=1 cellpadding=4 bgcolor= "#ffff00" width= "95% ">
    <tr align=center>
    <td width= "15% "><font size=-1 face=arial><b>
    <a href= "http://www.statelineriders.org ">Home</a> </b></font> </td>
    <td width= "19% "><font size=-1 face=arial><b>
    <a href= "http://www.statelineriders.org/results.htm ">Race Results</a> </b></font> </td>
    <td width= "18% "><font size=-1 face=arial><b>
    <a href= "http://www.ride-ny.com/forum/forumdisplay.php?f=98 ">OnLine Forum</a> </b></font> </td>
    <td width= "18% "><font size=-1 face=arial><b>
    <a href= "http://www.statelineriders.org/photos.htm ">Photo Albums</a> </b></font> </td>
    <td width= "15% "><font size=-1 face=arial><b>
    <a href= "http://www.statelineriders.org/oldnews.htm ">Old News</a> </b></font> </td>
    <td width= "15% "><font size=-1 face=arial><b>
    <a href= "http://www.statelineriders.org/links.htm ">Links</a> </b></font> </td>
    </tr></table> </center>
    <!-- End Table-1 -->

    <!-- Begin Table-2 -->
    <center>
    <table border=1 cellpadding=4 bgcolor= "#d9d9d9" width= "95% ">
    <tr align=center>
    <td width= "15% "><font size=-1 face=arial><b>
    <a href= "http://www.statelineriders.org/clubstore.htm ">Club Store</a> </b></font> </td>
    <td width= "28% "><font size=-1 face=arial><b>
    <a href= "http://www.statelineriders.org/emailsignup.htm ">Sign Up for Email Alerts</a> </b></font> </td>
    <td width= "42% "><font size=-1 face=arial><b>
    <a href= "mailto:statelineriders@yahoo.com?subject=Club%20News%20Report ">
    Send In Race Results, Club News &amp; Events</a> </b></font> </td>
    <td width= "15% "><font size=-1 face=arial><b>
    <a href= "mailto:statelineriders@yahoo.com?subject=Site%20Feedback ">
    Site Feedback</a> </b></font> </td>
    </tr></table> </center>
    <!-- End Table-2 -->

    I might offer the following:....
    <table width= "95% "> sets the table to be 95 percent of screen width
    <tr align=center> sets the complete table to center the Menu Link TEXT in the box.
    <td width= "??% "> sets the width of each column.

    Hope this helps your tweaking and Good Luck,

    Two More Cents - Ray
     
    The Old Chief,
    #23
  5. 2009/09/14
    JeffNY

    JeffNY Inactive Thread Starter

    Joined:
    2004/07/22
    Messages:
    133
    Likes Received:
    0
    Ray,

    >>I wondered about your using the 850 wide image and menu links because to me that doesn't seem to fit anything.<<

    That was the width of the header graphic when I took over the web site. Here was the web site when I took over....
    http://statelineriders.org/index20080923.html

    >>If the User is using 800 X 600 then there is over 50 pixels of width they can not see of the right side and if they are using 1024 width then there is a lot of empty space on the right side.<<

    ....But the 850 width seemed "reasonable" given the size (and dpi) of most monitors today. 10 years ago another story :) I figured most people would have at least 850 wide, but yes, if you select a lower resolution like 800 wide you will see some clipping. As far as 1024 wide monitors, there will be some space on the right if you have that one window full screen....I usually have 6 to 10 windows at a time hehehe I like (need) the screen space on the right free so I can select other windows underneath (even on this 15" notebook). But I am also trying to do this web site with basic html stuff. I DONT want to have to use some fancy html editor and or code to the screen to fit or look good on all screen sizes. I have not even thought about how to make that top graphic "variable" size to different screens. The page is the size it is....people will have to adjust to it or not I guess.

    Ray, how come in the second picture (at 800 wide) the text in the 2nd (lower) table looks centered, but in the 1st screen shot you posted above it is not? humm??

    >>You mentioned using a Text Editor to makes some changes so, perhaps your not are aware you can do that right in the SeaMonkey Composer.<<

    I have not used a text editor YET,,,,but yes, I am aware I can use View/HTML Source in SeaMonkey....EXCEPT the first line that sets the Doctype (this line is locked by SeaMonkey for some reason). I have used View/HTML Source to insert a PayPal Donate button and an anchor.

    Generally, I like SeaMonkey very much. Especially for the price, free! :) I just wish it made a few html things easier to do.

    Tony,
    >>Unless you actually declare the font to be used the browser will use the viewer's defaul font as set in his/her browser.<<

    Yes, I haven't played with that yet. But it really hasn't been as issue with users as far as I can tell. I did just have a thought though, I may take Bold attribute off the text in the 2nd table to free up some width the text needs...

    Re-doing the 2nd table from scratch now...

    Jeff

    PS Ray, just saw your post above after I posted the above message. I will go though it...I did take a look at your variable width web page, looks good......I post more later....
     
    Last edited: 2009/09/14
    JeffNY,
    #24
  6. 2009/09/14
    JeffNY

    JeffNY Inactive Thread Starter

    Joined:
    2004/07/22
    Messages:
    133
    Likes Received:
    0
    Ok, here is the same page I had with a new table made from scratch (and a version with non-bold text on 3 or the 4 cells):
    http://statelineriders.org/index-testtable.html

    Can you guys tell me if the text is now centered in the new tables in IE 7 and 8?

    Ray, thanks for the time you spent on the sample page using % instead of fixed width. Let me study it some more and consider how it would fit into our current site, the only real issue I see is that the mailto links appear in red, not blue like the other text...

    But I really appreciate the your time and help on this...

    Jeff
     
    JeffNY,
    #25
  7. 2009/09/14
    The Old Chief Lifetime Subscription

    The Old Chief Inactive

    Joined:
    2004/03/09
    Messages:
    233
    Likes Received:
    6
    What I got in IE 8 is shown at www.raysmyth.net/jeff-5.jpg Which is still off center.

    Jeff, you can make the link color be any of the 16 million you like by changing it in the body tag as shown below.

    <body bgcolor= "#000000" link= "#ce0000" alink= "#00ff00" vlink= "#152dbc ">

    bgcolor= is the color of the back ground for all of the page. 000000 is black - ffffff is White

    link= shown above is the color of the link before it has ever been used, ce0000 shown above is a dull red and my normal color for showing links. ff0000 is fire engine red

    alink= shown above is the color of the link when you are clicking or holding the mouse button down on it. The above code of 00ff00 is Lime Green and my routine color. but, I some times use ff00ff which is a pink. i.e. magenta

    vlink= shown above is the color of the link after is has been used and the 152dbc is a dull blue and my normal color for showing links after being used.

    If no codes are inserted then the browsers default colors are used.

    If interested, a few color numbers available are shown at: http://www.raysmyth.net/htmlhelp/2-by-num.html

    You can also make up your own color by using any 6 letters or numbers or a 6 character combination of both.

    Your sure using a lot of my 2 cents, Ray
     
    The Old Chief,
    #26
  8. 2009/09/14
    JeffNY

    JeffNY Inactive Thread Starter

    Joined:
    2004/07/22
    Messages:
    133
    Likes Received:
    0
    >> What I got in IE 8 is shown at www.raysmyth.net/jeff-5.jpg Which is still off center. <<

    geez....I just don't understand this. One, it only happens in IE and two, the text in the top table centers ok in IE. Crazy. How can IE display one table correctly and the other incorrectly.

    I will spend more time on all this tomorrow....

    Thanks,
    Jeff
     
    JeffNY,
    #27
  9. 2009/09/14
    JeffNY

    JeffNY Inactive Thread Starter

    Joined:
    2004/07/22
    Messages:
    133
    Likes Received:
    0
    Just for kicks I added a 5th table, this one with just one character. I am wondering if the width of some of my text is affecting something:
    http://statelineriders.org/index-testtable.html

    Can some let me know if they are now centered in their cells in IE 7 & 8?
     
    JeffNY,
    #28
  10. 2009/09/15
    The Old Chief Lifetime Subscription

    The Old Chief Inactive

    Joined:
    2004/03/09
    Messages:
    233
    Likes Received:
    6
    The Old Chief,
    #29
  11. 2009/09/15
    The Old Chief Lifetime Subscription

    The Old Chief Inactive

    Joined:
    2004/03/09
    Messages:
    233
    Likes Received:
    6
    Jeff, I saved your latest test page to my H/D and did what I usually do and that is start striping off all the code a piece at a time until it clears up the problem but, in your case I had everything stripped off except for the last bottom table with the 1 2 3 and 4 in it and even had it striped down too 2 columns before I discovered the thing IE don't like.

    The problem is this, the table heading sets the table width to 850px But, the column widths you used are 130 - 170 - 275 - 100px which adds up to 575px total and it matters not what you use in each of the <td width= setting but, to satisfy IE the total for each column must add up to 850px due to table width being set at 850.

    I used 175 - 225 - 300 - 150px which adds up to 850 and all the text centered.

    So, I have now posted your latest test page at www.raysmyth.net/jeff-5 and you will find only the 3rd gray table down is centered because that is the only one I changed and those column width settings all add up to 850 total as stated above and if you look at the source code you will find I have this table separated and commented to make it easy to find.

    I mentioned in my first response how quirky IE is and this is another example of it's quirks.

    Each of your <td column code is center justifying the text and SeaMonkey is recognizing that and following the rules. IE is not and doesn't like it because the total px setting disagrees with the table width setting.

    Nothing to worry about except be aware these situations exist.

    BTW, Your top table centered because it is using 95 - 165 - 165 - 165 -165 - 95px for a total of 850px

    You have now used up all my cents. But, a quirky little mystery problem solved --

    Ray
     
    Last edited: 2009/09/15
    The Old Chief,
    #30
  12. 2009/09/15
    TonyT

    TonyT SuperGeek Staff

    Joined:
    2002/01/18
    Messages:
    9,072
    Likes Received:
    400
    still not centered text in cells in IE8 in 3rd table.
     
    TonyT,
    #31
  13. 2009/09/15
    TonyT

    TonyT SuperGeek Staff

    Joined:
    2002/01/18
    Messages:
    9,072
    Likes Received:
    400
    1. Get rid of <td> widths completely, no need to use that style.

    2. And decide on a font-family and font sizes.

    3. never use the <center> tag, it's depreciated in your doctype (html 4.x).

    4. eliminate all those <span> tags, they are unnecessary.

    5. style= "text-align: left; is NEVER needed for table cells because left is ALWAYS the default.

    6. put this in the <head>
    Code:
    <style type= "text/css ">
html,body,table,th,td {font-family:arial,sans-seeif;}
td {width:auto;}
</style>
    7. eliminate these consecutive tags:
    <small><small><small><small>
    It's a very sloppy.

    8. <div style= "text-align: center; "><br>
    <div style= "text-align: left; ">
    <div style= "text-align: center; "><br>
    </div>
    is incorrect! The closing </div> tag closes this: <div style= "text-align: center; "><br>.

    9. The <br> tag should NOT be used for spacing between elements, use css margin-top or margin-bottom. Or just use an empty paragraph:
    Code:
    <p>&nbsp;</p>
    10. use the top image as a background in a table, see code below.

    This works correctly in IE8
    Code:
    <!DOCTYPE html PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN ">
<html>
<head>
  <meta content= "text/html;charset=ISO-8859-1" http-equiv= "Content-Type ">
  <title>Stateline Riders Motorcycle Club - Home Page</title>

<style type= "text/css ">
html,body,th,td {font-family:arial,sans-serif;}
tbody,tr,td {width:auto;}
</style>

</head>
<body>

<table border= "1" style= "height:120px; width:850px; background-image:url('http://www.statelineriders.org/images/stateline_banner_revised.jpg'); background-repeat:no-repeat; ">
    <tr>
      <td>&nbsp;
      </td>
    </tr>
</table>    

<table border= "1"  style= "width: 850px; background-color: rgb(255, 255, 51); ">
    <tr>
      <td
 style= "vertical-align: top; font-weight: bold;  text-align: center; "><a
 href= "http://www.statelineriders.org/ ">HOME</a><br>
      </td>
      <td
 style= "vertical-align: top; font-weight: bold;  text-align: center; "><a
 href= "http://www.statelineriders.org/results.htm ">RACE RESULTS</a>
      </td>
      <td style= "vertical-align: top; font-weight: bold;  text-align: center; "><a
 href= "http://www.ride-ny.com/forum/forumdisplay.php?f=98 ">ONLINE
FORUM</a> </td>
      <td
 style= "vertical-align: top;  font-weight: bold; text-align: center; "><a
 href= "http://www.statelineriders.org/photos.htm ">PHOTO ALBUMS</a>
      </td>
      <td style= "vertical-align: top;  font-weight: bold;  text-align: center; "><a
 href= "http://www.statelineriders.org/oldnews.htm ">OLD NEWS</a>
      </td>
      <td style= "vertical-align: top;  font-weight: bold; text-align: center; "><a
 href= "http://www.statelineriders.org/links.htm ">LINKS</a>
      </td>
    </tr>
</table>

<table border= "1" 
 style=" width: 850px; background-color: rgb(192, 192, 192); ">
  <tbody>
    <tr>
      <td
 style= "vertical-align: top; font-weight: bold;  text-align: center; "><a
 href= "http://www.statelineriders.org/clubstore.htm ">CLUB STORE</a>
      </td>
      <td
 style= "vertical-align: top; font-weight: bold;  text-align: center; "><a
 href= "http://www.statelineriders.org/emailsignup.htm ">Sign Up for Email Alerts!!</a> </td>
      <td
 style= "vertical-align: top;  font-weight: bold; text-align: center; "><a
 href= "mailto:statelineriders@yahoo.com?subject=Club%20News%20Report ">Send In Race Results, Club News &amp;
Events!!</a></td>
      <td
 style= "vertical-align: top; font-weight: bold; text-align: center;  "><a
 href= "mailto:statelineriders@yahoo.com?subject=Site%20Feedback ">Site Feedback</a></td>
    </tr>
  </tbody>
</table>

</body>
</html>
     
    Last edited: 2009/09/15
    TonyT,
    #32
  14. 2009/09/15
    The Old Chief Lifetime Subscription

    The Old Chief Inactive

    Joined:
    2004/03/09
    Messages:
    233
    Likes Received:
    6
    Tony, are you saying that the 3rd gray table down which is actually to 4th table down and the 2nd table from the bottom is not centered in your IE.

    I am using IE version 8 and the 3rd gray table down is centered in my copy.

    So, can we confirm none of the tables are centered in your IE 8 at www.raysmyth.net/jeff-5

    Thanks, Ray
     
    Last edited: 2009/09/15
    The Old Chief,
    #33
  15. 2009/09/15
    TonyT

    TonyT SuperGeek Staff

    Joined:
    2002/01/18
    Messages:
    9,072
    Likes Received:
    400
    this is how IE8 displays www.raysmyth.net/jeff-5, the table w/ numbers in cells is not centered.
     

    Attached Files:

    TonyT,
    #34
  16. 2009/09/15
    The Old Chief Lifetime Subscription

    The Old Chief Inactive

    Joined:
    2004/03/09
    Messages:
    233
    Likes Received:
    6
    Ok, Thanks Tony, The table with numbers in it is the 5th table down and was not fixed and not expected to be centered so, you had me confused when your previous message said the 3rd table was not centered.

    AND I may have confused people when I said it was the 3rd Gray Table Down because the 3rd Gray Table is actually the 4th table from the top.

    Cheers, Ray
     
    The Old Chief,
    #35
Page 2 of 2

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Accept Learn More...