PDA

View Full Version : CSS Padding causing a problem



UrbanGrafix
Sep 25th, 2009, 04:34 AM
Hi,

I am finishing up my site and I have decided to add to footer image to each page but when I attempt to add it on a page that has padding whether it be after the text with padding or not the image is detached by approx the padding size from the bottom.

I have been toying around for hours but with no success.
I have also been reading some of the tutorials on this site which have helped greatly but I am stumped.

I believe it is a problem with contentmain as it has padding set and when i remove content main (I did for one page it worked perfectly)
But on this page I need data on the left and padded an nothing I do seems to fix the problem.

[Website Picture] (http://img410.imageshack.us/i/94601787.jpg/)

The image in question is


<img src="images/footer.jpg" alt="For more information, please visit the FAQs or the forum." name="footer" id="footer" />

Website down atm so file has been uploaded here http://jump.fm/HGKKR

UrbanGrafix
Sep 25th, 2009, 04:59 AM
<div id="Content">
<div id="ContentMain">
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

&nbsp;<img src="images/footer.jpg" alt="For more information, please visit the FAQs or the forum." name="footer" id="footer" />
</div>

If I do that, it works fine but it well isn't the best way to do things so if you could help me *** it to the css and get it working it would be appreciated

dudeshouse
Sep 25th, 2009, 10:42 AM
The files that you have sent through do not allow for me to view the site as it is being shown in your preview image, which means that I can't see the gap as opposed to the surrounding layout.

Maybe you should try and upload your site to some free space so I can take a better look.

I'm guessing that you need to do something like remove the bottom padding or cheat it using a negative top margin on the image...

abduraooft
Sep 25th, 2009, 10:46 AM
Could you please post a link to your page?

Fisher
Sep 25th, 2009, 12:39 PM
Use the image as a background for a div called footer instead and put the form and the validation links in it. Add a class to the validation links so you can position them where you want:
<p style="font-size: 12px"><strong>tClientless walkthrough + Party commands</strong></p>
</div>
<div id="footer">
<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
<div align="right">
<input type="hidden" name="cx" value="partner-pub-4151060843783741:adaty3-25z5" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="20" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<a href="http://validator.w3.org/check?uri=referer"><img class="valid"
src="http://www.w3.org/Icons/valid-xhtml10-blue"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img class="valid" style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" /></a> </div>

#footer {
background:url(images/footer.jpg);
width:655px;
height:93px;
clear:both;
}
.valid {
margin-top:30px;
}

UrbanGrafix
Sep 25th, 2009, 04:48 PM
Could you please post a link to your page?

If you saw my initial message, my website is down atm.

I have created a test site based upon my new pages

http://torquesro.hostei.com/

UrbanGrafix
Sep 25th, 2009, 04:57 PM
Use the image as a background for a div called footer instead and put the form and the validation links in it. Add a class to the validation links so you can position them where you want:
<p style="font-size: 12px"><strong>tClientless walkthrough + Party commands</strong></p>
</div>
<div id="footer">
<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
<div align="right">
<input type="hidden" name="cx" value="partner-pub-4151060843783741:adaty3-25z5" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="20" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<a href="http://validator.w3.org/check?uri=referer"><img class="valid"
src="http://www.w3.org/Icons/valid-xhtml10-blue"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img class="valid" style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" /></a> </div>

#footer {
background:url(images/footer.jpg);
width:655px;
height:93px;
clear:both;
}
.valid {
margin-top:30px;
}

Has worked well except the google search bar is half way above the banner and i had to edit the images to 90px but other than that it was excellent

dudeshouse
Sep 25th, 2009, 05:06 PM
The site is not working. It's currently being forwarded to an admin review page...

abduraooft
Sep 25th, 2009, 05:09 PM
It might be that mysterious gap (https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps), and thus could be solved by adding float:left; or display:block; to the images.

BUT, there's a serious problem in your approach of making your document. You shouldn't all your text as image, which will make accessibility issues for both users and search engines. Instead, use all texts as such and apply the images(some small strips may be required, since you can repeat it) as background images.

UrbanGrafix
Sep 25th, 2009, 05:16 PM
EDIT: I didn't see that you changed the google code so i will try again

All seems to be fine now other than the google search box [Click Me] (http://img180.imageshack.us/i/90032888.png/)

The page is predominantly images because of problems I had adding images and aligning them with text (css newbie here)

UrbanGrafix
Sep 26th, 2009, 05:24 AM
I am still working on it but a live version of the problem is http://torquesro.info/faq.html

And with the help provided above this is the result http://torquesro.info/Untitled-1.html

Fisher
Sep 26th, 2009, 05:44 AM
Okay, you'll have to clarify what exactly you're looking for. In your op, you stated "detached by approx the padding size from the bottom". I took this along with your screenshot to mean you wanted the footer anchored to the bottom. Is this not what you want? Do you want the search and valid buttons to be below the footer image?

It should be easy enough to fix, but I'm unsure of what your final goal is.

With the changes I suggested, this was the result I got (note that's the browser bottom below the footer image):
http://img32.imageshack.us/img32/6945/footeryle.jpg

UrbanGrafix
Sep 26th, 2009, 05:48 AM
O, I am sorry about that and thanks in advance.

I am wanting to make it look like the rest of my site, check out www.torquesro.info essentially the coding here is very jerry rigged and not common amongst pages and because I have been unable to figure it out, it was more of a if it works keep it kind of approach.

I am wanting to get the search bar below the main banner aswell, (i have put the xhtml etc down 90px)

http://img5.imageshack.us/img5/8567/15316015.png

Fisher
Sep 26th, 2009, 06:38 AM
#footer {
background:url(footer.jpg) no-repeat top;
width:655px;
height:160px;
clear:both;
}
#cse-search-box {
text-align:right;
padding-top:100px;
}

You don't need the valid class anymore.

UrbanGrafix
Sep 26th, 2009, 08:05 AM
#footer {
background:url(footer.jpg) no-repeat top;
width:655px;
height:160px;
clear:both;
}
#cse-search-box {
text-align:right;
padding-top:100px;
}

You don't need the valid class anymore.

EXCELLENT, only one slight problem has been caused by this though lol

http://img35.imageshack.us/img35/7619/89684616.png

The banner is now slightly removed from the border, I have tested changing the size via css and even creating a slightly larger banner with no success.

Here is hoping you come to save me once again lol

I have had to change it back to normal for now as my other pages had the gap also, and well leaving one page like the picture above caused major problems for the other, but until i fix that gap I cant really roll it out lol so back to tinkering.

EDIT: Perfect now thanks