18 replies [Last post]
Kash_Designer
Offline
Regular
Last seen: 13 years 37 weeks ago
Joined: 2007-06-21
Posts: 45
Points: 0

Hello,

Working on a website and the layout works perfectly fine in all browsers except for IE on PC. When you go to it you will notice a scrollbar on the bottom of the page and apparently my footer goes beyond 100% when it states in the CSS width: 100%. I try doing it where main background is the color of my footer but for some reason that colors shows above he main content div.

Url: http://kevinkashou.com

Any solutions?

Thanks,

Kash_Designer

Kash_Designer
Offline
Regular
Last seen: 13 years 37 weeks ago
Joined: 2007-06-21
Posts: 45
Points: 0

I am sensing that no one

I am sensing that no one knows how to fix my solution. Is there another solution that I should give a try? I can totally start over with my footer I just want it so the footer takes up the page that is close to the content and the rest of the bottom half is filled with the background color.

Thanks,

Kash_Designer

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 23 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

17 hours? Try and be a bit

17 hours? Try and be a bit more patient Wink

Verschwindende wrote:
  • CSS doesn't make pies

Barry
Barry's picture
Offline
Regular
Scotland
Last seen: 14 years 38 weeks ago
Scotland
Joined: 2007-01-15
Posts: 46
Points: 0

Trouble at mill

Hi

You seem to have some issues with this site .. ive looked at it in both IE and FF and it looks totally different ..post your code here and let people have a look at what your doing... you will get help soon

It is going to be a simple CSS isue by the look of it so get yer code in here!!

I make websites .. for them... for money .. I LIKE to make websites for me...
For free

Kash_Designer
Offline
Regular
Last seen: 13 years 37 weeks ago
Joined: 2007-06-21
Posts: 45
Points: 0

<body><!DOCTYPE html PUBLIC






Kevin Kashou Creations


“Interactive design is a seamless blend of graphic arts,
technology and psychology” - Brad Wiener

Kevin Kashou's Creations




  • HOME

  • PROFILE

  • CREATIONS

  • CONTACT






Welcome

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with deskt

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with deskt



 

Footer_Bg


-->

Copyright © 2007, Kevin Kashou Creations. All Rights Reserved.



CSS Code

/* Body
------------------------------------------ */
* {
margin: 0px;
padding: 0px;
}

html, body {
height: 100%;
}

body {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.5em;
background: #FFFFFF url(../images/bg.jpg) repeat-x top;
}

/* Header
------------------------------------------ */
#header {
width: 770px;
height: 80px;
margin: 0px auto;
padding-top: 0px;
background: transparent;
}

#header #slogan {
margin: 30px 0px 0px 0px;
padding: 0;
float: right;
font-family: Georgia, "Times New Roman", Times, serif;
}

#header #slogan p {
font-size: 14px;
color: #002411;
}

#header #slogan .b {
font-weight: bold;
}

#header #slogan .italic {
font-style: italic;
}

/* Menu
------------------------------------------ */
#menu {
width: 770px;
height: 45px;
margin: 0px auto;
padding-top: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
}

#menu li {
line-height: 35px;
list-style: none;
display: inline;
}

#menu li a {
margin: 0px;
padding: 9px 15px 11px 15px;
color: #FFFFFF;
font-weight: normal;
font-size: 14px;
text-decoration: none;
}

#menu li a:hover {
margin: 0px;
color: #FFFFFF;
background: #1B2B28;
}

#menu li a.current {
background: #1B2B28;
color: #FFFFFF;
}

#main {
width: 100%;
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
}

/* Main Content
------------------------------------------ */
#maincontent {
width: 800px;
height: auto;
margin: 10px auto 0px auto;
padding: 0px;
background: #FFFFFF url(/images/content_bg.jpg) repeat-y;
}

#maincontent h1 {
width: 800px;
height: 65px;
margin: 0px 0px -25px 0px;
padding: 27px 0px 0px 30px;
background: url(/images/h1_bg.jpg) no-repeat;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
font-weight: normal;
color: #FFFFFF;
}

/* Right Side
------------------------------------------ */
#right_side {
width: 185px;
padding: 0px 25px 0 15px;
float: right;
}

/* Left Side
------------------------------------------ */
#left_side {
width: 550px;
height: auto;
padding: 0px 0px 0px 25px;
}

/* News - Not used yet!
------------------------------------------ */
#news {
width: 100%;
height: auto;
background: #071A26;
clear: both;
}

#news_main {
width: 770px;
margin: 0px auto;
}

/* Footer
------------------------------------------ */
#footer {
width: 100%;
height: 150px;
background: #050507;
clear: both;
position: absolute;
bottom: 0;
}

#footer_main {
margin: 0px auto;
}

#footer_main p{
padding: 14px 0px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #FFFFFF;
text-align: center;
}

/* Extra
------------------------------------------ */
.clear {
clear: both;
}

.left {
float: left;
}

.right {
float: right;
}

Here are the codes that i am using for the site!

Kash_Designer

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 23 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Removing the BODY tag from

Removing the BODY tag from above the doctype would help Wink

Verschwindende wrote:
  • CSS doesn't make pies

Kash_Designer
Offline
Regular
Last seen: 13 years 37 weeks ago
Joined: 2007-06-21
Posts: 45
Points: 0

I did remove it but I was

I did remove it but I was changing the resolution on different screen and noticed that my footer was cutting some of my content. How can i make it so my footer is flexible to according how much content I have on my page?

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 5 years 15 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Perhaps reading the article

Perhaps reading the article on footers in the "How to" forum will help

http://csscreator.com/node/4104

Lots of good stuff in that forum Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Triumph (not verified)
Anonymous's picture
Guru

It would probably be a

It would probably be a better plan to validate the code first.

Kash_Designer
Offline
Regular
Last seen: 13 years 37 weeks ago
Joined: 2007-06-21
Posts: 45
Points: 0

My Code is validated and I

My Code is validated and I use the method by footerStickAlt but still not work I still left the coding i added from footerstickalt see if you guys can see something that I am missing. Also, with this code, will it make my footer fill up the page whatever is not use from the content?

Here are my new set of codes

CSS

/* Body
------------------------------------------ */
* {
margin: 0px;
padding: 0px;
}

html, body {
height: 100%;
}

body {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.5em;
background: #FFFFFF url(../images/bg.jpg) repeat-x top;
}

#page {
position: realtive;
min-height: 100%;
}

* html #page {
height: 100%;
}

/* Header
------------------------------------------ */
#header {
width: 770px;
height: 80px;
margin: 0px auto;
padding-top: 0px;
background: transparent;
}

#header #slogan {
margin: 30px 0px 0px 0px;
padding: 0;
float: right;
font-family: Georgia, "Times New Roman", Times, serif;
}

#header #slogan p {
font-size: 14px;
color: #002411;
}

#header #slogan .b {
font-weight: bold;
}

#header #slogan .italic {
font-style: italic;
}

/* Menu
------------------------------------------ */
#menu {
width: 770px;
height: 45px;
margin: 0px auto;
padding-top: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
}

#menu li {
line-height: 35px;
list-style: none;
display: inline;
}

#menu li a {
margin: 0px;
padding: 9px 15px 11px 15px;
color: #FFFFFF;
font-weight: normal;
font-size: 14px;
text-decoration: none;
}

#menu li a:hover {
margin: 0px;
color: #FFFFFF;
background: #1B2B28;
}

#menu li a.current {
background: #1B2B28;
color: #FFFFFF;
}

#main {
width: 100%;
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
}

/* Main Content
------------------------------------------ */
#maincontent {
width: 800px;
height: auto;
margin: 10px auto 0px auto;
padding: 0px;
background: #FFFFFF url(/images/content_bg.jpg) repeat-y;
}

#maincontent h1 {
width: 800px;
height: 65px;
margin: 0px 0px -25px 0px;
padding: 27px 0px 0px 30px;
background: url(/images/h1_bg.jpg) no-repeat;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
font-weight: normal;
color: #FFFFFF;
}

/* Right Side
------------------------------------------ */
#right_side {
width: 185px;
padding: 0px 25px 0 15px;
float: right;
}

/* Left Side
------------------------------------------ */
#left_side {
width: 550px;
height: auto;
padding: 0px 0px 0px 25px;
}

/* News - Not used yet!
------------------------------------------ */
#news {
width: 100%;
height: auto;
background: #071A26;
clear: both;
}

#news_main {
width: 770px;
margin: 0px auto;
}

/* Footer
------------------------------------------ */
#footer {
width: 100%;
height: 40px;
background: #050507;
position: absolute;
bottom: 0px;
}

* html #footer{ /*IE */
top:0;
}

#footer_main {
margin: 0px auto;
}

#footer_main p{
padding: 14px 0px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #FFFFFF;
text-align: center;
}

/* Extra
------------------------------------------ */
.clear {
clear: both;
}

.left {
float: left;
}

.right {
float: right;
}

XHTML






Kevin Kashou Creations



“Interactive design is a seamless blend of graphic arts,
technology and psychology” - Brad Wiener

Kevin Kashou's Creations




  • HOME

  • PROFILE

  • CREATIONS

  • CONTACT






Welcome

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with deskt

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with deskt



 

Footer_Bg



-->

Copyright © 2007, Kevin Kashou Creations. All Rights Reserved.



Triumph (not verified)
Anonymous's picture
Guru

The page you posted is

The page in the first post is validated but the code you posted after that is not.

Even after taking out the extraneous body tags the code still contains 5 errors all of which are misplaced div tags.

Quoted below:

Kash_Designer wrote:






Kevin Kashou Creations


“Interactive design is a seamless blend of graphic arts,
technology and psychology” - Brad Wiener

Kevin Kashou's Creations




  • HOME

  • PROFILE

  • CREATIONS

  • CONTACT






Welcome

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with deskt

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with deskt



 

Footer_Bg


-->

Copyright © 2007, Kevin Kashou Creations. All Rights Reserved.



# Error Line 75, Column 9: end tag for element "div" which is not open. # Error Line 77, Column 5: end tag for element "div" which is not open. # Error Line 75, Column 10: XML Parsing Error: Opening and ending tag mismatch: body line 14 and div. # Error Line 77, Column 6: XML Parsing Error: Opening and ending tag mismatch: html line 2 and div. # Error Line 88, Column 1: XML Parsing Error: Extra content at the end of the document.

Kash_Designer
Offline
Regular
Last seen: 13 years 37 weeks ago
Joined: 2007-06-21
Posts: 45
Points: 0

Triumph I did the validator

Triumph

I did the validator again and there are still not showing up for me. I use the url option. I tested on all pages and I get the same thing. Successful and Valid. SO not sure what. Plus, I am not even sure I have XML in my file. according the error message.

Thanks,

Kash_Designer

Triumph (not verified)
Anonymous's picture
Guru

Kash_Designer

Kash_Designer wrote:
Triumph

I did the validator again and there are still not showing up for me. I use the url option. I tested on all pages and I get the same thing. Successful and Valid. SO not sure what. Plus, I am not even sure I have XML in my file. according the error message.

Thanks,

Kash_Designer
5th post in this thread. The code you posted is invalid. Even after taking the extraneous body tags out. I even reposted the code you posted. I tried it again and still get the errors.

Kash_Designer
Offline
Regular
Last seen: 13 years 37 weeks ago
Joined: 2007-06-21
Posts: 45
Points: 0

I am doing directly using

I am doing directly using url function. I don't get any errors. So not sure what's going on. So any reason on how I can get the footer solution fixed?

Thanks,

Kash_Designer

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

While the code on your

While the code on your server is valid, the code you posted to the forum has errors. That creates problems for people.

The page is also broken in Firefox. Since the footer is a child of #page, you need to make #page {position: absolute | relative;} so it's the reference for footer. I tested with relative.

You may need to set hasLayout in #page for IE6.

See my bottom footer demo for a slightly different take on things, including controlling footer width.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Kash_Designer
Offline
Regular
Last seen: 13 years 37 weeks ago
Joined: 2007-06-21
Posts: 45
Points: 0

kk5st,

kk5st,

Thanks for the suggestion but it is still not what I want to be. Sad

So I tried a different approach and it totally did it for me but the problem now is that I get a bottom black border under the main navigation on the PC Firefox and Mac Safari & FIrefox. But on the PC for Internet Explorer looks EXACTLY the way how I want it.

I swear we need to be only using one browser in my opinion. I hate these problems. LOL But eventually I will solve this. So what do you think I should take a look at for this new problem i came across? I took a look at all of the margin in the upper area but nothing is clicking for some reason.

xhtml file






Kevin Kashou Creations


“Interactive design is a seamless blend of graphic arts,
technology and psychology” - Brad Wiener

Kevin Kashou's Creations




  • HOME

  • PROFILE

  • CREATIONS

  • CONTACT






Welcome

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer



Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.



 


Footer_Bg


-->

Copyright © 2007, Kevin Kashou Creations. All Rights Reserved.




CSS file

/* Body
------------------------------------------ */
* {
margin: 0px;
padding: 0px;
}

html, body {
height: 100%;
}

body {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.5em;
background: #050507 url(../images/bg.jpg) repeat-x top;
}

/* Header
------------------------------------------ */
#header {
width: 770px;
height: 80px;
margin: 0px auto;
padding-top: 0px;
background: transparent;
}

#header #slogan {
margin: 30px 0px 0px 0px;
padding: 0;
float: right;
font-family: Georgia, "Times New Roman", Times, serif;
}

#header #slogan p {
font-size: 14px;
color: #002411;
}

#header #slogan .b {
font-weight: bold;
}

#header #slogan .italic {
font-style: italic;
}

/* Menu
------------------------------------------ */
#menu {
width: 770px;
height: 45px;
margin: 0px auto;
padding-top: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
}

#menu li {
line-height: 35px;
list-style: none;
display: inline;
}

#menu li a {
margin: 0px;
padding: 9px 15px 11px 15px;
color: #FFFFFF;
font-weight: normal;
font-size: 14px;
text-decoration: none;
}

#menu li a:hover {
margin: 0px;
color: #FFFFFF;
background: #1B2B28;
}

#menu li a.current {
background: #1B2B28;
color: #FFFFFF;
}

#main {
width: 100%;
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
}

/* Main Content
------------------------------------------ */
#maincontent {
width: 800px;
height: auto;
margin: 10px auto 0px auto;
padding: 0px;
background: #FFFFFF url(../images/content_bg.jpg) repeat-y;
}

#maincontent h1 {
width: 800px;
height: 65px;
margin: 0px 0px -25px 0px;
padding: 27px 0px 0px 30px;
background: url(../images/h1_bg.jpg) no-repeat;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
font-weight: normal;
color: #FFFFFF;
}

/* Right Side
------------------------------------------ */
#right_side {
width: 185px;
padding: 0px 25px 0 15px;
float: right;
}

/* Left Side
------------------------------------------ */
#left_side {
width: 550px;
height: auto;
padding: 0px 0px 0px 25px;
float: left;
}

/* News - Not used yet!
------------------------------------------ */
#news {
width: 100%;
height: auto;
background: #071A26;
clear: both;
}

#news_main {
width: 770px;
margin: 0px auto;
}

/* Footer
------------------------------------------ */
#footer {
width: 100%;
height: 40px;
background: #050507;
}

#footer_main {
margin: 0px auto;
}

#footer_main p{
padding: 10px 0px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #FFFFFF;
text-align: center;
}

/* Extra
------------------------------------------ */
.clear {
clear: both;
}

.left {
float: left;
}

.right {
float: right;
}

Thanks for everyone's help on trying to solve this. I feel we are really close on solving this problem I am trying to work on.

Kash_Designer

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 23 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

IE

Kash_Designer wrote:
I swear we need to be only using one browser in my opinion.

When you get the hang of this, you will wish people would use any browser other than the horrible mess that is IE.

I use Firefox on my work PC and my other colleague uses Opera (we're ICT techs) and neither of us can stand IE.

Verschwindende wrote:
  • CSS doesn't make pies

Kash_Designer
Offline
Regular
Last seen: 13 years 37 weeks ago
Joined: 2007-06-21
Posts: 45
Points: 0

I am with you one hundred

I am with you one hundred percent. LOL

So any reason why I am getting the black background border on the bottom of my main navigation?

Kash_Designer
Offline
Regular
Last seen: 13 years 37 weeks ago
Joined: 2007-06-21
Posts: 45
Points: 0

Hello Everyone, I have

Hello Everyone,

I have figured out why my footer is doing the scrolling but I don't know how to fix it. The part where the quote is, it is affecting the scroll-bar. Any solution on that?

As for the background color showing up on top of the content container is my margin had a 10px above. So I got that solved. Just have to fix this bottom scroll-bar.

THanks,

Kash_Designer