/    Sign up×
Community /Pin to ProfileBookmark

CSS Footer displaying under content.

Hey guys,
I recently found a cool template online that uses a TON of CSS. I was able to port my ASP.NET website into this template. After finishing this site and testing it in IE6 and IE7, I then tested it in Firefox (I should have done this the other way round). The Site Works Fine in IE, but in Firefox my sites footer (created with div tags) slides under my pages content (also made with div tags).

I believe the problem may stem from the fact that I placed a whole block of of div tags to hold some other stuff within the main “content” div tags. these sub div tags use an entire different CSS document. I really do not know how to meddle with CSS, as I am only a beginning ASP.NET C# programmer.

Would someone with a little better knowledge of the matter be able to check my site out in Firefox and perhaps Firebug so I get get a little better idea of what is going on? I’m kind of in a bind as this site was supposed to deploy a week ago, but I’ve had to hold it back while trying to research this problem, but since my knowledge of CSS is lacking, I haven’t been able to do much:-(

My website is [url]www.kitsapairsoft.com[/url],

the sites main CSS is below:

[CODE]
/* CSS Document */

* {
margin:0; padding:0;
}

body{
background:#1F201F;
padding:0 10px 0 15px;
}

a:hover{text-decoration:none;}

a img { border:0;}

.column { float:left;}
.clear { clear:both;}

html, input, textarea
{
font-family:Tahoma;
font-size:11px;
color:#787878;
}

a {color:#787878;}

input, select, textarea { vertical-align:middle; font-weight:normal;}

.search .input {border-color:#879CA3; border-width:1px; border-style:solid; padding-top:2px; padding-bottom:2px; background:#FFFFFF;}
.search .submit { margin:0;}

ul { list-style:none;}

#main { width:755px; margin:0 auto; border-bottom:2px solid #000000;}

#header { height:215px; background:url(images/header.jpg) no-repeat top;}

#logo {text-align:center; padding-top:74px; padding-left:65px; float:left;}
#logo span { font-size:0.91em; color:#3D3838; font-weight:bold; font-family:Verdana, Arial, Helvetica, sans-serif;}

h1 { color:#454040; font-size:2.21em; font-weight:bold; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase;}
h1 a {color:#454040; text-decoration:none;}

#body { width:100%;}

#body .indent { padding:25px 0px 35px 0px;}

#wrapper { background:url(images/v-l.gif) repeat-y 511px 0px; width:100%;}

/* side_bar */
#side_bar { width:242px; color:#787878; font-size:1.11em; font-family:Arial, Helvetica, sans-serif;}
#side_bar a { color:#787878;}

#side_bar .indent { padding:0px 20px 0px 37px;}

#side_bar .search { text-align:right; margin:5px 0px 20px 0px;}
#side_bar .search .input { width:90%; }
#side_bar .search .submit {margin:5px 0px 0px 4px;}

.widget_style h2 { color:#FFFFFF; font-size:1.01em; font-weight:bold;}
.widget_style ul { margin:5px 0px 20px 0px; list-style:none;}
.widget_style li { background:url(images/side-a.gif) no-repeat 0px 5px; padding:0px 0 0 14px; margin-top:5px;}
.widget_style li a {text-decoration:none;}
.widget_style li a:hover { text-decoration:underline;}

#links_with_style ul {margin:0;}
#links_with_style ul ul {margin:5px 0px 20px 0px;}
#links_with_style ul li {list-style:none;background:none;margin:0;padding:0;}
#links_with_style ul li ul li { background:url(images/side-a.gif) no-repeat 0px 5px; padding:0px 0 0 14px; margin-top:5px;}

.widget_style ul.children { margin:0;}

#meta { vertical-align:top;}

#categories { vertical-align:top;}

#archives { vertical-align:top;}

#recent-comments {
vertical-align:top;
}
#recent-posts {
vertical-align:top;
}
#calendar {
vertical-align:top;
}
#google-search {
vertical-align:top;
}
#gsearch {
text-align:left;
padding:5px 0px 20px 0px;
}
#pages {
vertical-align:top;
}
#text-1 {
vertical-align:top;
}
#delicious {
vertical-align:top;
}
#delicious-box {
text-align:left;
}
#calendar_wrap {
vertical-align:top;
padding:5px 0px 20px 0px;
}
#calendar_wrap a {
font-weight:bold;
}
.textwidget {
padding:5px 0px 20px 0px;
}
#statusbar {
text-align:justify;
}
#statusbar p {
padding:0px 0px 20px 0px;
}
#statusbar a {
font-weight:bold;
}

/* side_bar end */

/* content */
#content { width:511px;}

#content .search .input { width:60%; }
#content .search .submit {margin:0px 0px 0px 10px;}

#content .indent { padding:0px 36px 0px 47px;}

#content .

#content .title { background:url(images/cont-h-l.gif) repeat-x bottom; width:100%; padding-bottom:12px;}
#content .title .left { float:left; color:#787878; font-size:0.91em;}
#content .title .right { float:right;}

h3 { color:#FFFFFF; font-size:1.11em; font-weight:bold; margin-bottom:5px;}
h3 a {color:#FFFFFF; text-decoration:none;}

.author { font-size:1.01em;}

.date { font-size:1.01em;}

.content_text { background:url(images/h-l.gif) repeat-x bottom; padding-bottom:20px; margin-bottom:20px; margin-top:15px;}
.content_text strong { color:#AF3E00;}

.content_text ol { margin-left:20px; margin-top:15px;}
.content_text ol li { margin-top:5px;}
.content_text ol li a { color:#AF3E00;}

.comment { font-size:0.91em; color:#C23700;}
.comment a { color:#787878; text-decoration:none;}
.comment a:hover { text-decoration:underline;}

.postmetadataalt {
font-size:0.81em;
}

.pagetitle {
color:#FFFFFF; font-size:1.11em; font-weight:bold;
padding:10px 0px 10px 10px;
}

p {
padding:10px 0px 10px 0px;
}

.article {
padding:0;
}

.post {
padding:0px 5px 0px 5px;
}

.navigation {padding:0px 0px 10px 0px; width:100%; color:#C23700; font-size:1.01em;}
.navigation a {color:#C23700; font-weight:bold;}
.navigation .left {width:45%; float:left; padding-left:10px;}
.navigation .right {width:45%; float:right; text-align:right; padding-right:10px;}

/* content end */

/* footer */
#footer { color:#DCE1D7; padding:18px 45px; background:url(images/footer.gif) top; font-size:1.11em;}
#footer a { color:#DCE1D7; }
/* footer end */
[/CODE]

Thanks for any help you can offer,
-Sunflash

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@CentauriMar 31.2008 — You just need the footer to clear the floats above it :[CODE]#footer { color:#DCE1D7; padding:18px 45px; background:url(images/footer.gif) top; font-size:1.11em; [COLOR="Red"]clear: both;[/COLOR]}[/CODE]
Copy linkTweet thisAlerts:
@SunflashauthorMar 31.2008 — Awesome! Your a life saver, I can finally get this thing wrapped up and finished.

Thank you very much!

-Sunflash
×

Success!

Help @Sunflash spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...