Locking the Web Page at the Top

phztfte1 · February 16th, 2016, 09:23 AM

Hi Imar,

How do you lock a web page to the top of the display window? When I open my website in a browser, the default page opens several lines down from the display window. I then have to scroll it to get it to the top of the window. This behavior also applies to the other web pages.

Imar · February 16th, 2016, 10:02 AM

Hi there,

I don't understand what you're asking. Can you elaborate? And maybe post a live URL or screenshot?

Imar

phztfte1 · February 16th, 2016, 10:16 PM

Imar,

The web program is on my personal computer so there is no live URL. I tried to paste the screen shot, but it did not take. I will try to draw what I mean.

__________________________ top of display window
line space
line space
.
.
.
line space
line space
___________________________ top of web page

What I want to do is eliminate the line spaces so that the top of the web page aligns with the top of the display window.

Imar · February 17th, 2016, 04:13 AM

Maybe there are line breaks in your master? Or a top margin in your CSS?

Try posting your screenshot online somewhere, there are plenty of free services that let you do that, and as you know, a picture says more than a thousand words.

Imar

phztfte1 · February 17th, 2016, 09:27 AM

Imar,

I posted the screen shot on Facebook. I opened the account sometime ago but never used it. As you know, my name is Dexter Tom. I do not know if I have to friend you for you to see the post.

I did check the master page and css file and did not find extra line breaks.

Imar · February 17th, 2016, 11:14 AM

There are tens or hundreds of Dexter Toms on Facebook ;-)

Try something like this http://tinypic.com/ or email me the picture directly (my address is in the introduction of the book).

Also, try Firebug for Firefox (http://getfirebug.com/) or other developer tools for other browsers to see where the whitespace is coming from. The HTML Panel allows you to point to the empty space and then show the underlying HTML and CSS which might shed some light.

Imar

phztfte1 · February 18th, 2016, 08:59 AM

Hi Imar,

I sent you an email of the screenshot.

phztfte1 · February 18th, 2016, 11:35 PM

Hi Imar,

Problem fixed. Happy! Happy! Happy!

Thank you very much.

Imar · February 19th, 2016, 06:32 AM

For the benefit of the archive of this forum, would you mind sharing *how* you fixed it?

Imar

phztfte1 · February 19th, 2016, 10:35 PM

Hi Imar,

As you suggested, I looked at the CSS file for styles that could affect the whitespace. Instead of taking them out, I selectively commented out one style at a time, and then requested Default.aspx in the browser. I checked if the line spaces disappeared. If it line spaces did not disappear, I uncommented the style and the commented out the next style, and repeated the process. Eventually, the line spaces disappeared when the following style was commented out:
<code>
h6
{
font-size: 75px;
font-family: Trebuchet MS;
font-style: oblique;
font-weight: bold;
text-align: center;
padding: 0;
}
</code>

Why I had put "padding: 0;" there, I don't recall. But, why would this style cause the line breaks?

I decided to check the MasterPage because that is where I used the <h6> tag. Here's what I saw:

Code:

<header>
    <h6>Kenai River Hale</h6>
</header>

But, I recalled that there is style for the <header> tag in the CSS file. It was

Code:

header
{
  background-color: lightskyblue;
  width: 844px;
  height: 86px;
}

So, it appeared to me that the 'height' in the header style and the 'font-size' in the h6 style were causing the line breaks.

Through trail and error, I modified the header style as follows:

Code:

header
{
  background-color: lightskyblue;
  width: 844px;
  height: 86px;
  font-size: 75px;
  font-family: Trebuchet MS;
  font-style: oblique;
  font-weight: bold;
  text-align: center;
}

and deleted the h6 style.

The code in the MasterPage now became:
<header>
Kenai River Hale
</header>

It works.