#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    721
    Rep Power
    7

    Require to use Transitional?


    Here's a link to the login page in question. You notice there is a horizontal spacing at the top on bottom of the login. If I make my !DOCTYPE HTML5, then I get this, but if I make it Transitional, all appears as desired. The only deprecated items I am using in here are HTML alignment attributes. Anyone know why Transitional appears fine, but not HTML5?

    HTML5:
    <!DOCTYPE HTML>

    Transitional: (Works fine only w/ this)
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    He who knows not and knows not he knows not: he is a fool - shun him. He who knows not and knows he knows not: he is simple - teach him. He who knows and knows not he knows: he is asleep - wake him. He who knows and knows he knows: he is wise - follow him
  2. #2
  3. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,959
    Rep Power
    1014
    Hi,

    you already said it yourself: You're using obsolete/invalid attributes. The aligning is only one part. There's also background. I'm not aware of any HTML version which allowed this for td elements. But maybe that was before my time ...

    I strongly, strongly recommend that you start to write modern and valid HTML/CSS. No offense, but the era of table layouts and visual attributes is long over. It was somewhat acceptable in the 90s, because people simply didn't know any better. But now it's 2014. HTML has changed, and users expect to see modern layouts which work on different devices.

    I also don't get why you made the login form dependend on JavaScript. When I opened the page, the first thing I saw was -- nothing. Only when I turned JavaScript on did the login form pop up.
    Last edited by Jacques1; January 22nd, 2014 at 10:29 PM.
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    721
    Rep Power
    7
    So, the alignment items prolly are the issue. Hmmm... As far as the JavaScript, that was request of the customer. They wished to not see the page loading, so the pages on this site load in the background, then become visible once complete.

    If background is no longer an option for TD, any suggestion what I should use? The main page is merely a 3x3 table. The outer cells hold the border images, and the inner cell holds the page.

    I know I gotta get away from always using tables. Just learned most my HTML back in the 90's when I was in middle school, n kinda stuck with what I first learned.
    He who knows not and knows not he knows not: he is a fool - shun him. He who knows not and knows he knows not: he is simple - teach him. He who knows and knows not he knows: he is asleep - wake him. He who knows and knows he knows: he is wise - follow him
  6. #4
  7. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,959
    Rep Power
    1014
    Use CSS, namely the background-image property.

    The whole story is this:

    Depending on the doctype, browsers render the page in one of three modes: standard, almost-standard and quirks mode. The doctype <!DOCTYPE HTML> (what you call "HTML5") triggers standard mode. The TRANSITIONAL doctype triggers almost-standard or quirks mode.

    Image elements usually have space around them, because they're inline elements. This is the correct behaviour, and this is how they're rendered in standard mode. However, if you change to almost-standard or quirks mode, the browser tries to emulate the bad rendering of ancient browsers. One part of it is to remove the space around images.

    So this is why you get the "correct" layout when switching to TRANSITIONAL. It's not really correct, it's just how pages were rendered in the old times.

    But like I said: The real solution is to write valid HTML and use CSS.
    Last edited by Jacques1; January 23rd, 2014 at 10:17 AM.
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    721
    Rep Power
    7
    I do use CSS, but apparently not for enough. As far as the spacing, I think the reason I am lost is because it is only horizontal between the table rows. There's no spacing vertical between the columns. N to be more odd, why would the upper spacing be more spaced than the lower. The table was drawn clean/basic for its 3x3 size...
    Last edited by Triple_Nothing; January 23rd, 2014 at 10:55 AM.
    He who knows not and knows not he knows not: he is a fool - shun him. He who knows not and knows he knows not: he is simple - teach him. He who knows and knows not he knows: he is asleep - wake him. He who knows and knows he knows: he is wise - follow him
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    721
    Rep Power
    7
    Well, once they got moved to background images, they were no longer an issue...

    Before:
    Code:
    <TD style="vertical-align: top;"><img width="14" height="14" alt="" src="images/bl.png" style="border: 0;"></TD>
    <TD style="vertical-align: top;"><img height="14" alt="" src="images/bottom.png" style="width: 100%;border: 0;"></TD>
    <TD style="vertical-align: top;"><img width="14" height="14" alt="" src="images/br.png" style="border: 0;"></TD>
    After:
    Code:
    <TD style="background-image:url('images/tl.png');background-size: 100% 100%;height: 14px;width: 14px;"></TD>
    <TD style="background-image:url('images/top.png');background-size: 100% 100%;"></TD>
    <TD style="background-image:url('images/tr.png');background-size: 100% 100%;"></TD>
    Last edited by Triple_Nothing; January 23rd, 2014 at 10:54 AM.
    He who knows not and knows not he knows not: he is a fool - shun him. He who knows not and knows he knows not: he is simple - teach him. He who knows and knows not he knows: he is asleep - wake him. He who knows and knows he knows: he is wise - follow him
  12. #7
  13. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,959
    Rep Power
    1014
    Originally Posted by Triple_Nothing
    I do use CSS, but apparently not for enough.
    Only use CSS for styling. All visual attributes (align, background, bgcolor etc.) are dead. The same applies to visual elements like font.

    Nowadays, you strictly separate the content of a document from its visuals. HTML is for the content. That is, you describe the page in terms of headings, paragraphs, lists, articles etc. And then you use CSS to render the page for a specific device.

    This has a whole bunch of benefits over the old approach of mixing the content and the layout:

    • The markup is much cleaner and easier to read.
    • The same document can be rendered in completely different ways (e. g., a browser layout and a print layout). All it takes is to switch the style file.
    • Changing the layout of a document doesn't require you to mess with the markup. Since both are strictly separated, they can be edited independently from each other.
    • Semantic markup makes the document machine-readable. This is important for search engines as well as people who need to use a screenreader (not every person on this planet sees the page with their eyes).
    • CSS is much more powerful than defining an individual style for each element.

    Note that by using style attributes, you more or less break this principle again. It's better than visual attributes, but the real solution is to use an external stylesheet with proper CSS rules.

    This may seem like a purely academical discussion. But it really does make a difference. Bad HTML will cause a lot of trouble and problems.
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    721
    Rep Power
    7
    Ya. Most my CSS does end up in its own file. This one at-hand is nothing more than a 3x3 tic-tac-toe board w/ the page/module content to be displayed in the center cell. I favor keeping my things in separate .css and .js sheets, since it helps organization and cleanliness.

    Well, all was updated and old aligning attributes removed. Thanks for the background-image for the border cells.

    And, perhaps a slight off-topic, if TABLE isn't the best way for me to merely add an image border as I have, what should I look into?
    He who knows not and knows not he knows not: he is a fool - shun him. He who knows not and knows he knows not: he is simple - teach him. He who knows and knows not he knows: he is asleep - wake him. He who knows and knows he knows: he is wise - follow him
  16. #9
  17. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,959
    Rep Power
    1014
    Originally Posted by Triple_Nothing
    And, perhaps a slight off-topic, if TABLE isn't the best way for me to merely add an image border as I have, what should I look into?
    Since your images are really just a white drop shadow, you should look into the box-shadow property which yields exactly that. Another option is border-image. Last but not least, you can use multiple images in the background-image property.

    Which one you choose depends mostly on how important it is to support obsolete and crap browsers. Also note that the Internet Explorer requires special treatment. Instead of supporting standard CSS, Microsoft decided to invent their own way of doing this.
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".

IMN logo majestic logo threadwatch logo seochat tools logo