Welcome to WebmasterWorld Guest from 34.228.115.216
Forum Moderators: not2easy
Message Too Old, No Replies
DOCTYPE Declaration and Aligning Elements
New User
joined:Apr 10, 2010
posts: 17
votes: 0
I apologize if I'm not posting to the forum correctly.
1. When I try to add a DOCTYPE declaration to my code, it causes problems in FF (Welcome heading moves to the right and image holder disappears) as well as in IE8 (Welcome heading moves to the right). I would like to use the Transitional Doctype.
2. Is there a way to make the footer always be at the bottom of the page but in a higher position so one does not have to use the scroll bar to view it. In IE8, there is some color background beneath the footer that I would like not to show.
3. I would like my HTML code (and CSS) to validate without errors in W3C. I'm sure that both need some modifications and clean up.
A lot of my code has been copied/pasted and although the web page content displays the way I want, I don't always understand why. I am quite an amateur to writing code so I appreciate the help of those with more expertise than me. Here is my code:
<head>
<title>AG</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {background-image: url(..//WebSite/Gradient-BG.jpg); background-position: center; background-repeat:repeat-y; repeat-x}
body {height:100%; margin: 0; padding: 20; text-align: center;}
body {font-size:100%; line-height:1.125em}
h1 {background-color:inherit; margin-left:8px; margin-top:16px; margin-bottom:8px; font-family:"Trebuchet MS", Arial, sans-serif; font-size:1.55em; color:rgb(153,0,51)}
p {background-color:inherit; margin-left:8px; margin-top:12px; margin-right: 8px; text-align:justify; font-family:Tahoma, Arial, sans-serif; font-size:1.0em; color:#000000}
#wrapper {background-color: rgb(255,222,239); margin: 0 auto; text-align: center; vertical-align: middle; width: 52%;}
ul {margin: 0; padding: 0; list-style: none; width:150px}
ul li {position: relative; width:148px;border:1px solid rgb(153,0,51);font:100% "MS Trebuchet", Arial, sans-serif;}
ul li a {display:block;text-decoration:none; color:rgb(153,0,51); background:rgb(255,222,239); line-height:2em; height:2.5em; padding:0 5px}
li li a {background:rgb(153,0,51)}
/* set dropdown to default */
li:hover li a, li.over li a {color:rgb(153,0,51); background-color:rgb(255,222,239);}
/* this sets all hovered lists to rgb(153,0,51) */
li a:hover,
li:hover a, li.over a,
li:hover li a:hover, li.over li a:hover {color:#000000; background-color:rgb(153,0,51);}
td.mainContentBox {border-style:solid; border-width:1px; border-color:rgb(153,0,51)}
table.footerBox {border-style:solid; border-width:0px; border-color:rgb(153,0,51)}
div.footer1 {font-family:Tahoma, Arial, sans-serif; font-size:0.675em; text-align:center}
div.footer2 {font-family:Tahoma, Arial, sans-serif; font-size:0.65em; text-align:center}
</style>
</head>
<body>
<table id="wrapper" border="0" bordercolor="#990033">
<tr>
<td valign="top" height="898"> <br>
<table width="96%" border="0" align="center">
<tr>
<td valign="top"><img src="WebSite/untitled-1.jpg" width="440" height="88">
<td>
<div align="right"><img src="WebSite/untitled-2.jpg" width="294" height="88"></div>
</td>
</tr>
</table>
<br>
<table width="96%" border="0" align="center">
<tr>
<td><img src="WebSite/Image-DividerLine.jpg" width="100%" height="1"></td>
</tr>
</table>
<br>
<table width="96%" align="center">
<tr>
<td class="navigationBox" width="19%" valign="top">
<div id="menu" align="left" 363px; top: 185px>
<ul class="clearfix">
<li><a href="#">Home</a> </li>
<li><a href="#">After School</a> </li>
<li><a href="#">Contact</a> </li>
<li><a href="#">Gallery</a> </li>
<li><a href="#">Girl Scouts</a> </li>
<li><a href="#">Parties</a> </li>
<li><a href="#">Programs</a> </li>
<li><a href="#">Registration</a> </li>
<li><a href="#">Summer</a> </li>
<li><a href="#">Testimonials</a> </li>
</ul>
</div>
</td>
<td class="emptyBox" width="4%"><img src="WebSite/spacer.gif" width="1" height="1"></td>
<td class="mainContentBox" width="77%" valign="top">
<h1>Welcome</h1>
<table width="320" align="right" cellspacing="5">
<tr>
<td align="center" valign="top">
<div class="mainContentPix"><img src="WebSite/untitled-3.jpg" width="300" height="117" alt="" border="2"></div>
</td>
</tr>
</table>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit.</p>
</td>
</tr>
</table>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<table width="96%" border="0" align="center">
<tr>
<td><img src="WebSite/Image-DividerLine.jpg" width="100%" height="1"></td>
</tr>
</table>
<table class="footerBox" width="96%" align="center">
<tr>
<td>
<div class="footer1">Business Name • Street, City, State, Zip • Telephone:
#*$!-#*$!-#*$!X<br>
email address link</div>
</td>
</tr>
<tr>
<td>
<div class="footer2"><br>
© 2011. All rights reserved.</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Senior Member
joined:Aug 29, 2006
posts:1378
votes: 18
When I try to add a DOCTYPE declaration to my code, it causes problems
No, it is when you omit the DOCTYPE that the problems are caused.
Without the DOCTYPE browsers will render your markup in "quirks mode".
A common procedure is to use an HTML 4.01 DOCTYPE and test your pages in a compliant browser (Firefox, Opera, Safari) then tweak if necessary for Internet Explorer.
Until you have done that your problems are likely to persist.
Hope this helps.
...
New User
joined:Apr 10, 2010
posts: 17
votes: 0
I added the following DOCTYPE
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
and the web page problems disappear (tested in FF and IE8); however if I remove the <!-- at the very beginning, the problems reappear so that's confusing. I have validated with and without the <!-- but W3C gives errors and warnings.
With the <!-- the validator has 2 errors/3 warnings. One is specifically related to DOCTYPE:
Warning DOCTYPE Override in effect!
The detected DOCTYPE Declaration "<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">" has been suppressed and the DOCTYPE for "HTML 4.01 Transitional" inserted instead, but even if no errors are shown below the document will not be Valid until you update it to reflect this new DOCTYPE.
Without the <!-- the validator has 15 errors/4 warnings. Those related to DOCTYPE as follows:
Error Line 12, Column 3: "DOCTYPE" declaration not allowed in instance
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.o…
Line 13, Column 13: there is no attribute "XMLNS"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
Line 13, Column 57: document type does not allow element "HTML" here
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
OTHER
Line 14, Column 6: document type does not allow element "HTML" here
<html>
Too many others to list. I'm totally confused.
Senior Member
joined:Aug 29, 2006
posts:1378
votes: 18
I'm totally confused
Don't panic. This is perfectly normal.
From the start of your markup you should remove this:
<!--
which within HTML tags would be the start of a non-displayed comment.
Also remove both existing DOCTYPE declarations (on lines 1 and 12) and the lines that say
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
Then paste this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
at the very beginning of the document.
The next lines would be:
<html>
<head>
There should be no other references to a DOCTYPE in the document.
The next line would be the text encoding meta tag - you have specified UTF-8 though it is unclear whether you will need it. A more typical tag would be:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Followed by a Language declaration:
<meta http-equiv="Content-Language" content="English">
and a Description meta tag:
<meta name="Description" content="A gramatically correct description of what the document is about, using the most relevant keywords, suitable punctuation, and no special characters.">
Then would come a title:
<title>A Nice Descriptive Title About This Long (Or Thereabouts)</title>
Putting them all together we have:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="English">
<meta name="Description" content="A gramatically correct description of what the document is about, using the most relevant keywords, suitable punctuation, and no special characters.">
<title>A Nice Descriptive Title About This Long (Or Thereabouts)</title>
This would be followed by your CSS styles and a closing HEAD tag before the BODY tag and content. After the content you close the BODY and HTML tags:
</body>
</html>
Assuming that the content and CSS is correctly structured (I haven't checked it) the document should validate. Whether it does or not, I strongly recommend the W3Schools website:
[w3schools.com...]
Good luck.
...
Senior Member
joined:July 3, 2002
posts:18903
votes: 0
Make sure that your links to images BEGIN with a leading slash,
src="/folder/name.png"src="folder/name.png"Likewise for stylesheet and javascript files. Avoid the
src="../folder/name.png"Senior Member
joined:Oct 1, 2002
posts:5199
votes: 0
g1smd.. care to tell why that would make a difference? (considering the question title)
Senior Member
joined:July 3, 2002
posts:18903
votes: 0
It won't make a difference to the CSS, but it's a common error that stops images displaying at all. This happens because the browser wrongly evaluates the file URL based on faulty relative linking. There's often more than one problem apparent when people post code. I'll point those out, not just the one they were asking about. :-)
New User
joined:Apr 10, 2010
posts: 17
votes: 0
Thanks to everyone for help and input. I am working on rewriting content and checking my code and CSS. I would still like help on the following:
Is there a way to make the footer always be at the bottom of the page (in all compatible browsers) but in a higher position so one does not have to use the scroll bar to view it.
One other question. Should I be writing code in HTML or XHTML?
Thanks.
Senior Member
joined:July 3, 2002
posts:18903
votes: 0
XHTML is an evolutionary dead end. I use HTML 4.01 for most things. HTML 5 is slowly gaining traction.
Senior Member
joined:Aug 29, 2006
posts:1378
votes: 18
Is there a way to make the footer always be at the bottom of the page (in all compatible browsers) but in a higher position so one does not have to use the scroll bar to view it?
Use the Search link at the top of this page to look for "sticky footer".
XHTML is indeed a dead end - though not so long ago it was the default in programs like Dreamweaver, and for a brief time was the best option for many mobile devices.
...
New User
joined:Apr 10, 2010
posts: 17
votes: 0
So I rewrote my code with the proper DOC type and both the HTML and CSS validate. However, I need help with a design issue that I've been struggling with for days. I like the way the pink wrapper section stretches all the way to the bottom but somehow I have all this extra space above the header (icons and logo) and below the footer. My content is short (on all my pages) so I would also like the footer to appear at the bottom. I've tried including various "sticky footer" solutions (ones without scripts or hacks only) but I can't get anything to work with my layout. Maybe it's because I'm using tables? I am open to "dumping" the tables and using only CSS but I just don't know how to do this. If there is any of my code that can be revised because it's incorrect or deleted because it's redundant, please help. I have only tested this in FF, Opera, Chrome, and IE8. If this needs to be revised to work in IE 6 and 7, please provide me with code and exactly where to place. Although this design works in IE8, it doesn't look exactly the same as in FF and other browsers but I don't know what to change. I so appreciate the professional web designers out there who know how to write code and understand how to implement it! Thanks. My code is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
a:link {color:rgb(153,0,51);}
a:visited {color:rgb(153,0,51);}
a:hover {color:rgb(153,0,51);}
a:active {color:rgb(153,0,51);}
html, body, .wrapper {
height: 100%;
margin: 0;
padding: 0;
border: none;
}
body {
margin: 0;
padding: 0;
border: 0;
background-color: rgb(255,255,255);
background-image: url(background.jpg);
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;
font-size: 100%;
line-height: 1.125em;
}
h1 {
margin-top: 12px;
margin-bottom: 8px;
margin-left: 0px;
text-align: left;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 1.55em;
color: rgb(153,0,51);
}
p {
margin-top: 12px;
margin-right: 8px;
margin-left: 0px;
text-align: justify;
font-family: Tahoma, Arial, sans-serif;
font-size: 1.0em;
color: rgb(0,0,0);
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 154px;
border-bottom: 0px solid rgb(153,0,51);
}
li {
margin: 0px;
padding: 0px;
width: 152px;
border-right: 1px solid rgb(153,0,51);
line-height: 2em;
height: 2.5em;
font-family: "MS Trebuchet", Arial, sans-serif;
font-size: 100%;
}
li a {
display: block;
text-decoration: none;
background: rgb(255,222,239);
color: rgb(153,0,51);
width: 142px;
padding: 0 5px;
}
li a:hover {
background: rgb(153,0,51);
color: rgb(255,255,255);
}
.wrapper {background-color: rgb(255,222,239); margin: 20px auto; padding: 0px 30px; width: 52%; border: 1px solid rgb(153,0,51); text-align: center;}
.header {padding-top: 5px;}
.footer {font-family: Tahoma, Arial, sans-serif; font-size: 0.675em; text-align: center}
td.icons {padding-top: 15px;}
td.logo {padding-top: 15px;}
</style>
</head>
<body>
<table class="wrapper">
<tr>
<td>
<table class="header" width="96%" align="center">
<tr>
<td class="icons" align="left"><img src="image1.gif" width="88" height="88" alt="icon"> <img src="image2.gif" width="88" height="88" alt="icon"> <img src="image3.gif" width="88" height="88" alt="icon"> <img src="image4.gif" width="88" height="88" alt="icon"> <img src="image5.gif" width="88" height="88" alt="icon"></td>
<td class="logo" align="right"><img src="image.gif" width="294" height="88" alt="logo"></td>
</tr>
</table>
<br>
<table class="line" width="96%" align="center">
<tr>
<td><img src="line.jpg" width="100%" height="1" alt=""></td>
</tr>
</table>
<table class="middle" width="96%" align="center">
<tr>
<td class="navigation" width="16%" align="left">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="afterschool.htm">Menu2</a></li>
<li><a href="contact.htm">Menu3</a></li>
<li><a href="gallery.htm">Menu4</a></li>
<li><a href="girlscouts.htm">Menu5</a></li>
<li><a href="parties.htm">Menu6</a></li>
<li><a href="programs.htm">Menu7</a></li>
<li><a href="registration.htm">Menu8</a></li>
<li><a href="summer.htm">Menu9</a></li>
<li><a href="testimonials.htm">Menu10</a></li>
</ul>
</td>
<td class="empty" width="4%"><img src="spacer.gif" width="1" height="1" alt=""></td>
<td class="content" width="73%" valign="top">
<h1>Welcome</h1>
<table width="320" align="right" cellspacing="10">
<tr>
<td align="center" valign="top">
<img src="image.jpg" width="300" height="117" alt="characters" border="2">
</td>
</tr>
</table>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.</p>
</td>
</tr>
</table>
<table class="line" width="96%" align="center">
<tr>
<td><img src="line.jpg" width="100%" height="1" alt=""></td>
</tr>
</table>
<br>
<table class="footer" width="96%" align="center">
<tr>
<td align="center">Company Name• Company Address• Telephone: #*$!-#*$!-#*$!X<br>
<a href="mailto:info@socactivitycenter.com">info@company.com</a> <br>
© 2011 Company. All rights reserved.</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Senior Member
joined:July 3, 2002
posts:18903
votes: 0
You ignored my comment about how you should link to your image files. You'll see why it's important in the not too distant future (i.e. as soon as you want a second page on your site).
You should also ensure you link to "/" and not to "index.html" for the link to the root home page.
New User
joined:Apr 10, 2010
posts: 17
votes: 0
All my web pages (home page-index.htm) and nine other linked pages plus all images for all ten pages are in one directory folder with no sub folders. From what research I did, I didn't think I needed to place the / in front of everything if all items are in one root directory.
Can you provide any help with my original post about the design problem and footer question? Thanks.
Senior Member
joined:Aug 9, 2008
posts: 961
votes: 0
Please post discussion or comments about the sticky footer issues in Sticky Footer using tables [webmasterworld.com].
New User
joined:Apr 10, 2010
posts: 17
votes: 0
System: The following message was cut out of thread at: http://www.webmasterworld.com/css/4329925.htm [webmasterworld.com] by alt131 - 9:36 pm on Jun 24, 2011 (utc +12)
Now I’m trying to tweak the code to accomplish the following:
In the header the five icon images need to be flush left and the logo needs to be flush right so the entire header is flush left and right respectively with everything below. The icons and logo are not one combined item and need to be separated with space between them. The line underneath the header has to be the exact same length as the header as well as everything below. The navigation bar has to be flush left and line up with the left side of the header and the content section's right side, which includes the “characters” image, has to be flush right and line up with the right side of the header. I thought it would be an easy fix and tried adding padding left and right to the header or to the icons and logo but I just can’t seem to get the correct result. I did add a break after the header to add some separation from everything below but that’s all.
[edited by: alt131 at 9:42 am (utc) on Jun 24, 2011]
[edit reason] Thread Tidy [/edit]
Join The Conversation
- Register For Free! - Become a Pro Member!
- See forum categories - Enter the Forum
Moderators and Top Contributors
- Moderator List | Top Contributors:This Week, This Month, Jan, Dec, Archive, Top 100 All Time, Top Voted Members
Hot Threads This Week
- Google Updates and SERP Changes - February 2019
- February 2019 AdSense Earnings & Observations
- Google's Gary Illyes Talks About RankBrain
- Facebook, WhatsApp and Instagram Data Unification Stopped in Germany
- Google Alphabet Q4 Revenues up 22pct to $39.3 billion
- Chrome Extension Password Checkup from Google
- Google Updates and SERP Changes - January 2019
- E.U.'s Articles 11 and 13 Copyright Directive Survive and Head For E.U. Parliament Approval
- Big site dropped to a half since Aug 2018
- How Do I Sell My Sites?
Featured Threads
- E.U.'s Articles 11 and 13 Copyright Directive Survive and Head For E.U. Parliament Approval
- Google's Gary Illyes Talks About RankBrain
- Google Updates and SERP Changes - February 2019
- Facebook, WhatsApp and Instagram Data Unification Stopped in Germany
- Chrome Extension Password Checkup from Google
- Google Alphabet Q4 Revenues up 22pct to $39.3 billion
- Google Working on Defeating Punycode Domain Exploits
- Apple Shuts Down All of Google's Internal Apps for Abusing Enterprise
- Microsoft Acquires Distributed Postgres Company, Citus
- Google 7-Day Notice For Its Ad Reps to Start Making Changes to Ad Account