strange space at top of page

[Mark F]

In my stylesheet, body is defined:
body {
background-color: transparent;
color: #000066;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: medium;
margin: 0px;
padding:0px;
}

The first element on the page inside the body is a div tag:
<div id="topnav">
<ul><li><a id="top_nav:_id 0" href="main.jsp" >Home</a></li>
<li><a id="top_nav:_id 2" href="help.jsp" >Help</a></li>
<li><a id="top_nav:_id 4" href="logout.js p">Logout</a></li>
</ul>
</div>

The style for the topnav id (and associated elements):

#topnav{
background-color: #006665;
border-bottom: 2px solid #000000;
color: #FFFFFF;
height: 22px;
text-align: right;
width: 100%;
}

#topnav li{
display: inline;
font-size: smaller;
list-style: none;
}

#topnav li a{
background-color: transparent;
color: #FFFFFF;
margin-right: 15px;
text-decoration: none;
}

#topnav li a:hover{
background-color: transparent;
color: #C0C0C0;
}

The problem is no matter what I try I have a 20px or so space above the
topnav div.

The only way I can get it to go away is to use the firefox webdev
extension and select "disable browser default styles". Can anyone
explain to me what is happening here and how to fix it?

Thanks,
Mark

[vatore]

Re: strange space at top of page


"Mark F" <me@isp.com> wrote:[color=blue]
> In my stylesheet, body is defined:
> body {
> background-color: transparent;
> color: #000066;
> font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
> font-size: medium;
> margin: 0px;
> padding:0px;
> }
>
> The first element on the page inside the body is a div tag:
> <div id="topnav">
> <ul><li><a id="top_nav:_id 0" href="main.jsp" >Home</a></li>
> <li><a id="top_nav:_id 2" href="help.jsp" >Help</a></li>
> <li><a id="top_nav:_id 4" href="logout.js p">Logout</a></li>
> </ul>
> </div>
>
> The style for the topnav id (and associated elements):
>
> #topnav{
> background-color: #006665;
> border-bottom: 2px solid #000000;
> color: #FFFFFF;
> height: 22px;
> text-align: right;
> width: 100%;
> }
>
> The problem is no matter what I try I have a 20px or so space above the
> topnav div.
>
> The only way I can get it to go away is to use the firefox webdev
> extension and select "disable browser default styles". Can anyone
> explain to me what is happening here and how to fix it?
>
> Thanks,
> Mark[/color]

add:
#topnav ul { margin-top: 0; }

Browsers by default add margin to lists and that's why the "disable browser
default styles" disables the top margin.

--
pawel[dot]knapik[at]gmail[dot]com
www.csslayouts.net //version beta

[Jan Roland Eriksson]

Re: strange space at top of page

On Wed, 01 Dec 2004 12:22:56 -0600, Mark F <me@isp.com> wrote:

[...]
[color=blue]
>#topnav{
> background-color: #006665;
> border-bottom: 2px solid #000000;
> color: #FFFFFF;[/color]
margin-top: 0;[color=blue]
> height: 22px;
> text-align: right;
> width: 100%;
>}[/color]

"Braden's Mantra" strikes again :-)

--
Rex