PDA

View Full Version : Please find the error in my Blog's HTML!



quicktorials
06-30-2013, 07:42 PM
Hello,

My website is at www.quicktorials.com. I cannot figure out what is causing this but there is an arrow that looks just like this: --> in the top left corner of the website. I can't figure out what is causing it and I would really like to get rid of it! Help would be much appreciated!

djr33
06-30-2013, 08:05 PM
1. It's due to an extra "close comment" tag in your HTML (and there appears to be an extra </style> tag too.) Line 530: --></style>
You don't actually need comments like that. Modern browsers don't need CSS and JS hidden from them, so you're just making the code confusing.

2. Your code is incredibly complicated, so it's not surprising you didn't see it. Move the styles to external .css stylesheets, move the Javascript to external .js files, and then (potentially) run it through some kind of cleaner (like HTML Tidy) or just use an editor that will help you see tags that don't have a matching open/close tag. And this would also be clear if you used tabs properly in the code-- it's not required, but it will help you avoid errors like this.

3. The website is visually intense. I wouldn't want to be a visitor. I also personally am annoyed when a website asks me to "like" it on facebook before I've even visited the website! Why would I do that?

jscheuer1
06-30-2013, 08:07 PM
Here in the page's source code:


background-color:#ffab23;
}.classname:active {
position:relative;
top:1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */
</style>
--></style>
<style id='template-skin-1' type='text/css'><!--
body {
min-width: 1150px;
}
.content-outer, .content-fauxco . . .l

there are two closing </style> tags for that block of style directives. There should only be one. The --> (which is meant to close the <!-- at the beginning of that style block) is outside the first one. Get rid of the first one (red), and it (the --> marks) will no longer appear as the first thing in the body.

However, it appears as though the layout depends upon there being something there, because removing that --> makes the top border disappear. You can probably adjust that in the css, but it might be hard to find. A quick fix would be to add a non-breaking space character at the beginning of the body:


. . . le type='text/css'>
.content-inner
{
margin-top: -60px !important;
}
</style><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script></head>
<body class='loading'>
&nbsp;
<div class='navbar section' id='navbar'></div>
<div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
<meta content='Quick . . .

quicktorials
06-30-2013, 08:55 PM
Thank you both so much for your input and solution. I am new to designing my website and am doing my best. Any suggestions help me immensely, really. I do not know how to move Css styles to an external sheet, or JS for that matter. But I am doing my best and will definitely use your advice!

djr33
06-30-2013, 09:09 PM
That's a basic skill in using CSS and JS, so you can easily find information on the web in tutorials, etc. If you search for "using external CSS stylesheets" you'll get lots of information.

In short, you do this:
1. Create a new file called something.css
2. Cut and paste all of the content from between <style> tags (just one set, or all, in sequence, if you want), removing it from the HTML page into the CSS page. Do not copy the <style> tags with it, just the code in between them.
3. Remove the (now empty) <style> tags.
4. In the same location in the HTML file, add in a tag like this: <link rel="stylesheet" type="text/css" href="something.css">

Roughly the same for Javascript with a .js file.


Feel free to ask specific questions as they come up.