homepage Welcome to WebmasterWorld Guest from 54.234.228.64
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
DOCTYPE Declaration and Aligning Elements
JanaP10




msg:4321462
 8:51 am on Jun 3, 2011 (gmt 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 &#149; Street, City, State, Zip &#149; Telephone:
#*$!-#*$!-#*$!X<br>
email address link</div>
</td>
</tr>
<tr>
<td>
<div class="footer2"><br>
&copy; 2011. All rights reserved.</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

 

Samizdata




msg:4321729
 8:46 pm on Jun 3, 2011 (gmt 0)

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.

...

JanaP10




msg:4321799
 12:04 am on Jun 4, 2011 (gmt 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.

Samizdata




msg:4321820
 1:47 am on Jun 4, 2011 (gmt 0)

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.

...

g1smd




msg:4321879
 7:56 am on Jun 4, 2011 (gmt 0)

Make sure that your links to images BEGIN with a leading slash,
src="/folder/name.png" and NOT src="folder/name.png".

Likewise for stylesheet and javascript files. Avoid the
src="../folder/name.png" syntax too.
SuzyUK




msg:4322107
 12:11 am on Jun 5, 2011 (gmt 0)

g1smd.. care to tell why that would make a difference? (considering the question title)

g1smd




msg:4322110
 12:21 am on Jun 5, 2011 (gmt 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. :-)

JanaP10




msg:4322250
 5:29 pm on Jun 5, 2011 (gmt 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.

g1smd




msg:4322251
 5:36 pm on Jun 5, 2011 (gmt 0)

XHTML is an evolutionary dead end. I use HTML 4.01 for most things. HTML 5 is slowly gaining traction.

Samizdata




msg:4322322
 11:43 pm on Jun 5, 2011 (gmt 0)

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.

...

JanaP10




msg:4329659
 10:34 pm on Jun 22, 2011 (gmt 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&#8226; Company Address&#8226; Telephone: #*$!-#*$!-#*$!X<br>
<a href="mailto:info@socactivitycenter.com">info@company.com</a> <br>
&copy; 2011 Company. All rights reserved.</td>
</tr>
</table>

</td>
</tr>
</table>

</body>
</html>

g1smd




msg:4329681
 11:21 pm on Jun 22, 2011 (gmt 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.

JanaP10




msg:4329739
 2:02 am on Jun 23, 2011 (gmt 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.

alt131




msg:4329916
 1:33 pm on Jun 23, 2011 (gmt 0)

Please post discussion or comments about the sticky footer issues in Sticky Footer using tables [webmasterworld.com].

JanaP10




msg:4330163
 8:09 pm on Jun 23, 2011 (gmt 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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved