- This topic is empty.
March 30, 2018 at 3:03 pm #269163Troubled-BeginnerParticipant
It’s my first post here, I hope not to do anything wrong and please excuse if I commit murder to the Oxford dictionary, my english level isn’t very good.
First of all, I’m not a web developer, I’m just a systems engineer who have basic knowledge of web coding. Now I need to make a simple web splash page to use it as a king of bulletin board for our network. We want to show info sometimes when users log into their computers. Te good part is that I knew for sure that this pages will be EVER rendered on a IE 11 under Windows 7 or 10. So, there’s no need to worry about different browsers and even I can use shady tricks that work on IE11 even if they are not recommended.
What I’m trying to do is to mimic the layout of an internal newsletter of the company, so the users recognize those web pop-ups and boss be pleased to see we follow the corporate image. The layout seems easy (to me) but it’s being very frustrating to code, let me describe it:
- The whole newsletter will appear centered horizontally on the browser window
- The newsletter has 4 separated horizontal strips, one over the other, full width (no usual sidebars with content)
- The first strip contains the department name and the company logo
- The second strip contains an icon and the title about the content
- The third strip is where it will be the main content of the newsletter that should be vertically centered
- The fourth strip is a simple footer with basic contact info
- The main content strip is surrounded left and right by a thin border of the same color as on title and footer strips, so it seems to enclose the content.
I searched lots of webpages and tutorials over the Internet about how to code this layout. I finally found the guide about flexbox here on CSS-Tricks webpage. It’s really a very good guide, nice, comprehensive… It allowed me to code the layout I want perfectly… on Firefox. I’ve done it on 4 hours from scratch and after 12 hours more of work I’m unable to replicate the same result over IE11, to ask here is almost my last bullet before I give up.
The problem is that I can’t center vertically the main content. I’ve the whole newsletter centered horizontally on the window. I’ve the 2 header strips (logo and tittle) well positioned on the top of the page and the footer on the bottom. I have also the “borders” left and right of the main content (they really are the background color of the container of the newsletter, I made the main strip a little narrower so they seem to be a color border).
What I can’t do is that the main content appears vertically centered AND taking all the vertical space not occupied by the other strips. With Firefox I found it very fast and easy, creating 2 “filler” flexbox
div>, one over and another under the main content flexbox. So the main one takes all the space it needs for it’s content and the fillers take the remaining space evenly, making the content to be centered. But with IE I only achieve separately the content centered (but with a lot of empty space over and under) or the main strip taking all the space available but it’s content aligned to the top.
I’ve tried lots of combinations of flex, margins, heights and other attributes and I don’t found what’s the key point I’m missing. I know it should be possible, I’ve seen webpages that work in a similar way but to understand their over-bloated CSS-generated code is a nightmare for me. I’ve seen too lots of posts of other people with similar (but not equal) issues and tried to adapt their solutions without success.
Here’s the CodePen link to the last version of the code: https://codepen.io/anon/pen/xWWMKG
It’s NOT the code that worked me with Firefox; that one had a very weirdo output on IE11 so i changed it a lot. The problem are those two cyan and magenta color strips (the filler flexboxes). I changed their color to see what’s going on with them, but they should be white and be in contact with the main central strip and with the top and bottom strips respectively (so the main strip and the two fillers visually seems a whole and alone white box.
I really will appreciate any help anybody could provide. Thank you in advance for the attention.
- The forum ‘CSS’ is closed to new topics and replies.