Removing empty space at top

saphlua

I'm making a Twine game; the passage needs to fill the entire page because I need it to look like various websites. I expanded the height and width of the tw-story element to 100%, but there's a bar of empty space at the top. How do I get rid of it? (Also, is there a way to remove the fade transition between passages?)

Here's my stylesheet so far:

body {
	background: #FFF;
}

tw-sidebar {
	display: none;
}

tw-story {
	width: 100%;
	height: 100%;
}

tw-passage {
	font-family: Monospace;
}

div.menuBar {
	width: 100%;
	height: 40px;
	background: #AAAAAA;
}

pingguo

I am newbie with twine. But I know a few tricks of css.

I suggest to start looking for "margin" and "padding"

greyelf

@saphlua
You need to state which Story Format (name and version) you are using when you ask a question, as answers can be different for each one. Based on the CSS selectors in your example I am assuming you are using Harlowe.

There are a couple of errors/mistakes in your example:

1. background-color is the attribute you should be using if you only want to change the colour of the background.

2. Harlowe sets the default background colour and font-family on the html element, not the body element. It does this because unlike a standard html document it does not use the body element as the parent of it's custom tw-story element.

@pingguo was correct, you need to remove the default margin attributes of the tw-story element. Try something like the following:

html {
	background-color: #FFFFFF;
	font-family: Monospace;
}
tw-story {
	width: 100%;
	height: 100%;
	margin: 0;
}
tw-sidebar {
	display: none;
}

div.menuBar {
	width: 100%;
	height: 40px;
	background-color: #AAAAAA;
}

note: You did not give an example of the HTML you are using for your menuBar so I could only correct the background colour.