Formatting problems between 1.4.1 and 1.4.2

Comments

• greyelf

  September 2014

  Which web-browser (brand and version) are you using to view the HTML file?
  
  Which Story Format are you using when you build your HTML file?
  (assuming your using the same Story Format in both 1.4.1 and 1.4.2)
  
• Quaay

  September 2014

  Hey there, thanks for the reply. I am using Firefox version 17.0 and I am using Sugarcane for both.
• greyelf

  September 2014

  The Sugarcane Story Format (HTML header) files were changed between version 1.4.1 and 1.4.2.
  
  Two of the changes were: a. to set a viewport property and b. to change the CSS positioning of the #sidebar area from absolute to fixed, and it may be these changes that are causing your problems as Firefox was fixing bugs related to viewport and position-fixed around version 17.
  
  I would suggest updating to a later version of Firefox, if this is not possible then you may be able to use the older Sugarcane header files that come with 1.4.1 within 1.4.2 but this may cause issues.
  
  To try using the Sugarcane header file from 1.4.1 in 1.4.2 do the following after installing 1.4.2 in a different folder/directory than 1.4.1:
  
  1. Rename the 1.4.2 header files.
  To do this locate the folder/directory you installed 1.4.2 in. Beneath this is one named targets and beneath that is one named sugarcane. Within this folder/directory are two files (code.js and header.html), rename them code.js.new and header.html.new respectively.
  
  2. Copy the 1.4.1 header files.
  Locate the similar targets\sugarcane folder/directory below the location you installed the 1.4.1 version of Twine and copy the two files (code.js and header.html) from there into the 1.4.2 targets\sugarcane folder/directory.
• Quaay

  September 2014

  Wow. My Firefox on the office computer sure was outdated. I updated it to version 24.8 but unfortunately that didn't fix the problem at all.
  
  I tried the other solution with the heads but that didn't help either. It definitely changed some things but not in a good way.
  
  Any other ideas?
• greyelf

  September 2014

  Is the width of your browser window greater than 640px because the new 1.4.2 header also included CSS to show the side-bar across the top of the page instead of down the left side if the viewport is less than or equal to 640px.
  
  Could you take a screen capture of the 1.4.2 output and attach it to a post, so I have same idea of what it looks like and if you could also attach an example tws file that produces the problem it would help.
• Quaay

  September 2014

  I would say the width of the browser is definitely greater than 640px. I have attached a screenshot of my output from 1.4.2 before 1.4.1 scripts are added. It is identical to after I add them except for two things: 1, the bookmarks link dissapears after the 1.4.1 scripts are added, and the back button functionality disappears. I have also attached my working .tws file.
• greyelf

  September 2014

  After looking at your Stylesheet passage and the HTML generated I noticed that you forgot to mention that you had used CSS to change the default layout, look and visibility of your story element. The reason your page looks the way it does is because your CSS tells it to.
  
  > but the title of my story appears in large letters in the middle of the page
  This is a result of your "#sidebar #title" and "#sidebar #title #storyTitle" rules, the first uses vertical-align and text-align to center the title and the second rule assigns a large 12em font to the title. End result a large title in middle of screen.

  
#sidebar #title {
display:table-cell;
vertical-align:middle;
text-align:center;
}
#sidebar #title #storyTitle {
font: bold 12em/1.25em Helvetica, "Helvetica Neue", Arial, sans-serif;
letter-spacing: -0.05em;
color:rgba(0,0,0,0.15);
}


  > a bookmarks link is displayed far right of the screen
  Your "#sidebar" rule caused the sidebar to be displayed on the right side of the screen and your "#storymenu, #snapback, #restart, #share, #credits" rule hides parts of the side-bar you did not want to see, so you need to add #bookmark to the second rule to also hide the bookmark link.

  
#storymenu, #snapback, #restart, #share, #credits, #bookmark {
display:none;
}


  > images will not display inline
  As explained on this Twine Wiki page, you can either import your images into your story file or you can reference external images. The format of the img link you used is the imported image version but your sample TWS file contains no images.
  eg.

  
:: Jenga
This is what a pefectly arranged Jenga set looks like.
[img[jenga.jpg]]


  So you need to either import the jenga.jpg image into your story and use the name of the image passage within the link, or you need to host the images somewhere and change the img links to reference them using http://imagehost.com/image_name.jpg within the link.
  
  I hope this helps.
• Quaay

  September 2014

  Okay thanks heaps. Yeah, I was just using a CSS template, so I don't really know what i'm doing yet, but thanks heaps. I'm sure this will help a lot.