Page Goes On an On Forever, using CSS

tbuck · #1 (**permalink**) Nov 9th, 2007, 18:06

http://www.lincolnsafari.org/registration.html

I used CSS to do this page, but as you can see, the orange background, goes on forever, and ever. I've tried changing the height of the containerr div, but it doesn't fix it. Any help?

karinne · #2 (**permalink**) Nov 9th, 2007, 18:10

Remove

HTML: Select all

<?xml version="1.0" encoding="utf-8"?>

as IE doesn't like it and validate.

You have 375 errors!

It might solve your problem, it might not but at least we'll be working will validated code.

tbuck · #3 (**permalink**) Nov 9th, 2007, 18:23

I removed that line, but it's still not changing the height. Is the doc type right? I never really understood which doc type I should be using.

karinne · #4 (**permalink**) Nov 9th, 2007, 18:26

The doctype is fine ... just get rid of those errors.

tbuck · #5 (**permalink**) Nov 9th, 2007, 19:19

I found a better doc type to use from alistapart.com
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

And now there a far fewer errors. But the page is still going on forever in safari and IE, but not in firefox?

Aso · #6 (**permalink**) Nov 9th, 2007, 19:33

But you still have errors! As karinne said, fix them! It's a lot easier to solve the problem if you can conclude it's not a parsing error

tbuck · #7 (**permalink**) Nov 9th, 2007, 19:36

Line 38, Column 6: end tag for element "HEAD" which is not open.

Line 39, Column 159: document type does not allow element "BODY" here.

i still get these 2 errors, and I don't know how to fix them? The head tag is open, and that is the line that closes it. And then the body tag is right below it. I thought this is fine?

Marc · #8 (**permalink**) Nov 9th, 2007, 20:02

Under your doctype, you need an <html> tag.

tbuck · #9 (**permalink**) Nov 9th, 2007, 20:18

Oh wow, can't believe I missed that. Ok added that in, but still the 2 errors.

dab42pat · #10 (**permalink**) Nov 9th, 2007, 20:42

not sure if i got all your code correctly but try this on your page for validation.

HTML: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link rel="stylesheet" href="http://www.lincolnsafari.org/safari.css" type="text/css" media="screen">
<link rel="stylesheet" href="http://www.lincolnsafari.org/print.css" type="text/css" media="print">
<title>Lincoln Safari: Registration</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body onload="MM_preloadImages('images/SafariDetails_r5_c3_f2.gif','images/SafariDetails_r6_c3_f2.gif','images/SafariDetails_r7_c3_f2.gif')">

tbuck · #11 (**permalink**) Nov 9th, 2007, 20:47

Hey that got rid of the errors, but now onto the Big problem....why is my page so long? arg.

Thanks for helping fix the errors though.

Marc · #12 (**permalink**) Nov 9th, 2007, 20:54

I dont really understand your question... Your page is long because the content is stretching it...

tbuck · #13 (**permalink**) Nov 9th, 2007, 20:59

In Safari, the orange background goes on for a long time. And in IE, if you try to print the form, it tries to print 180 pages.

AdRock · #14 (**permalink**) Nov 9th, 2007, 21:39

What does this mean

Quote:

This Page Is Tentatively Valid HTML 4.01 Transitional

Not properly validated....a temporary fix?

AdRock · #15 (**permalink**) Nov 9th, 2007, 21:44

Quote:

Originally Posted by tbuck

In Safari, the orange background goes on for a long time. And in IE, if you try to print the form, it tries to print 180 pages.

I think you'll find if you look in IE7, it does the same as in Safari

karinne · #16 (**permalink**) Nov 10th, 2007, 00:16

Quote:

Originally Posted by tbuck

I found a better doc type to use from alistapart.com
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

And now there a far fewer errors. But the page is still going on forever in safari and IE, but not in firefox?

That's not a better doctype! Keep the strict doctype

Choosing the best Doctype for your website

Stuart · #17 (**permalink**) Nov 10th, 2007, 03:15

Yup, Karinne is right! Always use HTML 4.01 Strict... It is the best to use.

Say Karinne, what is the HTML 4.01 Strict equivalent to target="_blank"? It does not validate and I do not know of another way to open a new window with a link...

MikeHopley · #18 (**permalink**) Nov 10th, 2007, 10:18

Quote:

Originally Posted by swagner

Say Karinne, what is the HTML 4.01 Strict equivalent to target="_blank"? It does not validate and I do not know of another way to open a new window with a link...

Some items are deprecated because they are bad coding practices. For example, <font> is deprecated in favour of CSS, which is much more efficient. There's nothing wrong with changing font styles, but <font> is an inefficient method.

Other items, such as target="_blank" are deprecated because they are fundamentally bad. It's maddening when a website takes control of the browser; it feels like a violation!

Designers use target="_blank" because they don't want users to leave their website. This is stupid for two reasons:

It's much easier for a user to return to your site by using the "back" button. Opening a new window will likely make it harder to find your site again!
Users will leave if they want to, no matter how hard you try to stop them. You can either let them do it -- a cordial goodbye -- or you can fight them. Fighting them won't stop them leaving, but it will make them hate you.

In cases where you want a little pop-up window, you need to use javascript pop-ups. But why not keep everything on one page? You can use javascript to show/hide elements. Remember that the content should remain accessible when javascript is disabled (so make things visible by default, then hide them with JS).

Beware that pop-up windows are blocked by many browsers.

Marc · #19 (**permalink**) Nov 10th, 2007, 10:18

For this, you would need to use JavaScript... Check below:

javascript:

Code: Select all

function externalLinks() {
 if (!document.getElementsByTagName) return;
 var anchors = document.getElementsByTagName("a");
 for (var i=0; i<anchors.length; i++) {
   var anchor = anchors[i];
   if (anchor.getAttribute("href") &&
       anchor.getAttribute("rel") == "newwindow")
     anchor.target = "_blank";
 }
}
window.onload = externalLinks;

HTML:

HTML: Select all

<a href="blah.html" title="title" rel="newwindow">Foo Foo</a>

EDIT: Read the above post for why not to use this code! Thanks Mike....

MikeHopley · #20 (**permalink**) Nov 10th, 2007, 10:35

Marc, you should note that your code is invalid. All you're doing is hiding the error from the validator. This is the rationale behind your method:

target="_blank" causes a validation error. But I'm a standards advocate. Oh no! I'm a hypocrite!
But the validator only checks the code before it has been changed with javascript. Ah ha...
I can use javascript to insert invalid HTML, but the validator will never see it.
No-one will realise that I'm a hypocrite!

Your method has no advantage whatsoever, except for the ability to fake valid HTML Strict. Your actual code is just as invalid as if you had typed target="_blank" directly into your links. This is much the same as the morons who wax lyrical about the coding rigor of valid XHTML 1.0 Strict, when their actual code (as seen by the browser) is invalid HTML. Smoke and mirrors may hide their hypocrisy from the validator, but not from me!

To demonstrate this, simply validate the generated source code (you can get the generated source using Firefox WebDev). The validator will throw the same error. This is a good idea for any site that uses javascript: test sample pages for validation of the generated source code.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Green bar of colour at bottom of page gets bigger the more page is extended	pixelgirl	Web Page Design	1	Apr 1st, 2008 01:27
internal navigation, Linking from one page to a specific div in another page.	Oak	Web Page Design	5	Feb 8th, 2008 22:54
Linking an outside page back to previous framed page	MJustison	Starting Out	1	Oct 18th, 2007 17:49
forever struggeling	Gabriele	Introduce Yourself	4	Jul 2nd, 2007 05:04
A gap appears beween the Page Title and the Body Content of the page.	sovereign6	Web Page Design	6	Dec 18th, 2006 19:14

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Page Goes On an On Forever, using CSS