[Solved] Website partly broken in IE and Firefox

[Anonymous]

Hello!
I am currently working on my personal website, http://wilhelmw.se, but as I started testing in other browsers I ran into problems.

In IE (9 and higher) as well as Firefox, the Project part (Projekt in Swedish, the thumbnails) are weirdly sized, plus that the overlay fails to cover the entire div.

I created a pen where you can see an example, if the live example at http://wilhelmw.se isn’t enough.

Help would be greatly appreciated! :)
Best regards,
Wilhelm

[burr]

I am on my tablet right now but maybe make sure that the parent of .item has set width: 100%;

[Anonymous]

The parent has a width of 85% (or 90%, depending on your screen size). I do, however, believe that is irrelevant. I tried with 100%, and it didn’t change anything.

It should be noted that the different items have different widths in IE and Firefox, as in each of them have varied sizes, which also is weird.

[burr]

This is one way to handle it.

Uses floated .items instead of inline-block I am sure that flexbox could handle this better.

I think you might need to strip the width and height out of your SVG´s to have them work more consistently across browsers and be responsive. I didnt handle centering the SVG´s inside .item.

Maybe its worth thinking about not using JS to set the height of .item and using another img inside .item to set the height (If that makes scene).

Remember if you want margin between .item´s then you need to set the width accordingly. Maybe check out this video.

Hope this helps

[Anonymous]

Thank you so much burr!
I used your tips and solved the problem with some tinkering, and while I was at it I manged to simplify the code, also thanks to you! :)
Feels good to move the background-image attribute from the style=”” in the php function to scss mixins :)
I also used the CSS-tricks video you linked, which helped me with the spacing.

Thanks a lot mate! :)

One last thing though – to prevent this from happening again: What was it that IE didn’t like?

[burr]

Your very welcome :-)

To be totally honest I couldnt tell you 100% why it was reacting like this, to guess I would say the combination of using table inside inline-block.

When I saw the table element I immediately stripped that away continued from there. Just as a good rule of thumb dont use table for styling, (use tables for displaying tabular data) in saying that there are many ways to skin a cat and I would recommend keeping an eye on Flexboxfor future projects.

[Author]

Posts