Member Avatar for flyblackbox

The footer on my website is raised 1 pixel too high.

#footer {
clear: both;
margin-left:0%;
height:40px;
font-size: .8em;
width:100%;
border-top: 1px solid #81C5A0;
background-color:#FFFFFF;
z-index:1;
margin:0;
Padding:0;

  • 4 Contributors
  • 8 Replies
  • 188 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by luap599

Dani AI

Generated

A few practical notes that address what’s already been tried here. is right to focus on the footer’s internal spacing rather than only nudging the whole block; ’s hint about “what’s inside the div” is important, and ’s negative-margin idea is a blunt tool that often hides the real cause. Empty paragraph tags and browser default paragraph margins are a common culprit — don’t use empty <p> tags for spacing; control spacing with CSS instead. See the guidance on paragraph styling. (developer.mozilla.org)

Try these two low-risk fixes first (they replace empty tags and avoid hacks):

/* remove default paragraph spacing inside the footer */
#footer p { margin: 0; }

/* contain floated children without extra markup (clearfix) */
#footer::after {
  content: "";
  display: table;
  clear: both;
}

The clearfix keeps the footer’s box from collapsing when children are floated; it’s the micro-clearfix pattern widely used in production. (nicolasgallagher.com)

Two more checks that often fix “one-pixel” layout oddities: use box-sizing: border-box when you expect an exact outer height/width (it makes borders and padding count inside the specified size), and ensure the page is in standards mode with a proper doctype so browsers don’t apply legacy quirks. If you still see a 1px offset, inspect the computed box model in devtools (margins, padding, border) and temporarily remove fixed height to see if line-height or baseline alignment of inline elements is the cause. (developer.mozilla.org)

Quick checklist

  1. Remove any empty <p> spacing, set #footer p{margin:0}.
  2. Add the clearfix (above) instead of clear hacks.
  3. Try box-sizing: border-box and test without fixed height.
  4. Verify doctype/standards mode and inspect computed styles in devtools.

Recommended Answers

All 8 Replies

Member Avatar for Spycat

The footer on my website is raised 1 pixel too high.

#footer {
clear: both;
margin-left:0%;
height:40px;
font-size: .8em;
width:100%;
border-top: 1px solid #81C5A0;
background-color:#FFFFFF;
z-index:1;
margin:0;
Padding:0;

Just 1 pixel?
Wow, a perfectionist :)
How about this?:

margin-top:-1px;

I never did like these negative margin hacks cuz they look messy.
They do at times seem to be an EZ solution.

Member Avatar for flyblackbox

I changed the code to this:

#footer {
clear: both;
margin-left:0%;
height:40px;
font-size: .8em;
width:100%;
border-top: 1px solid #81C5A0;
background-color:#FFFFFF;
margin-top:-1px;
}

And that didn't work... I tried removing the z-index also.

Member Avatar for Spycat

Hmmm...

Maybe instead of:
clear: both;
try:
clear: left;
or
clear: right;
or
<br clear="all" />
or
<br clear="left" />
or
<br clear="right" />
or just
<br />
or
fool with the line-height:
line-height: .7em; (or whatever)

I am all out of "ors" for now lol!

Member Avatar for inplainsite

Do you have anything in the tag of your div?

Member Avatar for flyblackbox

Do you have anything in the tag of your div?

<div id="footer" >
<p><br/></p>
<span class="left"><a href="index.html">Home</a> | <a href="about-rope-it.html">About The Rope It&trade;</a> | <a href="how-to-use-the-rope-it.html">How To Use</a> | <a href="rope-it-videos.html">Videos</a> | <a href="golf-at-home.html">More Golf At Home</a> | <a href="get-a-free-rope-it.html">Get A Free Rope It!</a> </span><span class="right">&copy; 2010 Rope-It Golf, LLC</span>
<p><br/></p>
</div>

Member Avatar for flyblackbox

Hmmm...

Maybe instead of:
clear: both;
try:
clear: left;
or
clear: right;
or
<br clear="all" />
or
<br clear="left" />
or
<br clear="right" />
or just
<br />
or
fool with the line-height:
line-height: .7em; (or whatever)

I am all out of "ors" for now lol!

I tried these. They didn't work but they got my mind going. I might be able to work something out tomorrow when I get back to my office computer.

Member Avatar for Spycat

OK, let us know of your progress :)

Member Avatar for luap599

Hi, I viewed your project both in Firefox and in IE. Your problem is with IE. Try forcing IE to be comparable by adding the following code to the header

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
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.