Skip navigation
raharris250
Currently Being Moderated

Muse Vertical Website Shift

Jun 1, 2012 3:00 PM

I am creating a vertical one page website with Muse. When I go to preview it all the content shifts left. Is there anyway to fix this. I have read that it may occur due to the browser scroll bar but it really messes my page up.

 
Replies
  • Currently Being Moderated
    Jun 1, 2012 3:51 PM   in reply to raharris250

    Can you post before and after screenshots so we can better understand your issue?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 4, 2012 10:13 AM   in reply to raharris250

    This looks like it has to do with the placement of your anchor. If you look at the bottom of the screenshot you'll notice that the scroll bar along the bottom has shifted along the horizantal axis.

     

    I would guess, based on this screen shot, that you have your anchor placed with an X position larger than 0.

     

    Muse will always attempt to put any anchor whos link has been clicked in the top left corner. If it can't, it will scroll the page so the anchor is as close to the top left corner as it can be.

     

    If you want to avoid horizantal scrolling with your anchors, set the X position to 0 or drag your anchor so it is aligned with the left of your page.

     

    If this dosen't solve your issue, please send your .muse file and a link to this topic to muse-support@adobe.com

    If your file is larger than 20MB use a filesharing service like SendThisFile or Adobe SendNow.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2012 1:40 AM   in reply to T.J. Harrison

    This isn't working for me and I've set all my anchor tags to X=0, and it's still shifting to the left. Any other suggestions to prevent it from shifting to the left?

     

    Site is: www.mrwolfgramm.com

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2012 11:14 AM   in reply to lisiatew

    Edit: I recieved your file. Taking a look.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2012 11:32 AM   in reply to lisiatew

    The content is shifting because you have content that is lower than 0. The drop shadow on your page background causes the content to start at -7 instead of 0.

     

    Because of this, you need to set your anchors X position to be at -7 or lower

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2012 1:20 PM   in reply to T.J. Harrison

    Thanks T.J! I greatly appreciate the prompt response, and I love Muse

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2012 4:02 PM   in reply to lisiatew

    Hi!

    I just send you my file :-)

    I have the same issue and I really don't know what's happening, I don't know what I made wrong, I

    Maybe I should add to my code "overflow-x: hidden"?

    Thank you

     

     


     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2012 4:43 PM   in reply to jeanremy83

    Yours is a slightly different problem. It's a combination of an illusion caused by the pinned menu and a small browser window.

     

    Without getting into it too much, you should find that it will work if you give your anchors a very low number like -500

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2012 5:10 PM   in reply to T.J. Harrison

    Well it works fine! thanx a lot

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2012 5:21 PM   in reply to raharris250

    For everyone on this thread and any future readers:

     

    Sorry for the confusion. This looks like an area that could use some improvement in Muse. I have added this to our list of possible feature improvements.

     

    In the meantime just keep in mind that if you want to restrict your anchors to only move up and down, give it an X value of 0 or lower. It's affected by your design and layout so keep going lower until it works.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 21, 2012 9:00 AM   in reply to T.J. Harrison

    BTW, when I set X to -100, it worked out great for me.

     

    www.mrwolfgramm.com

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 21, 2012 9:09 AM   in reply to lisiatew

    I have tried that also - and nothing is working -

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 21, 2012 10:46 AM   in reply to creative_issues

    theprintersrow, I'll take a look at your file and see if I can isolate what you are running into. Please send your .muse file and a link to this topic to muse-support@adobe.com 

    If your file is larger than 20MB use a filesharing service like SendThisFile or Adobe SendNow.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 21, 2012 2:02 PM   in reply to creative_issues

    Ok, I took a look at your file and I am posting this with the assumption that you're are talking about your umbrella links that take the user back to the top of the page.

     

    Setting these to x: -100 should solve your issue. Doing this will put it in the far upper left corner of your page. It is possible that when this failed to work for you last time you tried, it was because you were looking at a cached (archived) version of your site. Hold down Shift when you click the refresh button to force the browser to load in the newest data.

     

    Let me know if you are still having problems or if you were talking about a different anchor.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 21, 2012 10:24 PM   in reply to T.J. Harrison

    Hi there-

     

    I have done everything - and there is still a bit of a shift to the left - I would like to leave the umbrella where it is at.... I have moved the anchor in several places and nothing is working.

     

    Yes I have refreshed and empted my cached.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 22, 2012 9:21 AM   in reply to creative_issues

    I'm still unsure of the effect that you are aiming for, so we may be miscommunicating based on that. Did making it -100 bring it closer to what you want to do? Is it almost there but not quite?

     

    If so, just lower the number until it works. Try say -200 or -500.

     

    If this isn't the case then I'll need a better definition of what you want to do. Post some screenshots and use Photoshop or another editor to mark them up so I can see what you are trying to do.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 12, 2012 10:53 AM   in reply to T.J. Harrison

    Screen shot 2012-06-22 at 5.28.49 PM.pngScreen shot 2012-06-22 at 5.29.00 PM.png

     

    I am trying to make the umbrella icon to make it go straight up instead it does this shift left..

     

    If you look at my site now: [URL REMOVED]  [ it works fine ] I wanted to add an extra page and now I am getting this anchor issue.  I have moved - recreated - empted cache and nothing seems to want to stop this shifting left

     

    thank you for all your help on this

     

    Message was edited by: Corey@Adobe

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 22, 2012 9:49 AM   in reply to creative_issues

    Ok, so to clarify things, your content is not shifting to the left, rather your scroll bar (along the bottom) is moving to the right. This is happening because the browser window you are using to look at your content is too small for the content.

     

    When a browser window is made small enough, you will see that the bottom horizantal scroll bar is moving to the right in the same way on your current site, so it is behaving in the same manner.

     

    When an anchor is triggered, the browser will do it's best to put the anchor in the upper left corner. If the browser can't move the scroll bars far enough to achieve that, it will move them to their limits.

     

    Again, the solution is to set the anchor's X position to a low value. I know you said you've tried everything but the screenshot above shows that the anchor's position is at an x value that is higher than what you need. If it wasn't then the scroll bar along the bottom would have not moved.

     

    Move the anchor to -500. If this does not work, save your file and send it in again. There may be another issue that I missed.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 12, 2012 9:20 AM   in reply to T.J. Harrison

    I also have a similar issue with a page on my site.

    I have a vertical scroll page with anchored links on the page.

    Each section of the page I have denoted by a vertical solid color rectangular bar.

    In design mode these bars are the correct lenght and position, however in preview I had issues where they were either shifting vertically or after trying out some fixes, which I will list, they now start (I think) at their designated start points but their end point is not that which i have specified.

     

    muse preview issue design view1.jpg muse preview issue1.jpg

     

    Fixes I tried:

    I put the anchors at numbers below 0 - no change

     

    I changed from one continous text box to segmenting the text boxes into section which correspond to the different colored rectangular bars - this, once grouped with corresponding bar and text box, solved the issue of the bars starting in the wrong location but did not fix their their over run at the end as in picture.

     

    I then put the grouped bars inside their respective text box and wrapped text with a margin of 20 - no change

    I then grouped all simialr grouped items together - no change

     

     

    I would greatly appreciate your help and I will forward the site with a link to this thread to muse support.

     

    yours faithfully.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 12, 2012 10:48 AM   in reply to Baisez_moi

    Live text in the browser will layout out to different lengths in different browsers (even when the same font is used). This is simply the reality of each browser having its own code for text layout and line breaking.

     

    That said, the primary reason for the misalignment in your example is differences in rounding of percentage-based leading between browsers. We could have made Muse Design view match Muse Preview, but that would have delayed your discovery of the mis-alignment which would exist and vary between browsers. If you enter a specific whole pixel value (i.e. 17 px) in the leading field Design view will match Preview and at least the line heights across browsers will match. (The line breaks for any lines that wrap to two or more lines may not match.)

     

    When aligning objects with live text, the alignment will always be at risk of being lost due to cross browser differences. The most common workaround for this is to use inline graphics (a graphic pasted into the text flow, possibly with text wrap options set), as you've done, but that approach won't adjust the height of the graphic if the line height or line breaks of the text cause the text to flow longer or shorter across browsers.

     

    For your specific example the simplest approach would be to put a stroke on only the left side of each text frame. By taking that approach the vertical bar will automatically grow or shrink to accommodate changes in the text flow across browsers. A green 15 px left stroke and 21 px left padding provide the same visual appearance and the benefit that the line grows and shrinks with the size of the text frame.

     

    Screen Shot 2012-09-12 at 10.44.18 AM.png

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 12, 2012 11:55 AM   in reply to Zak Williamson (Adobe)

    Many thanks, This was a great help.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 12, 2012 12:44 PM   in reply to Zak Williamson (Adobe)

    I may have been premature with saying that this sorted my problem. I made these corrections and i still get the exact same overhang as before. Is there anything else I am missing? or can it be solved?

     

    The issue still persists in preview, and Firefox, Safari, and IE. with the exact same replication of issue.

     

    I have tried 'Save as' new site, restarting muse, etc.

     

    Please advise.

     

    Many thanks.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 12, 2012 12:54 PM   in reply to Baisez_moi

    Please either provide a screenshot with the text frames selected in Design view or a URL for the published page, or both. Thanks.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 12, 2012 1:22 PM   in reply to Zak Williamson (Adobe)

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 12, 2012 1:29 PM   in reply to Baisez_moi

    To post an image you need to use the browser interface to the forum. The Jive forum software strips all attachments from e-mail replies (thus your post came through as blank).

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 12, 2012 1:43 PM   in reply to Zak Williamson (Adobe)

    From Design:

    adobe issue 4.jpg

     

    From Preview:

    Adobe issue 5.jpg

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 12, 2012 2:05 PM   in reply to Zak Williamson (Adobe)

    I also just resent my .muse file to muse-support.

     

    Many thanks

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 12, 2012 3:43 PM   in reply to Zak Williamson (Adobe)

    I posted the Problem I was having above and continued to try find solutions including changing my design which was not what I wanted. However I'm like a dog with a bone when it comes to trying to solve problems and dont know when to give up.

     

    On looking at the format of my text box and stroke settings I noticed that if I selected the botom text box and dragged it upwards to a position less than what was required for the text a blue dotted line appears at the dropped position but does not let you reduce the size of the text box to less than what is required for the text included. (see picture)

     

    Adobe issue solution.jpg

    Now after this I previewed my site and it appears to resolve my issue with the overhangs I recieved by the box stroke before (see picture below). I dont know what it is that I have done or if it is a viable solution, or even what the initial issue was that caused this so please let me know your thoughts on this and if you have a better educated solution I would be much obliged if you could share them.

     

    Many thanks once again.

     

     

    Preview after bottom of text box modification:

    adobe issue solution preview.jpg

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 13, 2012 9:50 AM   in reply to Baisez_moi

    Drag the height of the text frames in Muse up from the bottom to be shorter than the text. When you release a dotted horizontal line will appear. This is one way to set the minimum height for the text frames.

     

    What's happening is you're using percentage based leading and Preview is truncating (as Chrome and Safari do) whereas Design view is honoring the fractional line height (as Firefox, IE, etc. do). The net result is the text is shorter in Preview than in Design view due to the different in line height. However the text frame will only shrink in height if its minimum height was specified to be small enough to let it shrink.

     

    Some response posted to your other thread here http://forums.adobe.com/message/4694193#4694193.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 8, 2013 12:31 PM   in reply to Zak Williamson (Adobe)

    Please help as I have the same problem

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 13, 2013 7:11 AM   in reply to mattexdj1983

    my apolgies but it has created another issue there is now a scrolling bar on the bottom..

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points