PDA

View Full Version : Huge content-gap in IE?!



williamoforange
Nov 25th, 2006, 10:37 PM
I'm scripting this site:

http://www.runchargersrun.com/

And, when you view it in IE, the header is screwed up - a gap between the image background and the text foreground of the header.

However, in Firefox, it renders perfectly. Obviously there's a scripting error, but I can't find it. Anybody have any ideas?

For your reference, the Style-sheet is http://www.runchargersrun.com/rcr.css

Thanks in advance.

Will

ess
Nov 26th, 2006, 12:03 AM
well. I am actually surprised that the page is rendering in FF.

Why do you have the following repeated on your page.


<html>
<head>
<title>Run Chargers Run</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="rcr.css" type="text/css">

<html>
<head>
<title>Run Chargers Run</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="rcr.css" type="text/css">
<SCRIPT language="JavaScript">

Remove the repetition. That could well be the cause of the problem.

Also, try and validate your HTML. it helps in tracking problems sometimes. Since you are using Firefox, you should install Web Developer plug-in...which comes with nice and handy tools for html validation and css validation.

Good luck.
ess

williamoforange
Dec 1st, 2006, 03:19 AM
It turns out I had the syntax information on both my PHP file and the main page that it called. I deleted it, however, and the problem remains.

Also, here are the errors that returned when I validated the CSS. How would I fix them (I'm kind of a novice with CSS)?


Errors
URI : http://www.runchargersrun.com/rcr.css

* Line: 37 Context : div#sect_nav

Invalid number : background-image Parse Error - <SCRIPT language="JavaScript"> <!-- get_Image() //--> </SCRIPT>
* Line: 37 Context : div#sect_nav

Invalid number : background-image Parse Error - <SCRIPT language="JavaScript"> <!-- get_Image() //--> </SCRIPT>
* Line: 37 Context : div#sect_nav

Invalid number : background-image Parse Error - <SCRIPT language="JavaScript"> <!-- get_Image() //--> </SCRIPT>

Warnings
URI : http://www.runchargersrun.com/rcr.css

* Line : 6 (Level : 1) You have no color with your background-color : body
* Line : 6 (Level : 1) You have no color with your background-color : body
* Line : 6 (Level : 1) You have no color with your background-color : body
* Line : 21 (Level : 1) You have no background-color with your color : div#header
* Line : 21 (Level : 1) You have no background-color with your color : div#header
* Line : 21 (Level : 1) You have no background-color with your color : div#header
* Line : 30 (Level : 1) You have no background-color with your color : div#sect_nav
* Line : 30 (Level : 1) You have no background-color with your color : div#sect_nav
* Line : 30 (Level : 1) You have no background-color with your color : div#sect_nav
* Line : 48 (Level : 1) You have no color with your background-color : div#main
* Line : 48 (Level : 1) You have no color with your background-color : div#main
* Line : 48 (Level : 1) You have no color with your background-color : div#main
* Line : 68 (Level : 1) You have no background-color with your color : a.orange:link
* Line : 68 (Level : 1) You have no background-color with your color : a.orange:link
* Line : 68 (Level : 1) You have no background-color with your color : a.orange:link
* Line : 71 (Level : 1) You have no background-color with your color : a.orange:visited
* Line : 71 (Level : 1) You have no background-color with your color : a.orange:visited
* Line : 71 (Level : 1) You have no background-color with your color : a.orange:visited
* Line : 74 (Level : 1) You have no background-color with your color : a.orange:hover
* Line : 74 (Level : 1) You have no background-color with your color : a.orange:hover
* Line : 74 (Level : 1) You have no background-color with your color : a.orange:hover
* Line : 77 (Level : 1) You have no background-color with your color : a.orange:active
* Line : 77 (Level : 1) You have no background-color with your color : a.orange:active
* Line : 77 (Level : 1) You have no background-color with your color : a.orange:active



Thanks.

_Aerospace_Eng_
Dec 1st, 2006, 05:37 AM
You can't put javascript directly inside of a CSS file.

williamoforange
Dec 1st, 2006, 12:52 PM
Ahh, that would explain it, yes? :thumbsup:

Now, a new question: How, then, do I have the random header image that I currently have, without using the Javascript in the CSS?

Arbitrator
Dec 1st, 2006, 01:32 PM
Now, a new question: How, then, do I have the random header image that I currently have, without using the Javascript in the CSS?You would continue to modify the CSS via Javascript, but while keeping the CSS and JavaScript separate. Some information on how you would accomplish this can be found here (http://www.quirksmode.org/dom/w3c_css.html).

williamoforange
Dec 3rd, 2006, 03:50 PM
I'm sorry, maybe I'm just a fool...

but what am I looking for on that page? I'm not sure which one of those properties I'm looking for/should be using.

Thanks for the continued help. It's much appreciated. ;)

_Aerospace_Eng_
Dec 3rd, 2006, 07:41 PM
You are looking for the properties that allow you to change styles either inline or through the stylesheet. Don't just skim the document, read the WHOLE thing.

http://www.quirksmode.org/dom/tests/style.html