Mansour's November 13th tutorial post in the RSD Tips and Tricks thread demonstrates how to create a panel with content horizontally and vertically centered.

Unfortunately, the CSS code generated by RSD fails in FireFox. On FireFox, the content does not have a top and bottom margin. I wanted to attach a screenshot of this along with a screenshot of what it should look like but the forum wouldn't let me upload the images even though they were both PNG files.

This problem is a known bug in FireFox https://bugzilla.mozilla.org/show_bug.cgi?id=307866 but because it has been known for so long without being fixed, it's unlikely that it will be fixed in the near future. The problem is that FireFox does not correctly handle the height of objects that have a display type set to Table-*.

For RSD, the workaround is to modify main.css.

Here's the before and after CSS code:

Before:


After:


The only change is to add a height property before the min-height property. This works on all browsers I've tried it on. Note that the change should only be applied to elements that have a display type of "table" (or any variant, such as "table-cell").

Curtis

If you are using the new RSD Beta that was made available to RSD users, the new Flexbox functionality takes care of the whole issue for you and it's a lot quicker than fooling with margins.

Brian,

Using Flexbox in RSD Beta exchanges one problem for a set of problems.

Try previewing the Flexbox tutorial (File | New) in IE11. The content that should be centered vertically in the first picture is aligned with the top of the container.

In addition, IE11 renders a "Placeholder Picture" instead of the bottle pictures and the text in the third set of bottle pictures is overlapped. Yes, the tutorial discusses that the text will render incorrectly in IE11 but it doesn't talk about the image not rendering correctly or how the vertically centered content isn't displayed correctly.

Curtis

It is best to NOT modify main.css because it will get overwritten the next time you export. Instead, create custom.css and add the css settings.



Saved custom.css in the css folder. Now, go to the Page Settings and add the link to custom.css in the box for the Head.
<link rel="stylesheet" href="css/custom.css">

When you next export the project, custom.css appears after main.css. Therefore, the settings you made in custom.css will supersede the same ones in main.css.

Brian,

That's a good idea. With a little playing around, I found that all I needed in the custom.css was the setting for the height:

body > .row > [class*='coffee-span-'].column-1 {
height: 553px;
}

I had already written a post-export script that inserts the correct height attribute in the main.css definitions that need it. This way, it works no matter how I rename the components or how many pages I add. But I'll add your idea to my bag of RSD tricks for future use.

Curtis

That's a valid point Curtis, IE11 suffers from a few 'flexbugs'. The good news is that most of them are fixed in Edge

I updated the tutorial with a workaround for this and added a section that describes the issue. We have not updated the beta yet, but you can find the updated tutorial here: http://bob.coffeecup.com/index.html

Let us know if that fixes the issue please!

ps. we could not replicate the 'placeholder' issue you described, would you mind opening a support ticket so we can troubleshoot?

Bob,

The updated tutorial looks good in FF and Chrome. As would be expected, IE11 exhibits the problems that you've documented in the tutorial. The tutorial is much more complete now because it not only demonstrates the problems but discusses the solutions.

Here's a quote you can add to coffeecup.com: "I wish all software products had tutorials that are as detailed and complete as the RSD tutorials."

Curtis

This is not working for me. I can hand code it in an another editor, and see it work, but I can't get RSD to do this. It does display correctly in IE11 here, http://codepen.io/philipwalton/pen/JdvdJE (as linked from that tutorial). But I can't not seem to get RSD to duplicate that method. I do have nested containers with flex position set to column, and all other options that I can, set to centered. Could someone please elaborate, or send up a file I can look at? Seems that the example provided has less flex options specified than RSD requires to be filled.

I am in the BETA version.

Ok - I took a stroll away and banged my head into a wall. I think I was just looking at this the wrong way and still not used to thinking in a Grid System. I didn't read the one paragraph carefully enough. The nested containers are actually the column acting as a container wrapper and then a container inside, correct?