Graphics/Objects move around on page when published... how to fix?

[Mia_Kirsten]

Why do graphic elements (both placed images and elements drawn in Muse) move around on the page when I Preview and more importantly, export as HTML pages? Chrome and IE also display elements in different spots on my page... and not where I have them placed in Muse. How do I fix this?

[morgan_in_london]

Could you provide screen shots of your Muse site in "Design" mode when it looks as it should appear and then Previewd and Published when things are in the wrong spots?

Also a URL where it can be viewed might be helpful.

I personally can't figure out what it would be based on this information alone, but I am sure that with these someone on here, or even the guys ( Zak, Corey, Julia etc from Adobe ) would be able to offer advice, but we/they need to see what the problem is through images and perhaps a live site to look at code.

If you don't have a site live yet, try post a test site via Business Catalyst. ( It's free)

[Mia_Kirsten]

Thank you very much for contacting me. I would love help on these issues. I have pasted 3 below. My site is on a test server at http://test.locktonaffinity.com/vfwins/index.html. I have pasted specific links below, but many pages have the similar issues with the graphics/boxes not in place where they are supposed to be.

Mia

Issue #1. http://test.locktonaffinity.com/vfwins/life.html - the right side menu… in Design mode the list of products matches up with the red/white arrow bullets, but when previewed and on server, they are all misaligned. It views the same in Chrome and IE.

Issue #2. Examples of graphic elements not displaying on the page as they are supposed to: (VIEW IN CHROME TO SEE THE PROBLEM).

http://test.locktonaffinity.com/vfwins/med-supp.html

http://test.locktonaffinity.com/vfwins/post-insurance.html

http://test.locktonaffinity.com/vfwins/no-cost.html

The image below shows http://test.locktonaffinity.com/vfwins/no-cost.html page in Design mode in Muse. You can see how the boxes are all lined up nice and neat. But when viewed in Chrome, you will see the boxes and alignment are all out of place.

THIS IS HOW THE IMAGE LOOKS IN MUSE DESIGN MODE.

THIS IS HOW THE IMAGE LOOKS IN CHROME.

Issue #3. http://test.locktonaffinity.com/vfwins/vol-ad-d.html

On this page, when viewed in IE, the Menu and red page graphic mis-aligned when page opens. Then, when you scroll up over top the menu it (and the red graphic) align themselves correctly.

IMAGE SHOWS HOW WHEN THE PAGE FIRST LOADS THE MENU AND TOP RED GRAPHIC ARE NOT ALIGNED CORRECTLY.

Mia Wooldridge

Tel: 913.652.7566

mwooldridge@locktonaffinity.com<mailto:mwooldridge@locktonaffinity.com>

From: morgan_in_london

Sent: Thursday, September 13, 2012 3:38 AM

To: Wooldridge, Mia

Subject: Graphics/Objects move around on page when published... how to fix?

Re: Graphics/Objects move around on page when published... how to fix?

created by morgan_in_london<http://forums.adobe.com/people/morgan_in_london> in Help with using Adobe Muse - View the full discussion<http://forums.adobe.com/message/4695315#4695315

[morgan_in_london]

Hi Mia,

Very quickly - thanks for putting up links and screenshots - this might boil down to a Muse v Browser variation issue, whcih I am sure the Muse devs will be able to give clearer guideance on.

However, this section:

THIS IS HOW THE IMAGE LOOKS IN MUSE DESIGN MODE.

cid:image003.jpg@01CD919C.BB3375D0

THIS IS HOW THE IMAGE LOOKS IN CHROME.

cid:image008.jpg@01CD919C.BB3375D0

IMAGE SHOWS HOW WHEN THE PAGE FIRST LOADS THE MENU AND TOP RED GRAPHIC ARE NOT ALIGNED CORRECTLY.

cid:image009.jpg@01CD919C.BB3375D0

All your image links are set up as mail links, so when you click on them it opens up a mail message....could you re-link?

[ColleenLange]

I know this conversation happened over a year ago, but I am having the same problem.

I have a thumbnail menu and a footer that it set up on my masterpage but when you click from link
to link it moves slightly but enough that it is noticable. Does anyone have any ideas on why they are shifting?

Thanks Colleen

http://www.yeah-marketing.com/testing/index.html

[Chewnage]

Hi,

I have a similar issue as above. My layouts jump about slightly. Especially in windows explorer. I can't really figure out why there is any movement. Browser compatability is the only thing I can think of. My layouts are quite simple but I do have a number of placed images on each page and these shift slightly when a page is opened before correcting itself. I think this negatively effects the overall feel of my website. Any advice on keeping images static on the page would be appreciated.

Cheers

[Nymeria01]

I also have a similare issue. My site looks fine in the preview screen. In safari, the images move a little, but not too much to ruin the design. But in Chrome and IE, the images are all over the place.

Any suggestions?

[viveca_grace]

I'd like to bump this thread - I am having a HUGE issue with this right now. I have two html objects (a contact form and a google map) and a photo gallery that keep migrating to a different place in every browser. Everything is lined up perfectly in the design mode of muse. Publish it and it all goes to chaos. I see I'm not the only one with this issue - can somebody please help us out here!

[tobydog20]

Ditto people, I am also having this issue.  Please help.

[adobelance1]

What's the URL for your site where this is happening?

[tobydog20]

http://www.julielam.com/forum/biopage.html

Thanks adobelance for your reply.  If you look at the header/banner on this (and all pages in the site), the placed image (rollover) and the text links (back/menu/next & bio+contact) are not fluid; they do not adjust position with the browser window as the banner does.  Is there any way to fix this in Muse?  I tried slicing in FW, but then reconsidered, thinking that when I place the slices into Muse, the same thing will happen (and also, I didn't know if the rollovers would stay). 

[adobelance1]

I'm not sure what effect you're trying to achieve.

It looks to me like you've got your banner image set as a background image on the browser fill, and everything else is on the page. You've also got your page set to be centered even though there's no visible page.

If you want the banner to move with everything else, make it a image on the page (or page fill background image) instead of a browser fill background image.

If you want the text and other stuff to not move when the browser resizes(like the banner doesn't currently) open up the page properties dialog and uncheck 'center horizontally'.

[tobydog20]

I guess it would have been easier if I explained my objective, sorry adobelance - my goal is to have a webpage that is similar to say the google home page (http://www.google.com), where:

1. the web page is the entire width of the browser window, even when the window is resized.
2. the banner stays put when the window resizes, as it currently is (in the sample link, the banner is a background image fill for a rectangle). 
3. the text and other stuff should not move. 

I did what you said and unchecked "center horizontally", which works to keep the elements from moving, but then neither the page nor the banner extend to the entire width of the browser window.   If I set the browser fill to match the page fill color, it gives the impression that the page is extending the entire browser window width, but the banner still does not. If I try to resize the banner to what looks like the full width of the browser, it still previews with extra space at the end.  Alternatively, if I go to page properties, and reset the width of the page, Muse automatically also resets the browser window to be wider, so that the page width never equals browser width. 

I hope that made sense.  Thanks for your time adobelance, I appreciate the help.

[adobelance1]

tobydog20,

Sounds like you've mostly got what you want now. If you make the banner rectangle 100% width, and set the image to tile or scale to fill, I think you'll have what you want.

This video might help:

http://tv.adobe.com/watch/muse-feature-tour/muse-design-for-flexible-browser-width/

[tobydog20]

Rock on.  Thanks so much Adobelance.  The reason I was having trouble is that I changed it to an image instead of a rectangle fill after your first post; now that I've changed it back to a rectangle fill, unchecked the center on page box, and set the browser fill to the same color as the page fill, it's working.  Thanks again

ps - thanks for the link...had viewed it already, but each time I view it, I learn something new.

[viveca_grace]

Hi adobelance, if you go to the contact page on my site you will see that the html objects and the image gallery are all over the place. In the design mode of adobe muse, everything is lined up/spaced correctly and I locked the position of the objects. When I export and upload the page, the html objects and the image gallery go everywhere, as well as this huge amount of space that opens up near the footer. Please advise I really am not sure what is causing this/what I'm doing wrong....

http://www.carolrenkemd.info/contact-us.html

[adobelance1]

viveca_grace-

I'm not sure what's causing your page to position so strangely. I have a couple of suggestions you could try:

1) Looks like your page was created by Muse 4.0. Try exporting it again from Muse 4.1 to see if that fixes anything.

2) You've inserted several pieces of custom HTML. Try removing them one by one to see if there's a conflict between some of your custom HTML and Muse's positioning logic.

3) If you try both those things without luck, send your .muse file to muse-support@adobe.com so  someone can investigate. If your file is > 20 MB use a filesharing service like SendThis file or Adobe SendNow.

[viveca_grace]

Hi adobelance,

I did re-exort from Muse 4.1 and there was no change. The issue most definitely is with the custom HTML objects, both of them individually are causing the same issue. Now, in addition to the object moving to a weird alignment and causing lots of empty space in the footer, the navigation menu on that page has disappeared as well. I will be sending the muse file, how about how long does it generally take to receive a response from the support team for something like this? I need to be able to give my client a timeframe...thank you for all of your help!

[Fiona_mookie]

I'm having the same problem, graphics move themselves around at will on the Preview - this isn't good enough for a product that's supposed to be out of Beta!

How can I have confidence that it's worth my time developing my website with Muse when the final design may cause people that view my website to have all kinds of navigation problems?! It's completely random too!

Fair enough having a reduced feature-set compared to Dreamweaver etc., but it needs to be reliable!

Also - there's no Stroke features for text! Only text boxes!

Adam

[adobelance1]

adam,

Could you publish your site to a temporary BC site and share the URL so we can see the problems you're describing?

[DrThursday13]

I'm also having this problem. Preview doesn't look like publish mode. Text, widget, rectangle are all moved from their intended location when I publish vs how they were arranged in design mode. Ooph

[DrThursday13]

The rectangle I was using may have been the culprit, as I noticed it was the only element that jumped down the page when I copied and pasted the old to the new. Problem appears to be solved by putting everything back in from scratch.

[DrThursday13]

Spoke too soon... now the mobile site doesn't load on my phone. the device recognition bit of code got scrambled? any suggestions? man, it's getting rough making it across the finish line.

[Trent_Sommerville]

I am having a similar problem.

Facebook like buttons are moving ( if they even publish, but this is a different issue) as well as objects.

It something to do with putting an object  on top of one and another. I have a rectangle behind  a few text  boxes and an another object. If I remove the rectangle they all stay aligned.

The site is www.we-heartfitness.com. Its the right hand side "trending now" box.

Secondly the objects move differently depending on browser.

Any ideas ?

[Sam The Carpet Man®]

Picture 1. Screen shot on a 27" iMac

Picture 2. Screen shot on iPhone 5s

3 total questions

When viewing this page on my iphone, the blue bar at the bottom moves while the text frames stay in place...  (this is while viewing it verticly.  However, viewing it horizontaly shows up fine) or when viewing the page in safari, it shows up fine. 

However, I encounter this issue alot. Sometimes I encounter this problem on a desktop version. 

!. What do you think it could be? 

Two more questions:

2. Why does muse not allow me to pintch zoom on my iphone??  It simply doesnt allow you to zoom in on an iPhone. (some pages only, not all)  However, I could double tab the iPhone screen to zoom in. 

3. Why does the iPhone not allow you to scroll a muse site when touching the composition/slideshow on the page.  For instance, when  viewing a composition/Slide show on an iPhone page, and you want to scroll up to the top or middle, you scroll normaly and when you reach the composition/slideshow section it stops.  I have to put my fingers up and around the compostion for it to scroll.  weird.  I would like to know a work around until i create a mobile version.  Thank You.

The screen shots are of this page below.

http://www.mywaycarpet.com/flooring-coupon-offer.html

Thank You!