graphic positioning

At the top of a page in xway, I have an item with a background image from a painting, some text, and a graphic of a guitar neck. The painting comes out much smaller when I preview it in a browser. How do I get it to be larger, like it appears in xway? The guitar neck can be smaller, it doesn't need to match.

top of page in xway.png

top of page in browser.png

Hi Leo,

If the box doesn't have a specified height, its height is determined by its content. On reason there could be a difference between Xway's view and the browser view would be if you have added an extended (float: right) property to the graphic of the guitar neck. Xway outputs extended properties, but it doesn't interpret them when displaying a box (as it would do if it supported the property directly). According to CSS rules, floated items do not contribute to the content height of a box, so the browser disregards this (floated) image when calculating the box height.

If you want a box to have a minimum height when it is displayed in a browser, you can specify that by selecting the box and entering a minimum height in the Min/Max Dimensions section of the Box Inspector.

However, I'm partly guessing here - because I can only see screenshots of what the page looks like in Xway and in a browser, and I don't know what settings you have used for the various items. It might be easier to see what is happening if you can upload your page so I can view it in a browser. One way to do this without overwriting your existing site is to create a temporary online folder (you could call it "Test" or "0Test" or something) and upload to that.

I took a look at your earlier version of this document, and one thing I noticed is that you sometimes use multiple space characters to position items: e.g. before and after the guitar neck graphic. Xway currently allows you to do this (as does Freeway), but it's not a good idea because multiple spaces are almost always collapsed to a single space within browsers. If you want to add space before/after images, you can do this by adding left/right margins.


Is that image set as the background of a box, not inserted as an image object? That’s a handy trick for some things; I do that myself. It looks like you’re using Contain as the background size; try Cover instead. It’s also likely to involve some unexpected box sizing in the browser so check what Jeremy wrote too.