|
CSS - Footer Is Offset In Ie
I have two issues:
1. I have been trying to make a habit of validating my stuff and when I tried to validate my page, I get these errors: Quote: 1. Error Line 31 column 64: end tag for "img" omitted, but OMITTAG NO was specified. ..."index.htm"><img src="images/logo.gif" alt="ICOM"></a> You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">". ✉ 2. Info Line 31 column 23: start tag was here. <a href="index.htm"><img src="images/logo.gif" alt="ICOM"></a> 3. Error Line 36 column 89: end tag for "img" omitted, but OMITTAG NO was specified. ..."images/index_img.jpg" alt="ICOM"></a></div> ✉ 4. Info Line 36 column 43: start tag was here. ...iv id="indeximg"><a href="about.htm"><img src="images/index_img.jpg" alt="ICO I don't know what this means. 2 (and the primary reason for posting this). I made a page and I have a footer that I want to keep at the bottom of the page regardless of whether the page stretches down that far. In Firefox, it works great. In IE, the footer looks like it moves to the left about 50% and then proceeds to stretch the page 50% more off to the left. My site is: www.icomministries.com My CSS file is: www.icomministries.com/style.css Similar TutorialsI'm having trouble with my website structure... view this page for an example... css is here... The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page... It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF... how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF? Thanks Bryan If you look at http://jordanmeeter.com/new/about.php and http://jordanmeeter.com/new/about/cd-collection.php you will see that the latter pages moves to the left and I believe stretches the pages. I removed the list, and sure enough the problem went away. But what is causing this? It's just a simple list... BTW, the CSS is http://jordanmeeter.com/new/includes/x.css. I need a 100px header (white) at the top of the page, with the rest of the page being #000033. I am really new to CSS, so there is what me and an editor came up with. Code:
.BODY {
background-image: url(block.jpg);
background-position: 0px 100px;
background-repeat: repeat;
}
The probelem is that the postion doesn't seem to matter when the repeat value is set to repeat. I am sure there is an easier way to do this. Can someone help? thanks Kris In a simple vertical list, the bullets are offset to the right of the container. Is it possible to control the amount of offset? I've read through a few CSS documents and I can't find any references to this, so excuse me if I've missed something (which I hope I have!). I want to be able to place a footer on my pages and always have it stuck to the bottom of the browser window, regardless of the amount of content in the page. So even if the page were nothing but the header and footer, the footer would be right at the bottom of the page. Can I do this in CSS? Hello. Maybe this would be a better post on CSS. Here is my code. Right now I'm trying to add a set of links at the bottom of the web page. Any thoughts? This has been driving me nuts! Thanks again everyone HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<html>
<head>
<title> Attorneys at Law, New York Lawyer</title>
<meta name="" content="">
<META NAME="Generator" CONTENT="Microsoft FrontPage 5.0">
<meta name="KeyWords" content="HTML">
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="index.js">
</script>
</head>
<body>
<div id="mainContainer">
<div id="topBar"><img src="webbanner.jpg" width="760" height="100">
<!--#include file="left_bar.shtml" -->
<!-- Main Content-->
<div id="mainContent">
<!-- Google Search-->
<form action="" id="cse-search-box">
<div align="right">
<input type="hidden" name="cx" value="013298611985327428493:xedrvpp2ns4" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="(URL address blocked: See forum rules)=cse-search-box&lang=en"></script>
<!-- BreadCrumb Nav-->
<div id="navBreadCrumb">
<a href="(URL address blocked: See forum rules)">Home</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<a href="">Areas of Practice</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<a href=""> Real Estate</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<strong>Foreclosure</strong>
</div>
<h1><font face="times new roman, times, serif" size="5">About Our Firm</font> <hr size="2" width="100%" />
<!-- end content --></h1>
<p align="justify"><strong>Lawyer</strong> is a full-service law firm with conveniently located offices in ... and ... Counties. As the largest suburban general practice in ..., we have a skilled team of 31 attorneys, including a physician-attorney, as well as two on-staff Registered Nurses and an extensive support staff to serve our clients.</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<h5>Why should you choose .... at your New York Attorney?</h5>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv </p>
<p align="justify">individual circumstances.</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<h5>Affiliations</h5>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Please visit our <a class="con" href="practice_areas.php">
areas of practice</a> for further information on our legal services or <a class="con" href="email.php">
contact us </a>directly for an initial consultation.</p>
</div>
</div>
</div>
</body>
</html>
CSS Code:
html{
height:100%;
}
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:0.8em;
margin:0px;
padding:0px;
background-color:#001b4f;
text-align:center;
}
.clear{
clear:both;
}
#mainContent{
padding-right:10px;
padding-left:210px;
padding-bottom:10px;
background-color:#fff;
}
#mainContainer{
width:760px;
text-align:left;
margin:0 auto;
background-color: #fff;
border-left:1px solid #272727;
border-right:1px solid #272727;
padding-bottom:10px;
}
#topBar{
width:760px;
height:100px;
padding-bottom:0px;
padding-top:0px;
border-bottom:2px solid #272727
}
#searchbox{
position:absolute:0,0;
}
#leftMenu{
width:200px;
padding-left:10px;
padding-right:1px;
float:left;
background-color: #fff;
padd
padding-top:25px;
}
#botTable{
display: table-footer-group;
float: top;
bottom: 100%
Hey All, I'm stumped on a problem I'm having with css. Here's the website I'm working on: johnraymondonline.com/mjbfoundation/ It's wordpress and I was working to modify a template. The problem I'm having is with the div for the footer. I've made the width 100% and it's not expanding the full width of the page. I've checked to see if it was encased in a div and it appears as if it isn't. I'm not sure what to do at this point...use absolute positioning? Any help would be appreciated. Thanks in advance!!! I want my footer to have no whitespace under it (like 1px ). I have it set like this: #footer { border-top:1px solid; text-align:right; margin:0px; font-size:smaller; padding-bottom:0px; } and it doesn't work so I'm guessing it is somewhere else in the file but I've tried messing around with most (all?) of the padding / margins and it still doesn't work. How could I do this? What I want is like the footer at http://www.oswd.org . Hi, Im trying to make my footer on my page be a certain height of around 150px. BUT I want it to fill to the bottom of the page even when there is less content or the window is made larger or smaller. So basically a sticky footer which fills to the bottom of the page. An example would be the footer he yoast.com My current CSS is he #fwrap { background-color:#BAAE9F; border-top: 1px solid white; border-top-width: 1px; border-top-style: solid; border-top-color: white; width:100%; height:100%; height:145px; } Any help would be appreciated! Thanks Hi all, I'm having troubles with my footer and I hope someone will be able to help: test.katiefleming .ca (remove space) User: wendy Pass: letmein The footer is supposed to span across the bottom forever should the user increase the browser window (this works). However, my text moves as the window is expanded/contracted. I want it to be fixed. No idea how to do this. Any help would be great! Here is my page: http://dev.donmyersministries.com/ The CSS in on the page itself still. My problem: I want my footer to go at the bottom after the two columns, but I just can't figure it out. I have read several tutorials on keeping the footer at the bottom, but nothing has worked for me. This is my first (good) CSS only layout. Help! Thank you all. later So I have this site and I'm not great with css, but this one has to be done all in css I think. And I've got everything working except for the footer. The footer needs to display below the background image which is aligned center top. So if there is plenty of text, the footer should display below all of the text, and if there isn't much text then it should display under the background image. This is how its currently set up: container div header div wrapper div wrapper div left div middle div right div footer div wrapper div the footer has position: absolute; bottom: 0; the container with position: relative puts the footer up the top over the top of the header. With position: absolute it does something else weird, and with neither it puts the footer at the bottom of the screen over the top of the content. the wrapper has relative position, which seems to be why the left, middle and right divs are positioning correctly with their positions as absolute. I think the header just positions correctly since its up top. So it would seem I'd need the footer to be inside another div that is position relatively. I just tried that, but it also positions the footer at the bottom of the screen with more content under it.. I guess what I want really is to have the site split into three horizontal divs, header, main and footer. Then within each of those to center all of the content to only 975px wide. And really its only the main div that needs the background image at all. Can anyone help? Hello All, My question regards footers using CSS. How would you have a footer like they do on Linkworth(dot)com so that it fluctuates depending on how long the page is? So if you have a really long scrolling page, the footer is at the bottom and likewise if the page is really short, the footer is also at the bottom, but so there is never any white space below it. I have a similar design I am working on, but when there is too much type, it runs behind the footer image and the footer never moves down accordingly. Thank you for your help - appreciated. Code: http://xbox-free.co.uk/ Can anyone advise as to why my footer is overlapping/floating to the right? Cheers, Neil I can't get a footer after at bottom of the page. The problem is my maincontent area is dynamic in size although i have edited this out. The footer appears to the left of maincontent and not at bottom. Code: ...
div#headerWrapper {
position:absolute;
top:5px;
left: 5px;
background: #63625e ;
width:1000px;
height:120px;
top:3px;
left: 5px;
border:2px groove black;
}
div#header {
position:relative;
top:5px;
left: 5px;
width:990px;
height:100px;
background: black;
border:5px groove #63625e ;
}
div#boxlayer1 {
position:absolute;
width:145px;
height:700px;
z-index:1;
left: 5px;
top: 125px;
border:2px groove black;
// background: green;
background-color:#63625e;
}
div#content1 {
position:absolute;
top:125px; /*border adds 2 px so i take them off*/
left: 165px;
width:850px;
height:900px;
z-index:1;
border:5px groove #666862;
background: black;
}
#footer {
clear:both;
float:none;
width:200px;
height:100px;
background: red;
border:5px groove #63625e ;
}
.....
</head>
<body bgcolor="#666862"> <?php include("navigation2.php"); ?>
<div id="navlist">
<div id="headnavlist">Site Features</div>
<ul >
<li ><a href='login.php'>Upload</a></li>
<li><a href='home.php'>Home</a></li>
<li ><a href='login.php'>Send Mesage</a></li>
<li><a href='home.php'>Message Outbox</a></li>
<li ><a href='login.php'>Upload</a></li>
<li><a href='home.php'>Home</a></li>
<li><a href='home.php'>Message Outbox</a></li>
</ul>
</div>
</div>
<div id="content1" >
asfafas
</div> <br><br>
<div id="footer">
asdsa
</div>
</body>
</html>
Hello. I'm presently writing a JavaScript applet which will be included into websites to produce a dynamically created header and footer through PHP. That's not important for the most part. What I would like to do is create the header and footer through CSS. I do, howver, have a slight problem. I can not have the user edit their websites in any way except for adding the script inclusion. (<script language="javascript" src="http://webaddress/script.js">) Now, this is what I've come up with for the CSS. css Code: Original - css Code body { padding: 25px 0 25px 0; } .ixga_header { position: fixed; font-size: 11px; font-family: /*Arial, */Verdana, Helvetica, sans-serif; color: #EAEAEA; top: 0; left: 0; } .ixga_header table,tr,td { font-size: 11px; font-family: /*Arial, */Verdana, Helvetica, sans-serif; color: #FFFFFF; } .ixga_header a, a:visited { font-size: 11px; font-family: /*Arial, */Verdana, Helvetica, sans-serif; color: #EAEAEA; } .ixga_header a:hover { font-size: 11px; font-family: /*Arial, */Verdana, Helvetica, sans-serif; color: #EAEAEA; } /* hide from mac ie5 \*/ .ixga_header { position: absolute; } /* end hide from mac ie5 */ html>body .ixga_header { position: fixed; } .ixga_footer { position: fixed; font-size: 11px; font-family: Verdana, Helvetica, sans-serif; color: #EAEAEA; bottom: 0; left: 0; } .ixga_footer table,tr,td { font-size: 11px; font-family: Verdana, Helvetica, sans-serif; color: #FFFFFF; } .ixga_footer a, a:visited { font-size: 11px; font-family: Verdana, Helvetica, sans-serif; color: #EAEAEA; }
body {
Does this seem right to you? Now, the HTML injected by the remote script is as follows. html Code: Original - html Code <div class="ixga_header"> <link href="http://localhost/header/header.css" rel="stylesheet" type="text/css" media="all" /> <table width="100%" height="25" border="0" cellpadding="0" cellspacing="0"> <tr height="25" style="background-image:url(\'http://localhost/header/images/bg.gif\')"> <td align="left"> <b> <a href="http://gaming.localhost"> Gaming Network </a> </b> - <a href="http://ds.localhost"> Demonic Sights: The Adventure Begins </a> - <a href="http://ds2.localhost"> Demonic Sights: The War of Aegis </a> - <a href="http://ta.localhost"> Total Apocalypse </a> </td> <td align="right"> <a href="http://localhost/login.php">Login</a> | <a href="http://localhost/register.php">Register</a> </td> </tr> </table> </div> <div class="ixga_footer"> <table width="100%" height="25" border="0" cellpadding="0" cellspacing="0"> <tr height="25" style="background-image:url('http://localhost/header/images/bg.gif')"> <td align="left"> This is a test footer. Woo. </td> </tr> </table> </div>
<div class="ixga_header">
<link href="http://localhost/header/header.css" rel="stylesheet" type="text/css" media="all" />
<table width="100%" height="25" border="0" cellpadding="0" cellspacing="0">
<tr height="25" style="background-image:url(\'http://localhost/header/images/bg.gif\')">
<td align="left">
<b>
<a href="http://gaming.localhost">
Gaming Network
</a>
</b>
-
<a href="http://ds.localhost">
Demonic Sights: The Adventure Begins
</a>
-
<a href="http://ds2.localhost">
Demonic Sights: The War of Aegis
</a>
-
<a href="http://ta.localhost">
Total Apocalypse
</a>
</td>
<td align="right">
<a href="http://localhost/login.php">Login</a>
|
<a href="http://localhost/register.php">Register</a>
</td>
</tr>
</table>
</div>
<div class="ixga_footer">
<table width="100%" height="25" border="0" cellpadding="0" cellspacing="0">
<tr height="25" style="background-image:url('http://localhost/header/images/bg.gif')">
<td align="left">
This is a test footer. Woo.
</td>
</tr>
</table>
</div>
The problem I face is that any HTML on the original page somehow gets shoved UNDER the footer, no matter the case, as if it just shoves the data that SHOULD be there into the footer division itself. Can someone please suggest a better method I can take of doing this? Or perhaps point me to a resource where I can see how to dynamically add a header and footer to a webpage through CSS _WITHOUT_ having to include a division for the page contents itself? This needs to work out of the box. Thanks in advance. Hey I am creating a website in php with a header and footer attached as in: <?php include("header.php"); ?> I have set the minimum height of the page to 600px however in IE it doesnt' work it displays half up the page In Firefox it is fine but in IE it doesn;t work any clues? cheers J I have a css file which looks good enough in internet explorer 6 but when i check it in firefox the footer box goes to the top of the page and the footer links go to the right column box. Where am I going wrong with this? Can anyone please point me in teh right direction please? Here is the css:- Code: body {
background-color: #4A4237;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background-image:url(../../../My Pictures/page_background.gif);
}
* {
margin: 0px;
padding: 0px;
}
html {height:100%; margin-bottom:1px;}
#wrapper {
width: 700px;
margin-right: auto;
margin-left: auto;
background-repeat: repeat-y;
text-align: left;
background-color: #FFFFFF;
}
#nav {
background-color: #775d42;
padding-top: 10px;
padding-bottom: 5px;
padding-left: 15px;
}
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
text-transform: capitalize;
}
#navlist a {
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 15px;
font-weight: bolder;
}
#navlist a:hover {
color: #AF9981;
}
#col1 {
float: left;
width: 500px;
}
#col2 {
float: left;
width: 200px;
}
#col1content p {
margin-bottom: 10px;
color: #666666;
font-size: 12px;
line-height: 140%;
text-align: justify;
}
#col1content {
padding: 0px 15px 15px;
}
.footer {
BORDER-TOP: #a4d0ed 2px solid; FONT-SIZE: 10px; PADDING-BOTTOM: 20px; WIDTH: 700px; COLOR: #707070; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #333333; TEXT-ALIGN: center; height: 60px;
}
.footer A:link {
COLOR: #9ebd18; TEXT-DECORATION: none
}
.footer A:visited {
COLOR: #9ebd18; TEXT-DECORATION: none
}
.footer A:hover {
COLOR: #a5cfeb; TEXT-DECORATION: underline
}
.footer A:hover {
COLOR: #a5cfeb; TEXT-DECORATION: underline
}
#col2content {
padding: 15px;
text-align: center;
}
.imageborder {
padding: 5px;
border: 1px solid #3A4A14;
background-color: #F2F3F4;
}
.subhead {
font-size: 11px;
color: #78442C;
margin-top: 5px;
margin-bottom: 5px;
}
.sidebar {
margin-bottom: 10px;
color: #666666;
font-size: 10px;
line-height: 140%;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 36px;
color: #DAD6CF;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
color: #B4AA9E;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
color: #B4AA9E;
padding-bottom: 10px;
padding-top: 5px;
}
#footer p {
color: #EEEBE8;
font-size: 9px;
padding-top: 2px;
padding-bottom: 3px;
padding-left: 15px;
}
a:link {
color:#0059b4;
text-decoration: none;
}
a:visited {
color:#0059b4;
text-decoration: none;
}
a:hover {
color:#0059b4;
text-decoration: underline;
}
a:active { color:#0059b4;}
If anyone can help me it would be very much appreciated as i am absolutely puzzled. I am not sure if i have put something wrong in the footer or if it is the wrapper. Thanks in advance I have an odd problem with my footer layout. I use 1280x1024 resultion and it works fine but when I change to a lower resultion or reduce browser window from full screen or put on longer text so you need to scroll the page down my footer doesn't sit on the bottom of the page. Check the attached screenshots and the css code bellow to see my exact problem. Code:
#footer {
position: absolute;
margin-left: -50%;
left: 50%;
bottom: 0px; !important;
text-align: center;
font-family: Verdana, Arial, sans-serif;
font-size: 9px;
padding: 5px;
padding-bottom: 8px;
background-image: url(../images/design/bg.gif);
}
Any idea? Thanks |
|||||||