How can I prevent images from shifting in CSS?

Hi ronpat.

I took a closer look at the code and saw that you used tables. Unfortunately, I cannot use tables for images for this site.

Thanks for your time, though.

Excuse me, liz, but there are no <table>s on the page. The images are inside <div>s. I made appropriate use of the {display:table} and {display:table-cell} CSS properties that mimic the behavior of table tags, but they do not carry the semantic meaning of actual <table> tags. They are very, very commonly used nowadays.

They are NOT the same as HTML <table> tags.

Did you open the files in your browser and see how they behave, or did you only look at the code?

I’m not that well versed in html/css as I’d like. I didn’t know there was a difference between having the tables inside the div. Sorry. I did look and it works just as I want too.

The {display:} CSS property and the values {block,inline-block,table,table-row,table-cell,none,…} and others have been in the specs for a very long time. The {:table,table-row,table-cell,…} and related values were not used for a long time because Microsloth Internet Explorer 7 did not recognize them (do you remember IE7?). It was not until IE7 was declared “dead” that their use fluorished.

This is a not-too-technical info page about the display property and the values available. Be sure to read the notes.
http://www.w3schools.com/cssref/pr_class_display.asp

Like Illustrator, you don’t learn everything about HTML and CSS the first day or even the first year. It’s an ongoing adventure.

2 Likes

I had no idea!

Thanks so much for your help and for helping me learn something new!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.