- This topic is empty.
August 21, 2014 at 1:24 pm #180166AnonymousInactive
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.
Help would be greatly appreciated! :)
WilhelmAugust 21, 2014 at 2:35 pm #180173
I am on my tablet right now but maybe make sure that the parent of
width: 100%;August 21, 2014 at 4:46 pm #180187AnonymousInactive
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.August 21, 2014 at 5:10 pm #180193
This is one way to handle it.
inline-blockI am sure that flexbox could handle this better.
I think you might need to strip the
heightout of your SVG´s to have them work more consistently across browsers and be responsive. I didnt handle centering the SVG´s inside
Maybe its worth thinking about not using JS to set the height of
.itemand using another
.itemto set the height (If that makes scene).
Remember if you want
.item´s then you need to set the width accordingly. Maybe check out this video.
Hope this helpsAugust 22, 2014 at 3:36 pm #180332AnonymousInactive
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?August 22, 2014 at 5:04 pm #180338
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
When I saw the
tableelement I immediately stripped that away continued from there. Just as a good rule of thumb dont use
tablefor 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.
- The forum ‘CSS’ is closed to new topics and replies.