HTML table help please

dickiegreen

07-29-2011, 02:38 AM

Hi All,

I have been coding since 1996 and this issue has me completely stumped! :confused:

I thought I was a good table coder but can anyone help?

I habe been trying to integrate a wordpress blog into my site and I am having an issue with a table.

I have stripped it down to a simple html page which includes the different tables that go to make up the header, mid and footer section.

The issue I am having is in IE 8 there is a 1 pixel overlap on the right hand side where the white content area overlaps the bg which is also throwing the bottom right corner out. I just can't figure out what is making this happen and would appreciate if anyone could work out the answer. The code is here: http://www.thisdigital.com/blogtest.html and a screenshot to show it in IE8.

Any help would be much appreciated.

http://www.thisdigital.com/captureissue.jpg

Thanks Dickie

bullant

07-29-2011, 02:46 AM

Using tables for layout might have been the norm in 1996 but is considered by many nowadays to be the "old way" of doing things.

If you use tables for layout, especially nested tables, then imo your code is much more likely to be bloated when compared to using semantically correct html elements and css for layout.

The layout in your image can quite easily be created without tables and instead be created with semantically correct elements and css. The resulting code should be much leaner and easier to maintain/upgrade with future changes.

dickiegreen

07-29-2011, 02:57 AM

Thanks Bullant I appreciate the reply.

Unfortunately I only have a limited knowledge of layouts without using tables and thats why I have gone this route.

Do you think its the fact that there are many nested tables that is causing the issue?

Thanks again :thumbsup:
Dickie

bullant

07-29-2011, 03:04 AM

Do you think its the fact that there are many nested tables that is causing the issue?

It could be. Without going through your code with a fine tooth comb I don't know for sure but nested tables can turn into a nightmare very quickly in terms of maintenance.

If you must use tables for this layout, then hopefully someone else will come along to help. Unfortuantely my attention span is nowhere near long enough nowadays to plough through nested table layouts to fix problems for the reasons I mentioned earlier..

dickiegreen

07-29-2011, 03:11 AM

I have just found the answer after doing some searching.

It was as simple as adding a doc type to the start of the page because IE8 does'n't fare well without one apparently.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> is all I needed to add!

Thanks for your comments bullant they are appreciated.

I can go to bed now :)

bullant

07-29-2011, 03:15 AM

no problem :)

and yep, you need a doctype otherwise IE goes into quirksmode and all sorts of strange things can sometimes happen.

dickiegreen

07-29-2011, 03:37 AM

problem half fixed:confused:

I put the doc type into the header.php file and the main blog page is sorted, however when I click thorugh to an individual post the problem appears on the left and right.

Trying to figure out now where this page gets its doc type from but wordpress installation is complex.

jalarie

07-29-2011, 07:33 PM

You won't get the results you want until you fix the 100 coding errors/warnings shown here: http://validator.w3.org/check?charset=(detect+automatically)&doctype=Inline&group=0&uri=http://www.thisdigital.com/blogtest.html