...

View Full Version : Help with this footer...



borosarchangel
05-14-2011, 09:30 PM
For some reason, my footer is not working properly in firefox or chrome, but works perfectly in IE (imagine that!).

Here is the CSS file:

body
{
background-color: white;
}

div#page
{
width: 900px;
margin-left: auto;
margin-right: auto;
letter-spacing: .1px;
}

div#header
{
width: 900px;
height: 145px;
border-color: orange;
border-style: solid;
border-width: 1px;
color: black;
background-color: orange;
}

div#nav
{
width: 902px;
height: 50px;
line-height: 30px;
background-color: blue;
}

div#contentheader
{
text-align: center;
width: 900px;
line-height: 50px;
padding-top: 10px;
border-left-color: black;
border-left-style: solid;
border-left-width: 1px;
border-right-color: black;
border-right-style: solid;
border-right-width: 1px;
text-transform: capitalize;
}

div#content
{
width: 900px;
height: 90%;
border-left-color: black;
border-left-style: solid;
border-left-width: 1px;
border-right-color: black;
border-right-style: solid;
border-right-width: 1px;
background-color: white;
padding-bottom: 25px;
float: left;
}

div#leftcolumn
{
width: 43%;
float: left;
margin: 7px 0px 0% 3%;
background-color: white;
padding: 15px 7px 15px 7px;
}

div#rightcolumn
{
width: 43%;
float: right;
margin: 7px 3% 0% 0px;
background-color: white;
padding: 15px 7px 15px 7px;
}

div#footer
{
height: 50px;
width: 902px;
background-color: orange;
color: black;
}

ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li
{
margin: auto;
float: left;
}

a:link,a:visited
{
display: block;
width: 178px;
height: 48px;
font-weight: bold;
color: white;
background-color: blue;
text-align: center;
padding: 1px;
text-decoration: none;
text-transform: uppercase;
}

a:hover,a:active
{
background-color: black;
}

img.center
{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}

p.footer
{
text-align: center;
position: relative;
margin-top: 15px;
}

h1.center
{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}

h4.center
{
margin-top: 10px;
}
Here is the HTML file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Home</title>
<link rel=stylesheet type="text/css" href="css/mainCss.css" media=screen>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>

<body>

<div id="page">

<div id="header">
<img src="http://i1098.photobucket.com/albums/g361/Forrest_Young/hospital_logo.png" class="center">
</div>

<div id="nav">
<ul>
<li><a href="index.html"><h4 class="center">Home</h1></a></li>
<li><a href="info.html"><h4 class="center">Info</h1></a></li>
<li><a href="staff.html"><h4 class="center">Staff</h1></a></li>
<li><a href="contact.html"><h4 class="center">Contact</h1></a></li>
<li><a href="about.html"><h4 class="center">About</h1></a></li>
</ul>
</div>

<div id="contentheader">
<h1 class="center">Home</h1>
</div>

<div id="content">
<div id="leftcolumn">
<p>Left side</p>
</div>
<div id="rightcolumn">
<p>Right side</p>
</div>
</div>

<div id="footer">
<p class="footer">Footer</p>
</div>

</div>

</body>

</html>

Google Chrome result:
http://i1098.photobucket.com/albums/g361/Forrest_Young/chrome.jpg

Firefox result:
http://i1098.photobucket.com/albums/g361/Forrest_Young/firefox.jpg

IE result:
http://i1098.photobucket.com/albums/g361/Forrest_Young/ie.jpg

alykins
05-14-2011, 09:39 PM
you haven't set the height of the left and right columns so they are shrinking to contain whatever is in them... in this case you <p>'s containing text

borosarchangel
05-14-2011, 09:45 PM
you haven't set the height of the left and right columns so they are shrinking to contain whatever is in them... in this case you <p>'s containing text

setting a height for the columns does not change the footer. the content and footer are in different divs, they should not affect each other apart from where one starts and the other ends, right?

at any rate, that isn't the problem.

alykins
05-14-2011, 09:48 PM
i disagree- there is nothing telling the div#footer it is supposed to be anywhere near the bottom... you can achieve this a number of ways and providing a height to his col divs is one acceptable way

borosarchangel
05-14-2011, 09:53 PM
am i changing the height in my right and left columns within the content div? Or is there something wrong with the the div#footer? I am very new to CSS and you are being too vague, sorry.

because i tried to set a height for the div#leftcolumn and div#rightcolumn and it didn't fix it.

alykins
05-14-2011, 10:05 PM
you can set the height of these using your % scheme, you may have issues making your margins work correctly though (since theyre in px)... you could also check out using css position property.

also, i apologize; my response was sorta "harsh"... i didn't read who it was posted by and didnt realize it was a question- thought it was a bash on my suggested fix... my bad...

but building off of what i had posted (bc i experienced this SAME issue when i began playing with css) the footer isnt being told anything about where it should be... When i started i used IE as my test browser (didnt follow good practice and use all 3 major ones- i do now :) ) I had this exact issue that IE displayed it correct but the others didnt... idk why but IE makes the divs fill the screen... i think for you case you should set the column heights because it looks like you are going to use them to be place holders for content for ur page...

i dont know if its bad practice, but i do everything in pixels... if i want 10% of a height i just multiply it out... but thats me and im fussy about controlling every inch of the page (its the engineer in me :D )

if you do go that route remember to account for you px's that are in any borders or margins and dont forget to (in most cases) double those because you will usually have a top/bottom & a left/right margin/border

I hope that helps... when i started doing placement experiments i just made 4 blocks and gave them bgcolors so i could graphically see the changes i made to them....

final thought... bc you want your footer to remain below the columns i would add clear:both to it so it is forced below the other two (that are floating)

teedoff
05-14-2011, 10:06 PM
Pull the footer div code outside your page div. Then you would need to set footer margin:0 auto; to center it. You will also need to add overflow: auto; to your content div to clear your floats.

You can also get rid of the float on content. Dont need to float a full width element.

Then you have some invalid code. For example, you insert heading tags, which are block level elements, inside inline elements, <a> tags in your ul. There are other errors you should also fix, which you can check here (validator.w3.org).

I also dont recommend setting specified heights for floated divs. If your content grows, then you have other issues you'd have to deal with.

borosarchangel
05-14-2011, 10:16 PM
I added position: relative; to the footer, which moved it down, but it is slightly lower than I want it. I will mess around with it until I get it where I want.

teedoff
05-14-2011, 10:18 PM
I added position: relative; to the footer, which moved it down, but it is slightly lower than I want it. I will mess around with it until I get it where I want.

If you moved the footer div outside the page div, you dont need to add any position. Simply center it using the margin auto method.

alykins
05-14-2011, 10:26 PM
try this:


#page
{
width: 900px;
margin-left: auto;
margin-right: auto;
letter-spacing: .1px;
}

#header
{
width: 900px;
height: 145px;
border: 1px solid orange;
background-color: orange;
}

#nav
{
width: 902px;
height: 50px;
line-height: 30px;
background-color: blue;
}

#contentheader
{
text-align: center;
width: 900px;
line-height: 50px;
padding-top: 10px;
border-left: 1px solid black;
border-right: 1px solid black;
text-transform: capitalize;
}

#content
{
width: 900px;
height: 90%;
border-left: 1px solid black;
border-right: 1px solid black;
background-color: white;
padding-bottom: 25px;
float: left;
}

#leftcolumn
{
width: 43%;
float: left;
margin: 7px 0px 0% 3%;
background-color: white;
padding: 15px 7px 15px 7px;
}

#rightcolumn
{
width: 43%;
float: right;
margin: 7px 3% 0% 0px;
background-color: white;
padding: 15px 7px 15px 7px;
}

#footer
{
height: 50px;
width: 900px;
background-color: orange;
color: black;
clear: both;
margin: auto;
}

ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li
{
margin: auto;
float: left;
}

a:link,a:visited
{
display: block;
width: 178px;
height: 48px;
font-weight: bold;
color: white;
background-color: blue;
text-align: center;
padding: 1px;
text-decoration: none;
text-transform: uppercase;
}

a:hover,a:active
{
background-color: black;
}

img.center
{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}

p.footer
{
text-align: center;
position: relative;
margin-top: 15px;
}

h1.center
{
display: block;
margin: auto;
}

h4.center
{
margin-top: 10px;
}


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="~/Styles/StyleSheet1.css" />
</head>
<body>
<form id="form1" runat="server">
<div id="page">

<div id="header">
<img src="http://i1098.photobucket.com/albums/g361/Forrest_Young/hospital_logo.png" class="center">
</div>

<div id="nav">
<ul>
<li><a href="index.html"><h4 class="center">Home</h1></a></li>
<li><a href="info.html"><h4 class="center">Info</h1></a></li>
<li><a href="staff.html"><h4 class="center">Staff</h1></a></li>
<li><a href="contact.html"><h4 class="center">Contact</h1></a></li>
<li><a href="about.html"><h4 class="center">About</h1></a></li>
</ul>
</div>

<div id="contentheader">
<h1 class="center">Home</h1>
</div>

<div id="content">
<div id="leftcolumn">
<p>Left side</p>
</div>
<div id="rightcolumn">
<p>Right side</p>
</div>
</div>



</div>
<div id="footer">
<p class="footer">Footer</p>
</div>
</form>
</body>
</html>

i didnt change all of your code, but changed some to make it easier to navigate... ignore the extra junk i did it in vis studio

borosarchangel
05-14-2011, 10:31 PM
thanks alykins, that works perfectly. Also thanks teedoff, pretty sure that is what you told me to do lol.

everything works perfectly in all three browsers.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum