PS sliced image table correct in DW and PS-generated html file but corrupted in browsers

Question

I have sliced a jpeg image and made 2 clickable buttons, the top 3/4 of the image and the QR code. PS generates an image table with all the correct dimensions and the buttons work OK. The image and buttons look correct in DreamWeaver and the PS-generated browser html file looks OK, too. BUT when I post the image on the web, a gap of about 20 pixels separates the top and bottom part of the image and another part of the image is misaligned downward about 10 pixels. This is true for Safari, Chrome, and Edge browsers.

PS-generated html:

Appearance in Safari, Chrome, Edge

What's up?

Doug

jane-e · Answer

@Paedia wrote on 25 June

Slices were for the long ago days when we handcoded HTML and tables were used for page layout. Tables are no longer used for html. They were replaced by divs many years ago.

The table tag has not actually been deprecated, but its use for modern websites is discouraged. However, cellpadding has been deprecated. Celll padding controlled the space between the cells, which is the issue you are seeing now. Details here:

https://css-tricks.com/why-do-some-html-elements-become-deprecated/

"Pretty much all HTML table attributes that were used for layouts have been deprecated, such as cellpadding, bgcolor and width."

Jane

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded