Responsive table adding spacing

[backburnermarketing]

I have an html page set up to display a table of images to appear as one large image and some images change on mouseover. I added the following code to make the page responsive, but once I did that it seemed to add padding between the rows. Can anyone figure out the problem. I am baffled. This is the responsive code I used (sorry, this system won’t allow me to paste the entire page code).

<style>
		table{ border-collapse: collapse; width: 100% }

		@media screen and (max-width: 320px){


			table { display: block; }
			td{ display: block; padding: 0; cellpadding="0" cellspacing="0" border: none; }
			td img{ display: block; margin: 0; width: 100%; max-width: none; }

		}

		img{ max-width: 100%; height: auto; width: auto\\9; /* ie8 */ }

	</style>

[PaulOB]

Hi, welcome to the forums

I’m afraid that snippet of code on its own is not enough to help us reproduce your problem.

You should be able to post the relevant css and html into your post assuming it isn’t too large. You need to use the code formatting option in the editor to enclose your code (</>).

It would be better still if we could see the page in question or perhaps a cut down codepen that exhibits the problem. Codepen is free and a good way to show code snippets.

The css you posted is above is invalid as you have added cellspacing and cellpadding attributes into the css. they are html attributes not css.

I’ve commented them out here and they should be removed.

  td {
    display: block;
    padding: 0;
   /* cellpadding="0" 
    cellspacing="0"*/
    border: none;
  }

Those incorrect attribute will also corrupt the next property/value that follow in that declaration.

If those attributes were in the table tag of the html they would probably solve your problem but they are deprecated and you should do this instead.

table{border-collapse: collapse;}/* you already have this one */
td{padding:0;}
img{display:block;}

I also note that your media query has a max-width of 320px (@media screen and (max-width: 320px){) which means that you are probably only targeting old phones as there are very few these days that are 320px in width (I believe the iphone 4 was 320px).

You need to use a breakpoint at the point that your design fails to work and not based on some imaginary device width.

Note the following code is a hack from about 10 years ago for IE8 and should not be seen in production sites today as support for IE has more or less finished completely (ie11 is still lingering but poorly supported these days). IE8 didn’t support media queries anyway unless you polyfilled with js support.

@backburnermarketing

width: auto\\9; /* ie8 */

However, I doubt any of the above is related to your problem so it would be good to see the whole page or as mentioned a codepen of the problem.

It looks as mentioned like you probably need to set the images to display:block and remove the padding from the td.

td{padding:0}
img{display:block}

If that doesn’t solve the problem or you want more help then just shout

[backburnermarketing]

Ugh. The code editor isn’t letting me post the full code either. The system won’t allow anything embedded (I’m guessing it is because of the images referenced).

[backburnermarketing]

I created a codepen. I’ve never used this before, so hopefully I set it up correctly.

[PaulOB]

@backburnermarketing

so hopefully I set it up correctly.

Good attempt for a first try (You really only need html in the html panel just from the body onwards and then you put css in the css panel and js in the js panel but do not include the style tags or script tags in those separate panels.)

Anyway I need to ask a couple of questions about this layout.

Firstly you say adding the CSS code changed the page so I assume that removing the css code will show me what it was like before?

I’ve added some dummy images just to test and I see this layout.

Is that the vertical gap you are talking about between the 2 images on the left of that screenshot?

If I remove all the CSS I see this layout.

Was that how it looked to you before (bearing in mind I only added a couple of dummy images)?

If so then you will notice that the images are the same height and therefore there is no gap above or below. The problem with this approach is that the images are squished and you can’t really place real world images like that You have to maintain the image’s inherent aspect ratio.

It may be that I am not seeing what you really have in the full page so bear with me.

The code that is making the difference in the first example is this rule.

img {
  max-width: 100%;
  height: auto;
  width: auto\\9; /* ie8 */
}

Ignore the ie hack as that is nonsense these days and should be removed. The height:auto on the image means the image will maintain its aspect ratio and will not stretch to the full height of the cell. If you remove the height:auto the image will stretch but of course it will not look right.

As I mentioned in my first post you would still need the following css.

td{padding:0}
img{display:block;}

You would also need to address the media query issue I pointed out.

I also wonder whether you have the viewport meta tag in place because without it media queries will not work properly and is the first thing that must be added when dealing with various devices?

This must go in the head.

<meta name="viewport" content="width=device-width, initial-scale=1">

It seems to me that you are using a very old Dreamweaver page (probably 15 years old) and are using js for things that css may be able to do although I was unable to test that aspect in the codepen. It might be time for a re-think to modern standards as tables for layout is semantically incorrect and not something that has been used for the last 20 years.

I realise this may be an old site so you may just have to stick with it and fix the problems in situ.

I’ve thrown a lot at you in this thread but what would help is to see a fully working demo. I assume you have this online somewhere?

Back tomorrow now as its late

[backburnermarketing]

You are awesome!
Yes, your image examples are accurate. I added the code you suggested and tried eliminating “img{ max-width: 100%; height: auto; width: auto\9; /* ie8 */ }”, but that makes the page unresponsive.

I have uploaded the page onto our site so you can see it. I still get white spacing between the rows.

Again, thank you so much for your in-depth replies. I appreciate the lessons.

[backburnermarketing]

I forgot to include the link
https://backburnermarketing.com/ARP/full_scene.html

[PaulOB]

@backburnermarketing

I forgot to include the link

Great that makes things easier

Ok, first thing I want you to do is to remove all your css and then just add this css only.

table{border-collapse:separate;border-spacing:0;width:100%;}
tr{height:auto;}
img{width:100%;height:auto;display:block;margin-bottom:-1px}
td{padding:0;}

If you do that then your page will look like the following screenshots at small size and large size.

The bigger question is what you expect to look like on a small mobile like the iphone SE.

With my code above it will look like this.

That is quite small but to be honest there is little you can do as you need the whole image in order for this to work. (Your previous media query just stacked elements vertically and made no sense at all.)

You will have to let me know how you want it to look at the smaller screen size but I can’t see anyway to do it unless you swap for a different image with different effects.

[backburnermarketing]

OMG that worked!!! You are a life saver. For now, the mobile version will be this image until the client wants to pay for a separate mobile version. Mouseover obviously doesn’t work on mobile, so I’m going to try and add onclicks as well. If I can ever help you with anything in the marketing field, please don’t hesitate to reach out to me. I owe you one!

[backburnermarketing]

@PaulOB

Hi Paul! Sorry to bother you. I’ve added in the popups on click. The page works great–except in Firefox and Chrome. The farthest right small light makes the page go wonky on mouseover. I’m not sure why. I don’t see anything different in the code for that light. Do you see anything wrong?

https://backburnermarketing.com/ARP/full_scene.html

[PaulOB]

This image seems to be the wrong size. It’s not as tall as the others and is wider.

All the others are the same size.

The aspect ratio needs to be the same for each. Make the brickwork the same size behind each logo and then just sit the logo on it.

[backburnermarketing]

That’s very odd. I made them all at the same time. I will look at it. Thanks!

[PaulOB]

@backburnermarketing

That’s very odd. I made them all at the same time.

I don’t remember you having a different size there before and I’m sure it was all working originally when I tested locally before. Maybe I just missed that one image but it seems too obvious to miss.

[backburnermarketing]

That was the issue. I am baffled as to why that one was different. I didn’t even look at sizes. The way I made them in PSD should have been the same all around. Whatever. Thanks again!