|
HTML - Sticky Footer No Longer Sticky After Declaring Doctype
My sticky footer now floats in the middle of the page after i declared a doc type. Any suggestions for a quick fix?
doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> HTML Code: <body>
<div id="wrap">
<div id="header"></div>
<div id="logoimg"></div>
<div id="logotext"></div>
<div id="searchbox">
<img src="" align="absmiddle" vspace="2px"/>
<label for="searchfield">search: area, position, area+position</label><br>
<input type="text" name="searchfield" value=""
id="searchfield"/> <div id="geist"></div>
</div>
<div id="main"></div>
</div>
<div id="footer"></div>
Code: body {
background-color: #99ccff;
background-image: url(http://);
background-repeat: repeat-x;
overflow: auto;
margin: 0;
padding: 0;
height: 100%;
}
#wrap{
min-height: 100%;
margin-top: -151px;
}
#footer {
margin: auto;
width: 100%;
height: 100px; /* Height of the footer */
background: #3e4041;
border-top: 1px solid #e0e0e0;
clear: both;
margin-top: 50px;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
margin-bottom: 51px;
}
h1, h2, p {
padding:0 10px;
}
#outer:after {/* thank you Erik J - instead of using display table for ie8*/
clear:both;
display:block;
height:1%;
content:" ";
}
Similar TutorialsHello, I can't seem to get my head around how I would do this so if you could help it would be greatly appreciated. What I want is when you click on the button then says "Comment" the screen fades black and a in-window popup comes and you can enter the comment there but, everything I have tried hasn't worked. Does anyone here know how to do it? I'm trying to fix up my code a bit so all the files I'm pointing to are relative to the root of the site. Most of my links used to look something like this (all these link examples came from same file)... <link href="css/styles.css" type="text/css" rel="stylesheet"> <script src="scripts/jquery.min.js" type="text/javascript"></script> <?php include('includes/header.html');?> <img src="images/maps/pic1.jpg"> The above was fine as long as my site stayed small, with few pages all in same directory. However, bigger projects require pages in different folders, sometimes in subfolders, yet all these pages share certain characteristics - headers, footers, etc. So I need to start specifying links to those files relative to the root. Here are the same examples, but now starting from the root of my site. They all work, except for my includes. <link href=" / css/styles.css" type="text/css" rel="stylesheet"> <script src=" / scripts/jquery.min.js" type="text/javascript"></script> <?php include(' / includes/header.html');?> <img src=" / images/maps/pic1.jpg"> Any idea why the includes won't work? Works fine as long as I don't put that / in there. When I first put on my holiday page, someone informed me that they couldn't see the bottom of the page, even if they scrolled down. I increased the height of the I-frame to 1200. and it fixed the problem, but it increased the I-frame on all the pages. Is there a way to do like a floating I-Frame. Make sense? <iframe name="iframe" width=950 height=1200 hspace=25 src="content.html" scrolling="auto" frameborder=1 ></iframe> link to site: then click on Holiday greeting for page in question http://www.girlsincsoaz.org TIA Hey, I have been creating websites for some tiem and usually when adding font styles i assigned font-weight:normal; in the CSS which in previous versions of Firefox and IE has lead the text to look exactly the same. Now with IE 7 and Firefox 3 i am noticing differences in my font-weight using my same technique so i researched it a little and found font-weight no longer acts correctly in Firefox 3. Is there a work around for this to get fonts looking the same? Normal content text is not the problem really. When i create Headings though with font size of say 26px it appears to be really heavy and i want to set font weight to normal or lighter to make it thinner but it doesn't work. I hope there is a work around as i don't want to go back to the stone age and have to use images for text to get sites cross browser friendly. Any advice? Hi all, Have encountered a problem in my code, in that when i went back to format my page, I could no longer use the submit button. I was able to find that it occurred when i added in the <table> tags within the selector function but I for the life of me cannot figure out why that makes the form invalid or whatever is happening. If any1 could have a look and see what the issue is, it would be greatly appreciated Quote: <?php session_start(); if ($_SESSION['groupid'] < 1) { header("location:login.php?message=You do not have sufficient " . "permissions to view that page. Please login."); } ?> <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <?php $page = "CapSim"; include("common/init.php"); ?> </head> <body> <?php include("header.php");?> <br/> <br/> <div id="page"> <?php include("dbconnect.php"); // Formatting $content = "<h3 align='center'>".$page."</h3>\n" . "<center>\n" ."<h3 align='center'></h3>"; $content .= "<h4>" . "Number of Tiers in the model" . "</h4>"; $TIER=$_GET["TIER"]; $content .= "<form action='capsim_home.php' method='get' target='_blank'>\n"; $content .= "<input type='text' name='TIER' value='$TIER' onKeyPress='return numbersonly(this, event)' />\n "; $content .= "<input type='submit'value='New Layer'>\n"; $content .= "</form>"; $content .= "<br/>" . "</center>\n" . "<br/><hr width='900px'/><br/>"; // Set up the form and hidden control variables $content .= "<form action='/cgi-bin/".$parentdir."/capsimController.py' method='post' target='_blank'>"; // Default values for fields $u = 10; $x = 15; $m = 16; $q = 1; $S_RT = 10000; $a_a = 2; $a_u = 3; $a_l= 1; $runs = 1; $o_i=100; $default_vals = 1; //Function for printing off the layers within the tiers Please take a look at http://csacalc.com/ and goto "OR FOR A SHORT TIME ONLY, GET A FREE REPORT". as you can see that brings up an email form which the CSA victim fills in and emails to me, and at end of the line he gets a report back from me. I did about 1,000 of these over last 4 years but recently [since Vista] I only get emails from Firefox etc whereas 95% USED to come from IE when I checked I found that this form "defaults" in Vista to the email thing inside MS Office, and if I say NO WAY I WILL PAY FOR THAT AGAIN [seeing I bought Office in 1990 for $1,000] and say send it via Windows Mail [or whatever it is now called] ALL the data is lost. So obviously I need to revise the code that used to work Could someone please explain the most painless way to do this? edit in fact seems we have a new windows now on top of vista/XP so are there even MORE new problems with this "upgrade"? I redesigned my site, and changed all my page names. Everything I put up is brand new, and nothing links to the old stuff. But when I do a sitemap, it's some how including the old pages, which makes me believe that somewhere, something is linking to one of the old pages, and it's spidering all the old pages. Is there a site or something that I can find what is linking to the old pages? Hi, I am new in web designing. I need your guidance. I want to break a word if it is longer than table width. May be I am not good at Engilsh. So I'll explain it using example. Following is my code. Code: <html> <body> <table align="justify" width="100" border"3"> <tr> <td> TE-sdf-sdf-hkjd </td> </tr> </table> </body> </html> As here you can see the word "TE-sdf-sdf-hkjd" length is more than 100px. So the width of table becomes more than 100px. I want to break the word and fix the width of table to 100px. How can I achieve that? Waiting for your reply. So everytime I add a picture or text my website page gets "longer". I then move the text or picture with the "div" tag so I can position it where I like. But the webpage is still the same length as it was before I moved the object. So How can I stop the page from getting longer everytime I add text or picture to it? Thanks ....I had enough! My footer is all over the place! Why can't it just move down when the text becomes longer! I am just using <div>. My header, the nav bar and the right side bar are fixed and I want the footer to just fit in underneath. Anybody got some code which solves that problem? Chris PHP Code: <?php echo "<div class='mainarea'>"; include ("includes/header.inc"); include ("includes/navigation.inc"); if ($var == 'service' or $var == 'consultancy') { echo "<div class='textarea_services'><p><br /></p>"; include ("text.php"); echo "</div>"; } else { echo "<div class='textarea'><p><br /></p>"; include ("text.php"); echo "</div>"; } if ($var != 'service' and $var != 'consultancy'){include ("includes/rightside.inc");} if ($var != 'privacy'){include ("includes/footer.inc");} echo "</div>"; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> this line seems to be at war with firefox. for some unknown reason my banner has a space between the lower body (it shouldn't). It is fine in IE and fine if the above line is not included. It seems to be adding some sort of padding into the table cells where the images are, somehow because of the domument type. ---------- Anyone have any solutions? LINK: http://uniden.zzl.org/ Again it is FINE in IE, but not if FF. HTML is Valid according to W3c Validator. Thanks in advance I have a doctype problem on my site which I cannot get rid of... Im using utf-8 have tried the below: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> !DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> --> !DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Many things are happening and I have read a lot of docs handling this... What do you suggest that I do? (Hmmm, - I need dansih characters... ) (In mysql working on the site I cannot see the correct characters... A workaround are being used...) Regards, Frank When I add a doctype it completely ruins my whole page layout. How can i fix this? Without: it fits my whole page and looks nice. With doctype: it squishes everything to the top. Help please. How improtant is the doctype tag? I am trying to teach myself html and am trying to figure out when to use what doctype. DOCTYPE basically tell the web browser what to expect when interpreting the html doc b/c html has been revised over the years, is that correct? Can someone please help me understand how to properly use the doctype tag and what is smart choice/ example of a specific doctype tag is and the reasoning behind why 'this' doctype tag is a smarter choice than an alternate doctype tag? Thank you! -Matt H. im using the following doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> however when you add a table in I.E. it is creating a space between the top of the table and where it is inserted... why is this? any ideas how to solve this? thanks J. What is a doctype, ive seen it in almost every html file someones , i never use it and when i remove it it doesnt do anything. so whats the point of it? to me it just looks like its taking up space. I didn't see an XML/XSL forum so I'm posting this here, maybe someone can help me. I'm trying something new, and it's giving me a headache. But hey it's all part of the process. Here's my site: HTML Code: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="/layout/frontpage.xsl"?> <page lang="en_ca"> <frontpage/> </page> HTML Code: <?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"/>
<xsl:variable name="lang" select="/page/@lang"/>
<xsl:variable name="strs" select="document(concat('/strings/',$lang,'/strings.xml'))"/>
<xsl:template match="page">
<html>
<head>
<title><xsl:value-of select="$strs/strs/str[@id='title']"/></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/css/css-default.css" />
</head>
<body>
<h1>Test</h1>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Seems to work fine, but when I try to validate I get the following warning: No DOCTYPE found! Checking XML syntax only. It's clearly there. That's how other sites have done it and they validate... so what am I doing wrong? Do I have an incorrect doctype set for my new layout? www.bkriegtech.net I have a huge amount of errors when I run the w3c validator... I'm trying to re-do and validate all my 100+ websites; this one is the most recent: http:// www.sticksite.com/cook/indexNEW.html and after "Tidy" cleaned it up I now have the very top looking like this which I know is not right: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> --> <html> <head> <meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org"> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <title>Fast, nutritious meals</title> My pages are nothing fancy, I just want them to work. "Transitional" is fine; I'm not worried yet about "Strict." I'm validating at http://validator.w3.org/ Can one of you super HTML specialists please tell me how the top of my pages SHOULD look? Many thanks in advance! I am totally confused about DOCTYPE code. My site does not have any doctype code on it and works fine, however been playing about with some jquery script and it wanted a doctype on my site to work. I have tried all the different doctypes listed on the w3 site and all make my site look strange and text/images all over the place the only way the site looks ok is without doctype. please advise the site in question is http://virtualhunterston.eu.org example test page with doctype added http://www.virtualhunterston.eu.org/...0-%20Copy1.htm |
|||||||