On the bottom of a course I have some instruction text. It sits within a text box with a colored background. In the ‘Edit Mode’ it looks just like I want it to look (see “A”). However, in ‘Run,’ ‘Preview,’ and the ‘Browser’ modes the text moves up (see “B”). The text also moves up when published.
I realize one way to ‘fix’ it would be to use a shape behind a transparent text box, but I want to know why this is happening and if there is a fix without having to go back through the course.
Ideas? Suggestions? Does it at least happen to others so I know I’m not alone?
This happens in my projects all the time. I’ve learnt to live with it, and most of my pages look completely messed up in edit mode, with text boxes on top of text boxes, in my attempt to make the text look good on publish.
I just commented yesterday, on a thread that has been around for 7 years, and there seems to be much talk of CSS, and web browsers, but I really would love to have confidence that what I see in edit mode, is what will appear in preview and publish.
I’m sorry I don’t have a solution for you, as I’m in the same boat as you.
To play just a bit of devil’s advocate on this one…
Regardless of how a page looks in edit mode, it’s very likely it will look different in all of the browsers. For example, I position a text box in edit mode and it is in the same position in Run Mode.
However, the second I preview in browser, it all falls apart. It’s different in IE, Chrome, Firefox, etc. I’ve attached a typical display for each one. The Run image represents where the text box is in the title editor. Not one of the browsers match the location. Notice that Chrome has the box higher than the Run, then Firefox and IE have near identical locations.
It does totally stink that there are differences, especially in browser preview, that there are so many differences. It means I have to tell my learners that the courses are designed for IE, but there may be differences in appearance across different browsers.
Zip or export as a PKG. Feel free to send it via email (email@example.com) or use a service if the file is too large for the community. If I’m not able to find something I’ll pass it over to support/development for further investigation.