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.

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.

Jeremy

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.