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;

Recommended Answers

All 8 Replies

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.

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.

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!

Do you have anything in the tag of your div?

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>

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.

OK, let us know of your progress :)

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.