[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Changed HTML doctype version and tables don't look right

Posted on 2013-01-25
13
Medium Priority
?
332 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:Tim Titus
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
  • 3
13 Comments
 
LVL 84

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:Tim Titus
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 84

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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Tim Titus
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 84

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:Tim Titus
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 84

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:Tim Titus
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 84

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 2000 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:Tim Titus
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

649 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