Why when I change a image format it messes up my site [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 8 years ago.

Improve this question

Ok this is an odd one. I've fixed it but I want to understand why it didn't work. You will have to make the screen smaller as I fixed it by putting a max-height of 255px on the li tags you can take this off if you wish when full screen and will show the same problem.

so here is the first link.

http://madaxedesign.co.uk/dev/portfolio.html

If you look at it smaller or take off the max height it breaks, and doesn't let anything below it float there. notice that the first li img tag has a jpg for the background.

Now for this weird fix :S

I changed the JPG to a PNG and that is all I did.. and it worked http://madaxedesign.co.uk/dev/myWork.html

I don't have any understanding in why it would do this.. and would love someone to explain why changing a format would do something like this as to me it shouldn't matter.

Thanks

Answer 1

You have an interesting problem resulting from a small difference in maths.

If you look at your website in Firefox and you inspect the <li class="corners hide"> element, in the portfolio page, the height computes to be 214.933px, and in the myWork page this value computes to be 210.663px. All the other <li class="corners"> elements evaluate to a height of 210.633 on both pages. As a result, because of how floats work, the slightly taller first float forces the next float to start at its right edge instead of the edge of the parent container.

But Why?

If you look at your jpg, the dimensions are 250x261, and for the png, 250x260, 1px in height taller, that is probably the origin of the maths. All your other background images are 250x260. The maths difference results from using auto to scale the images, a bit tricky.

How to fix it?

Try removing the extra pixel.