Member Avatar for moerpheus

hi,
I have a header on my website. Whenever i add a tag in side the header an annoying white space forms above it. This happens only in firefox:

CSS:

body,html{margin:0;
           padding:0;
           width:100%}
#head{ width:100%;
        height:auto;
		padding:0;
		margin:0;
		background:#09F}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="styles/general.css" />
<title>PSPF Intranet system</title>
</head>

<body>
          <div id="head">
             <div id="menubar">
                <ul>
                  <li>Item1</li>
                  <li>Item2</li>
                  <li>Item3</li>
                  <li>Item3</li>
                 </ul>
                </div>
           </div>

Thanking you in advance

Edited by moerpheus because: n/a
  • 4 Contributors
  • 6 Replies
  • 130 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by cleanserevoluti

Recommended Answers

All 6 Replies

Member Avatar for almostbob
  • Item1
  • Item2
  • Item3
  • Item3

try styling unordered lists
not sure, but, the default style for lists has a whitespace between li elements

ul {margin:0; padding:0;}
ul li {margin:0; padding:0;}
Edited by almostbob because: n/a
Member Avatar for moerpheus

its not just the list tag, its any tag i add.

Member Avatar for Traevel

Would those tags happen to be in between the <ul> tags? In that case they would still create a whitespace above your header. The suggestions almostbob made should help in removing all the margins for ul and li tags, and they certainly remove the whitespace in Firefox with the code you provided. If you're only interested in removing the top margin, you could also use

ul{margin-top:0;}

If the whitespace keeps returning with different tags just add the line tag{margin-top:0;} or tag{margin:0;} for the specific tag(s) as well.

Hope that helps, good luck.

Traevel

Member Avatar for moerpheus

still... it works fine with IE but not with firefox

Member Avatar for moerpheus

solved: I just float some divs... it works great.


Thank you all.

Member Avatar for cleanserevoluti

try to add specifically
margin-top: 0px; in the body css

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.