body id

#1

Hello.

I would like to have a title bar (that has a logo) that is flush with
the top of the browser display window.

My code right now looks like this...

<body id="evalResults">
<div class="logo"><img src="./images/ipeer_logo.png"></div>

The problem is that there seems to be an extra "<br>" before by div
section, so it is not flushed with the top. Please help.

Thank you.

PS when I remove the id="evalResults", the title bar works, but I lose
all the other styles.

#2

An example of what I would like is this:

http://142.103.119.145/top.htm

#3

bigoxygen (AT) gmail (DOT) com wrote:

Quote:

Hello.

I would like to have a title bar (that has a logo) that is flush with
the top of the browser display window.

My code right now looks like this...

body id="evalResults"
div class="logo"><img src="./images/ipeer_logo.png"></div

The problem is that there seems to be an extra "<br>" before by div
section, so it is not flushed with the top. Please help.

Thank you.

PS when I remove the id="evalResults", the title bar works, but I
lose all the other styles.

The problem is probably caused by some part of your page that you
haven't shown us. My first reaction to your PS is that it has something
to do with your CSS for #evalResults--but I have no way to check, since
you haven't made it available. My psychic abilities are regrettably
limited. Please provide a link to the page that is manifesting the problem.

#4

Hi

The page in question...

http://142.103.119.145/test.htm

#5

bigoxygen (AT) gmail (DOT) com wrote:

Quote:

Hi

The page in question...

http://142.103.119.145/test.htm

You've got

body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, Sans-serif;
/* default font-size is also defined in ./css/font/normal.css */
font-size: 76%;
color: #333;
background: #789;
}

and then you've got

#evalResults body {

background-color: #666666;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;

and then

#evalResults div.logo {
width: 100%;
background-color: #778899;
padding: 3px;

but then, finally,

#evalResults {
background: #fff;
margin-left: 0px;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 15px;
}

So you're getting top and bottom margins of 15px for an element with
id="evalResults" because you explicitly declared them in the
/#evalResults/ selector.

Why don't the property values declared for the /#evalResults body/
selector supersede these? Because that selector selects BODY elements
that are INSIDE an element with id="evalResults". If you want that block
of properties to apply to a BODY element HAVING id="evalResults", you
need /body#evalResults/. Values of properties declared for that selector
should override the values of the same properties set for the plain
/#evalResults/ selector.

--
Harlan Messinger
Supporting member of Virginia Concubines for Traditional Marriage

#6

I'm wondering why there still is a thin margin that initiates the
horizontal scrollbars.

http://142.103.119.145/test2.htm

#7

bigoxygen (AT) gmail (DOT) com wrote:

Quote:

I'm wondering why there still is a thin margin that initiates the
horizontal scrollbars.

http://142.103.119.145/test2.htm

Because you've made the body wider (and higher) than the browser pane.
Why did you set a -3px margin on the body?

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

body id

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

body id - 02-14-2005 , 03:25 PM

Re: body id - 02-14-2005 , 03:28 PM

Re: body id - 02-14-2005 , 03:35 PM

Re: body id - 02-14-2005 , 03:51 PM

Re: body id - 02-14-2005 , 04:17 PM

Re: body id - 02-14-2005 , 05:07 PM

Re: body id - 02-14-2005 , 05:35 PM