DOCTYPE and table distortion in IE

DIGITALgimpus · 01-07-2003, 03:39 AM

Added a DOCTYPE 4.01 as below:

Code:

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

Ever since the table with the cinema display is distorted in Internet Explorer and Opera.

Anyone know what's wrong... and why?

Before it was fine, and it still works good in Mozilla and even Netscape 4 (eek)

http://media.accettura.com/home.shtml

Can anyone explain to me what the problem is so that I can avoid this once and for all?

ronaldb66 · 01-07-2003, 08:51 AM

DIGITALgimpus,[list=1][*]What table? There are a lot;[*]What's exactly wrong with it?[/list=1]

DIGITALgimpus · 01-07-2003, 03:30 PM

It's the table with the big Apple CINEMA display (the large computer screen).

For some reason it got distorted, It's still beyond me why this happens.

beetle · 01-07-2003, 03:33 PM

If you are using HTML 4, then I'd suggest going with Strict instead of Transitional. Check your page again after you've revalidated your markup.

Also, I'd remove all those colspan="1" and rowspan="1" and align="left" attributes that many of your cells seem to have. Those are all default values and just uneeded HTML.

Also, the row that takes lines 17-34. If you must use a spacer gif, then at least shorten your markup

<tr>
<td colspan="16"><img src="http://media.accettura.com/gfx/pixel.gif" width="1" height="1"></td>
</tr>

However, do you really need an entire table row just to add in 1px of spacing? This is much easier handled by CSS

body {
margin-top: 1px;
}

DIGITALgimpus · 01-08-2003, 03:45 PM

I'm going with transitional, since the validator doesn't like mouseovers with strict from what I can tell... and to get them to pass causes lots of compatibility problems.

I did clean it up a little based on your suggestions. Will do some more later.

But how can I get rid of that distorted image?

bluephoenix · 01-09-2003, 02:53 AM

you might want to consider using an a:hover and a:active stylesheet to modify the button text, ideally the filter and position attributes. You could eliminate the javascript and get around the Transitional/Strict bug you're encountering. Also, since it's less images that would need to be downloaded it would speed up download time for the page.

http://www.fred.net/dhark/demos/css/..._examples.html