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.
Thanks for responding so quickly!
I have attached a before- and after.
When I view site in browser I see the before, then I click door (hyperlink) takes you down a little bit on page but everything shifts left, and if I scroll it is like that all way down- I have checked the document and it is clean, can't find anything that would cause it.
In my after picture I scrolled up so you can compare apples to apples.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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)
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:
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.
North America
Europe, Middle East and Africa
Asia Pacific