Alignment Discrepancies Between Design & Preview Mode

Hey Gang,
I'm having some buttons shift position in the transition from Design to Preview mode (in Muse and in any web browser). Looks like this:
I. View In Design Mode
II. View In Preview Mode
Any idea as to why this might be happening?
All The Best,
And.

LOL..... so this has been going on for almost two years.......... I'm so freakin' amazed I'm almost speechless..... (almost)
Why is there a difference between Muse Layout and Web Layout?
Text position different when previewing in browser?
Text Position Shifting in Preveiw Mode and Browser Preview
And there's more but you get the point.... as a go back in time I see that this thing is nothing new....
Ya know... at first I scoffed at all the folks that griped about Adobe this and Adobe that... and even posted how I felt the CC was great with so many advantages...
but now I'm beginning to see the light and now begin to understand what that was all about... you know... until it happens to you, everything is all right.
I'm just so baffled as to why a solution to this ( what I believe ) is not a minor issue cannot be resolved by the all powerful and great Adobe?????
I introduced 2 others to Creative Cloud, especially for Muse and Indesign, and they're having the same problem... how the hell to I answer them?
Do I just send them those BS Typkit explanation links about "Font Metrics & Various Browsers"? Oh, of course, that'll make them feel much better... ya know, once
they understand why it's happening.
They keep adding updates with all kinds of new features... but I can't get my text aligned (without playing with it forever). Am I nuts? Ok, it's me...
2 G_D DAMM YEARS!!! Did you hear that? 2 YEARS!!!!
If this thing is not corrected by the end of this year..... I will cease payment to them, and let them do what they have to do to try and collect the penalty for early termination.
I'll spend 3 months re-doing any Adobe Product work I've done with pleasure rather then be crapped on by them.

Similar Messages

Javascript works in Designer preview mode, but not when invoked via process

I have a fragment consisting of a subform and a text object. The subform has the following Javascript for its initialize event:
var cars = $data.input.cars.car.all;
var showMe = false;
for (var i = 0; i < cars.length; i++) {
if(cars.item(i).color && cars.item(i).color.value == 'RED')
showMe = true;
break;
if(!showMe) {
this.presence = 'hidden';
The code is supposed to loop through all my input XML data's cars, see if each car has a color element, and if so, see if the color is RED. If any of the cars have a color of RED, the fragment should be visible. Otherwise, it should be hidden.
The Javascript works fine when I preview the fragment in Designer using a sample XML input file with no color element (i.e. the text in the fragment is hidden).
The Javascript works fine in my main document (which has the fragment included in it) when in preview mode in Designer.
The Javascript does not work when I invoke my process in LiveCycle server. I pass in data that has 1 car without a color element, and for some reason my fragment is visible.
Is there something wrong with my Javascript? Is this the wrong way to check to see if an XML element is present? Is something else wrong?
Any help would be appreciated!
Thanks,
Andy

I guess a more appropriate question might be: How can I tell if my XML input data does or does not contain an element? Let's say I have <input> <cars> <car> <make>VW</make> </car> </cars> </input> How can I use Javascript to safely determine if the car has a <color> element?

Masters not applying to pages, discrepancy between design and preview mode

Hi there,
I am having a crazy time with Muse, please please help me... I see some of you have looked at the post, but no help yet. Please don't let me down. SOOO confused!
1) Master pages are not fully applying to the pages I assign, only parts of them.
Above you can see that the sub-pages and the "WORK" page all have the C-Master applied to them, but then you look at one of those pages and not all of the features are there.
Above is the C-Master page
Above is one of those sub-pages (coffee tables) with the C-master applied, yet the navigation menu is missing!?!?
2) Also the formatting is completely on the third image is completely wrong. There is extra space at the bottom of the page and yet I cannot move the page toggles to be the same as it is on the master. These formatting/margin/page size issues run throughout my pages and I cannot get them to all be the same! HELP!
3) The page looks different in the design mode than it does in the preview mode.
I am so confused and have gone through this from scratch once before thinking I did something wrong but I have had the same result.
Please help me!!!
Thank you!!
- Carly

Hi Parikshit,
The sticky footer sounded promising, but it didn't change anything. I still can't move those bottom toggles to be at the desired ruler mark.
As for the margins... Its my understanding that whatever you have in a master page will be applied to the pages you assign, but the content and spacing is different. There is no content that would push the page to extend further down, which I have seen done before. And because I cannot individually move the toggles I have no way of adjusting the spacing. I am going for a seamless look between pages, where the size and content of the page remains the same while the images in my portfolio change.
Even if I go to Page > Page Properies and try to enter the correct numbers, it still doesn't affect the page.
Does that clarify?
Also, I am running 7.1 on a Mac OS 10.9...does that have something to do with it?
Thank you so much for responding!
- Carly

Type shift between design mode and preview mode in Muse.

My type shifts / moves positions between design and preview modes. It then justifies differently in differnet Web Browsers. This mean I end up positioning things incorrectly in design mode to accommodate the error when published. I am using the Droid Sans Websafe font from Typekit but it doesn't seem to matter which font is used as the bug still occurs. See the attached images; the left is in Design and the other in Preview. See how the formatting shifts within the software. Also the weight of the headline FORDNESS changes slighlty. On other pages, this headline shifts a few pixels across and down. Any suggestions?

Hi,
Text layout and rendering varies from browser-to-browser (and between Muse Design and Preview modes). This may come as a suprise if you have a Print background, but is the reality of the web medium. I'll point you to some previous forum posts that may be instructive.
Layout shifts because of line-break changes
http://forums.adobe.com/message/6032336#6032336
Layout shifts because of font metrics
http://forums.adobe.com/message/6045303#6045303
Text rendering differences (general)
http://forums.adobe.com/message/4778838#4778838
Text thickening (specific to Safari)
http://forums.adobe.com/message/5862858#5862858
Hope this helps.
Abhishek

Issues between Design mode and Preview mode

SERIOUS issues going from Design to Preview in Muse. Line breaks change, objects on the page shift, etc. This happens when I look at my page in the preview mode through Muse, as well as when I preview the page in a browser. I also get a warning message saying there is a font being used that is not installed and has been replaced. This is a font that I do, in fact, have installed on my system, but after getting the error message so many times, I re-formatted all text to a Web Font called Questrial, and still get the error message referring to the previous font. SO FRUSTRATING. Any ideas?

I have this problem where the images are not appearing or are appearing cropped.

Text Field location differs on design view and preview mode

I am using Adobe LiveCycle Desginer ES. I am updating forms currently created in Livecycle 6 and 7. I am noticing the text fields are lower on the preview mode than where I have placed them on the design mode. In design mode, they are perfectly in line with the other text. When going to preview they are off anywhere from a couple centimeters to a couple inches. I have started over with new forms and had this same problem.
This issue mostly occurs when I have a text box with a large amount of text and I place text fields over the text boxes. Has anyone had this issue also? If so, is there a solution? This issue never happened in 6 or 7, I am only seeing this issue in the ES version.
Any help would be appreciated. (I am willing to recreate the forms, but that has the same issue also.)

In version 7 there were updates made to the text engine. There were situations where things did not align correctly. To solve this there was an option added to allow you to revert back to the old engine. To do this go into the File/Form Properties/Compatibility then click on the button for the Revert Text Formatting and try your form again.
Note that at some point in time you should update your form to use the new engine and stop using the version 6 of Reader/Acrobat.
Hope that helps
Paul

Muse "Design" Mode vs "Preview" Mode

I spent time carefully laying out a page in the "Design" mode in Adobe Muse -- and then when I go into "Preview" mode to see how it will look, the layout is completely messed up -- text, objects, photos are not aligned, nothing is where I placed it. Why is this, and how do I work around it?

Moving to Help with using Adobe Muse CC
The Cloud forum is not about using individual programs
The Cloud forum is about the Cloud as a delivery & install process
If you will start at the Forums Index https://forums.adobe.com/welcome
You will be able to select a forum for the specific Adobe product(s) you use
Click the "down arrow" symbol on the right (where it says All communities) to open the drop down list and scroll

Looks good in design and preview mode, online there is box in lower right corner! How to find box and delete it?

www.nssgranite.com
Online, scrolling down and to the right, there is a white box that is linked to a different web site of mine. I don't want that box to be there, but I can't find it in design mode nor preview mode when working with the Muse program. Where is it?? I want to delete it!!

Thank you. However, I went in, expanded every single layer and did not see anything that was missing it's "eye". I clicked and unclicked everything that was a rectangle and found one rectangle that didn't seem to have representation on the screen. I deleted this rectangle from the layers box, uploaded the site to the internet hoping for the best, and unfortunately this did not solve the problem.
I wonder, should I just create a new page from scratch to replace this page?
I don't know if you've seen my other question, but this isn't the only problem I am having with my Muse site. The layout is distorted on all but a select size of screen, and most likely I am going to have to revamp things quite a bit to make them work on the average computer display.
Thank you for any further suggestions because I am totally open to other thoughts on this!!

Footer extends longer in Preview Mode then in Design Mode

I have attached two JPEGS that show my footer in "Design" mode and in "Preview" mode.
In "Design" mode the footer is perfect. It is the size and distance it needs to be at. However, when viewing it in "Preview Mode", the footer extends downward farther then it should. I've looked all over the page to see if there was something from another graphic or image or shape that could be extending downward and I don't see anything.
Take a look at both images and tell me why this is happening? I did have a lightbox gallary on this page. I thought that the gallery was extending it downward so I removed it to test my theory. Even after removing it, it still does not work the way it should.
Craig
Message was edited by: MUSE Worker

Like Vikas said:
Check if you have Sticky Footer enabled:
File > Site Properties
Page > Page Properties (for master and child pages)
Let me know if neither of those work, it could be that you just need to preview in browser to see what the true height will be in the footer.
Hope this helps!
Julia

Elements in Design Mode and Preview Mode are Different

I've encountered an irritating problem in Muse. The elements arranged in design mode are shifting erratically in preview mode. I'm trying to set up "buy" links for my client's CDs using amazon, cdbaby, itunes icons. The buy buttons are place below the audio player widget from MuseGrid. Right now they are just pics - no hyperlinks attributed. If anyone has advice, I'd be grateful as this problem is driving me nuts and costing me hours!!! I am using the
Design Mode Preview Mode

Hi,
Please try grouping the objects on the page. It resolved such issues in most cases.
Regards,
Aish

My background image isn't lining up between my design, preview, and web preview. HELP!

I'm new to using Muse and have spent the afternoon going through online tutorials etc. I understand the fundamentals of adding an image to use as a background, but when I upload the image, it lines up completely different in design, preview, and web preview screens. I've been playing around with different settings but I can't for the life of me figure how to make my preview and web preview look like my design page.
Below are design page, preview page, web preview.
I'm sure there is some fundamental piece I'm missing here as I can't seem to find any threads with the same question being posed. If I had hair, I'd be pulling it our right about now.

1) Resize your image in Photoshop to the maximum width you require for browser display (probably ~1600px, but certainly less than than 2560px) and use Save for Web to create a JPEG of it with the lowest JPEG quality rating you can stand (or your initial page load times will be slow) and import that back into Muse. (The most likely reason the Muse Preview is blank is that this image is too large, in terms of number of total number of pixels.)
2) In the Browser Fill panel in the Fitting options popup menu choose "Scale to Fill". Scale to fill will scale the image up proportionally such that none of the black background shows. If the aspect ratio of the browser window is different than the image, then a portion of the width or height of the image will be cropped. What portion is determined by how the image is aligned using the "Position:" control in the Browser Fill panel.
Because browser window sizes vary (since they're user resizable) the display of the image will be different than what is seen in Muse Design view. However, the letterboxing/pillarboxing effect in the screenshot you provided is due to the Fitting Option being set to "Scale to Fit" rather than "Scale to Fill".

LiveCycle Designer won't preview with Reader DC. Preview mode will not work. Attempting to preview gets errors (507:507), (103:103), and sometimes crashes LiveCycle Designer. How do i get preview mode?

I can not get LiveCycle's preview mode to work. It has worked in the past, but now with Reader DC i can't use preview mode. How do i get Adobe LiveCycle designer to work with Reader DC?

nikg-fh schrieb:
it seems the problem is caused directly by adobe reader X.
I just have started a new descussion here (adobe reader forum).
If anyone could help me, feel free to do so!
my configuration:
windows xp pro
adobe reader x
adobe livecycle designer 9 ( therefore it is not an version 8 issue )
admin rights on the pc ; )
I might add that you are not alone!
I am having the same problem (LSD ES2 (version 9.0.0....) and Adobe Reader X and Acrobat Professional 8)
Whenever I save a form as PDF and open it with Reader or Acrobat I get to see the console.
But never when I view the form in Designer preview!
That used to work until I installed Reader X.
Same as you I checked all configurations in Reader and Acrobat: all perfect.
I really do hope that someone finds a solution for this.
PS. This problem should be discussed in THIS forum. It is clearly a Designer problem!

How come that the design mode looks different than preview mode with slideshows?

hello,
I am placing a slideshow on the site. when I look in the preview mode the slideshow is not exactly in the same place.
How come? Am I doing somthing wrong?
thanks for response

Welcome to the medium that is the web. Every browser has it's own text layout engine and "web-safe" fonts are a misnomer. You cannot rely on text line breaking the same in different browsers. Thus creating text frames that snuggly fit the text within is likely to result in what's occurring on your site in some browsers or browser versions.
As a general rule, you should attempt to use Web Fonts whenever you can. Use "Web Safe" fonts as a second choice. And only use System fonts as a last resort and only for small amounts of text (since they become an image when output).
If you want a specific portion of text to absolutely never go to two lines, you'll want to put it in a text frame that significantly wider than the text so when the line length varies the text doesn't wrap to a new line.
"Web Safe" fonts are not a single font but actually a list/stack of fonts where the browser goes through the list until it finds a font that's available on the current viewer's device. The fonts in the list/stack are similar in visual appearance and font metrics, but any difference in font metrics is sufficient to result in changes in line breaks, so when using web safe fonts you need to account for much larger variations in line length and line breaking than will occur when using a Web Font.

Anchor points don't align vertically in Preview mode

When I'm in Preview mode, the scroll feature doesn't go to where I've placed my anchor points. How can I make the anchor points more precise.

Hi Stephen,
Can you please refer to this link and read through the first 2 sections which explains about the working of anchor links and how they should be positioned so that their active state is achieved :-
Adobe Muse Help | Creating Hyperlinks
Let me know if you are still experiencing any issues.
Regards,
Rohit Nair

Exported swf formatting differs from preview mode

When I view a model in preview mode, everything looks fine with the formatting. However, after exporting the file (or viewing the export preview), some of the formatting is incorrect - such as axes labels and titles being truncated or moved from their original position, as well as grid sizes changing so that what I have aligned no longer is aligned.
I can make formatting adjustments in the model so that it appears more properly in the exported swf file, basically correcting for these differences. However, this is obviously not ideal, and I have not been able to identify any patterns in these discrepancies (sometimes it looks fine, other time not). I appreciate any suggestions!

Hi,
I am facing the same issue too. The whole formatting goes off once exported to ppt. The fonts reduce to such an extent that I cannot see the fonts. If I drag the swf component to full screen in ppt, the labels, come over the axes.
Please let me know how to correct it.

Alignment Discrepancies Between Design & Preview Mode

Similar Messages

Maybe you are looking for