Solved

Changed HTML doctype version and tables don't look right

Posted on 2013-01-25
13
324 Views
Last Modified: 2013-01-25
I was using 4.0 doctype and changes to 4.01 doctype and now my HTML tables don't look the same.
Old doctype:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
New doctype:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

In this implementation, I prefer the tables to look like the old-style HTML table look and feel.  How do I get this back?
0
Comment
Question by:ttitus
  • 5
  • 5
  • 3
13 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 38819747
You could go back to the old DOCTYPE.  But you have discovered that 'newer' or different DOCTYPES actually do have an effect on the display of a page.  XHTML or HTML5 would probably change it even more.

To make it look like it used to with the new DOCTYPE, you have to figure which elements are being rendered different and then find out how to style them to look like you want.  Because the details are in how you did things, I can't give you a simple how-to.
0
 

Author Comment

by:ttitus
ID: 38819865
I can't go back to the old DOCTYPE, as there are some features that I need that are only supported with the new DOCTYPE.

I'm still interested in having a table show up with the old classic-style shadowing.  Is it possible to define CSS that will make a table look this way?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 38819942
Can you show me a screen shot of both ways?  The code for the page or at least enough to demonstrate the effect would be very helpful.  And what browser are you using?  That can make a difference also.
0
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 

Author Comment

by:ttitus
ID: 38820043
I have attached 2 files, one with each doctype.  If you open both in IE, you will see the difference.
Test.htm
Test2.htm
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 38820261
In order to judge, you must have a complete and correct page in the first place.  I have modified your two files as shown below.  The only difference I saw between them in any version was that the default margin on the <body> was different.  The tables weren't different at all.  I'm using IE8.  For what it's worth, there is no difference in Firefox.

'test.htm'
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE>Title goes here</TITLE>
</HEAD>
<BODY>

<table border="1" cellpadding="1" cellspacing="0" summary="">
  <TR>
    <TD>Name</TD>
    <TD>Phone</TD>
  </TR>
  <TR>
    <TD>Tim</TD>
    <TD>x4222</TD>
  </TR>
  <TR>
    <TD>Bob</TD>
    <TD>x4261</TD>
  </TR>
</TABLE>

</BODY>
</HTML>

Open in new window


'test2.htm'
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
  <TITLE>Title goes here</TITLE>
</HEAD>
<BODY>

<table border="1" cellpadding="1" cellspacing="0" summary="">
  <TR>
    <TD>Name</TD>
    <TD>Phone</TD>
  </TR>
  <TR>
    <TD>Tim</TD>
    <TD>x4222</TD>
  </TR>
  <TR>
    <TD>Bob</TD>
    <TD>x4261</TD>
  </TR>
</TABLE>

</BODY>
</HTML>

Open in new window

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38820840
Now that you see how the doctype can affect rendering, youmight want to move up to something from this century, because sooner or later you are going to want HTML5 features, and the difference is huge.  Best to do it as you go along instead of being forced to deal with it under time pressures.

Cd&
0
 

Author Comment

by:ttitus
ID: 38820851
Fine, but does anyone know how to code CSS to make a table look like it used to with shadows for each cell as well as the entire table?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38820946
Perhaps a paleontologist will come along.  It has been a long time since I worked with such relics. If you post a link to the actual page with the problem, then it become slightly easier to see what can be done, but a weakness of the old formats is serious cross-browser issues.

Cd&
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 38820955
The code snippets you posted showed default borders but not 'shadows' so I'm not sure what you're talking about.
0
 

Author Comment

by:ttitus
ID: 38820958
Here's a sample screenshot of what a basic table used to look like -- shadows for each cell and the entire table.  I hate to be viewed as a luddite, but they looked really nice in the old days.
OldTable.bmp
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 38820970
Try this:  You can play with the attributes in the <table> tag to get different looks.  In HTML5, you are expected to do these things in CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
  <TITLE>Title goes here</TITLE>
</HEAD>
<BODY>

<table border="2" cellpadding="1" cellspacing="2" summary="">
  <TR>
    <TD>Name</TD>
    <TD>Phone</TD>
  </TR>
  <TR>
    <TD>Tim</TD>
    <TD>x4222</TD>
  </TR>
  <TR>
    <TD>Bob</TD>
    <TD>x4261</TD>
  </TR>
</TABLE>

</BODY>
</HTML>

Open in new window

0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 38820999
Oh that looks like inset and outset

In the css try:

table {border: 2px outset silver;}
td, th (border:1pc inset silver;}

I don't think of you as a luddite.  I refuse to support mobile specifically; don't own an ipad or iphone and prefer 30+ year old cars.

However I am aware that moving forward always means leaving some things behind.

Cd&
0
 

Author Closing Comment

by:ttitus
ID: 38821001
This is perfect!  Thanks!  My apologies for misleading everyone by talking about shadows when the problem I was having was with the borders!  I'm happy now!
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
css issues with IE 11 8 34
Scroll 5 news at a time. 4 27
ASP server side get value 15 22
Pure CSS popout image menu - want the most beautiful style. 6 22
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question