Here's a picture:

 

 

I can't work out how to remove that blank space under the image :\

It's less pronounced in other browsers, but it's still there.

 

Relevant HTML:

<footer>
		<div id="left">
		<a href="#">Back to Top</a><br />
		All Rights Reserved<br />
		© Copyright Chintan Parikh 2011
		</div>

		<div id="right">
		<a href="#">Contact Me</a><br />
		Designed by <a href="#">Chintan Parikh</a><br />
		Powered by <a href="#">Blah Blah</a>
		</div>

	</footer>

	<img src="img/footer/footerbg.png" alt="" />

 

Relevant CSS:

footer{
clear: both;
float: left;
background: url('../img/footer/footerbg.png') no-repeat;
margin-bottom: 0;
padding-bottom: 0;  
position: relative;
   top: 224px;
color: #ababab;
   font-family: Calibri, Arial, Verdana;
text-shadow: #111111 0 1px;
font-size: 12px;
}

footer #left{
padding-top: 20px;
padding-right: 6px;
width: 266px;
float: left;
text-align: right;
border-right: 1px solid #006dac;

}

footer #right{
margin-left: 6px;
padding-top: 20px;
width: 282px;
float: left;
text-align: left;
}

footer a{
color: #4a92ff;
text-decoration: none;
}

footer a:hover{
color: #1371ff;
text-decoration: none;
}

 

Cheers!

Have you tried zeroing margins on the left and right

img{display:block;} might work

 

Also, try removing the whitespace between img and footer.

Edited June 23, 201115 yr by Blofeld

Actually, I tell a lie! I reckon it's cos your footer isn't clearing the padding of the floated divs. Try

 

footer:after{
content:" ";
display:block;
clear:both;
}

Edited June 23, 201115 yr by Blofeld

Thanks for the suggestions guys,

Unfortunately, I tried them all, none work :\

 

I'll keep messing with it, and let you know if anything works

 

EDIT: From the looks of it, it's enforced by the browser, and can't be overridden :\

I've tried everything I know, no luck D:

Edited June 24, 201115 yr by timtamboy63

Does it really need 'position:relative"?

Edited June 24, 201115 yr by Blofeld

post linky???????

It's not live yet, I'll upload it soonish

 

EDIT: Blofeld, yeah, it does

Edited June 24, 201115 yr by timtamboy63

i have the exact same issue over @ my site http://www.aj-designs.co.uk/new/ so if i find a fix, il post it up here

i have the exact same issue over @ my site http://www.aj-designs.co.uk/new/ so if i find a fix, il post it up here

 

#footer-container {
   margin: 0 auto;
   padding-top: 10px;
   width: 960px;
}

 

that fixes it

no kingy its not that, i have given it 100% width and all is ok so far, but i need it to touch the bottom of the webpage :/

 

Cheers Anyway

timtam, what win7 theme is that?

You should be using a CSS reset this should help with any browser enforced rules

You should be using a CSS reset this should help with any browser enforced rules

 

If your talking to me, i already have one, if not, then heres one:

 

/* http://meyerweb.com/eric/tools/css/reset/ 
  v2.0 | 20110126
  License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

 

from http://meyerweb.com/eric/tools/css/reset/

 

Ash