...

View Full Version : Image gallery messes up layout of page



lmorales
06-01-2012, 08:24 PM
http://www.trendstudiosorlando.com/test3/gallery.html

Most of my site validates on w3.org with the exception of this page where it has a problem with

Line 79, Column 26: required attribute "type" not specified
document.write('<style>.noscript { display: none; }</style>');

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.


Im not sure what that means. But as you can see ,the gallery, while working, completely messes up my layout and Im not sure why.

lmorales
06-04-2012, 03:08 PM
Soo Ive been looking on my own too but havent really been able to figure out what Ive done wrong here. Any one know?

Will Bontrager
06-04-2012, 05:22 PM
Line 79, Column 26: required attribute "type" not specified
document.write('<style>.noscript { display: none; }</style>');


Looks like the validator is reading the JavaScript as if it is HTML code.

Try something like this:


document.write('<'+'style>.n'+'oscript { display: none; }<'+'/style>');

Alternatively, put the JavaScript within an HTML comment tag.


<script type="text/javascript"><!--
document.write('<style>.noscript { display: none; }</style>');
//--></script>

Will

lmorales
06-04-2012, 06:12 PM
Still doesnt validate, but w/e. I dont think thats the issue, My large concern is why does the gallery just completely screw over my layout?

Lerura
06-04-2012, 07:02 PM
Line 79, Column 26: required attribute "type" not specified
document.write('<style>.noscript { display: none; }</style>');

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.


means that your output is
<style>
.noscript {display:none;}
</style> where it should be

<style type="text/css">
.noscript {display:none;}
</style>

But it will still be an error:
style tags must be in the <head>.

But by running this code the style tag will be added

...
<head>
HERE
<body>
...
or
<body>
HERE
</body>
depending on when and or where the script is ran.

the only way to add it to the head, where it belong by javascript is:

StyleTag=document.createElement('style');
StyleTag.setAttribute('type','text/css');
StyleTag.innerHTML='.noscript {display:none}';
document.getElementsByTagName('head')[0].appendChild(StyleTag);
-----
If you sole purpose is to display/hide the element, based on if javascript is enabled or disabled, then there is a special tag for this.

<noscript>Content that should be hidden if javascript is enabled, and shown if javascript is disabled</noscript>

lmorales
06-04-2012, 07:41 PM
I get it, so that plugin shoulda never used that javascript portion? But whats making my layout go beserk? I dont get it.

Will Bontrager
06-05-2012, 01:36 PM
I get it, so that plugin shoulda never used that javascript portion? But whats making my layout go beserk? I dont get it.

lmorales, I don't see anything obviously messed up. But then, I don't know what it's supposed to look like.

Perhaps, the layout will resolve once the JavaScript errors get resolved. Just guessing.

Here is a list of what Firefox found:


Timestamp: 6/5/12 6:17:28 AM
Error: JotForm is not defined
Source File: http://www.trendstudiosorlando.com/test3/gallery.html
Line: 82


Timestamp: 6/5/12 6:17:27 AM
Error: illegal character
Source File: http://www.trendstudiosorlando.com/test3/gallery.html
Line: 27, Column: 34
Source Code:
if( document.addEventListener )


Timestamp: 6/5/12 6:17:28 AM
Error: $("#accordion").accordion is not a function
Source File: http://www.trendstudiosorlando.com/test3/gallery.html
Line: 15


Timestamp: 6/5/12 6:27:21 AM
Error: downloadable font: download failed (font-family: "BankGothicMdBTMedium" style:normal weight:normal stretch:normal src index:1): status=2147746065
source: http://www.trendstudiosorlando.com/test3/stylesheets/bankgthd-webfont.woff
Source File: http://www.trendstudiosorlando.com/test3/stylesheets/common.css
Line: 0
Source Code:
@font-face { font-family: "BankGothicMdBTMedium"; font-style: normal; font-weight: normal; src: url("bankgthd-webfont.eot?#iefix") format("embedded-opentype"), url("bankgthd-webfont.woff") format("woff"), url("bankgthd-webfont.ttf") format("truetype"), url("bankgthd-webfont.svg#BankGothicMdBTMedium") format("svg"); }

That last one is font-related, not JavaScript. It's included with the list in case the missing font is the reason for the visual design not rendering the way you envision it.

Will

lmorales
06-05-2012, 09:31 PM
What Im seeing when I test it, is my css styles on the font go all screwy in comparison to the other pages I have up, also the rounded top goes down below the start on the container, then the footers shape goes completely screwy. Am I the only one seeing this, is my computer just displaying things wierd?

Will Bontrager
06-06-2012, 01:46 PM
What Im seeing when I test it, is my css styles on the font go all screwy in comparison to the other pages I have up, also the rounded top goes down below the start on the container, then the footers shape goes completely screwy. Am I the only one seeing this, is my computer just displaying things wierd?

lmorales, until the JavaScript and font errors are resolved, pretty much all that can be done is guess. Trying to find things that are wrong while disregarding things that are wrong seems, to me, to be somewhat of an exercise in futility.

Your post mentioned pages you are comparing to. Test one of those pages and see if it has the same JavaScript and font errors. If yes, then perhaps it is not those particular errors causing the specific issues you are looking at on your test page.

The thing is, something is different between your test page and the page you are comparing to. Test each difference to see if the issue on the test page can be duplicated.

That's one way to approach resolution. There are at least two other ways.

1.
Start with a blank file and add elements one at a time, testing after each addition. In this way, you may be able to find the reason for what you see as screwy.

Or, ...

2.
Make a copy of the page you are comparing with and change it, one element at a time, toward looking like the test page you want to see. Test after each addition. This action may reveal the issue.

Another way to find the issue is to post it in a forum and hope someone will find the glitch for you. Maybe that will happen. Some good and generous people do have the time and inclination to pore over code to find other people's mistakes.

I don't have that time, but even if I did, you would be preventing me from helping you.

The thing is, there is more than one point of view. You are looking at a comparison page. You see what's there and you notice the font on your test page is all screwy and you notice the footer goes completely screwy.

Now, the person who wants to help you has to make assumptions. The person doesn't see the comparison page like you do.

So, without something to compare to and without an adequate description of what screwy actually means, the person wanting to help you can make the assumption that the screwy aspect of the font is that it prints in color black when it is really supposed to print in color green.

And that the going completely screwy part of the footer is that it lost some of its letter spacing or perhaps it centered itself when it is really supposed to align left.

If something is screwy, the person wanting to help you will either need to know what you mean by screwy or have access to an un-screwy item to see what the difference is. Otherwise, assumptions are required. Assumptions don't fix pages; they waste time.

Will

lmorales
06-06-2012, 07:16 PM
I didnt make those javascripts, I currently dont know java worth squat, the javascript that error is refering to works perfectly fine as i have tested it on various browsers with no errors, as for the font issue, I understand that is a problem but at current i dont know what its doing. The gallery is something completely seperate from the page I was told to emulate, and i still cant find out why the header and footer changes from what my other pages (that have been tested, validated, and work) look. What I want to know is if the layout messing up ( i.e my form exceeding its boundaries, the header rounded top moving down, and my footers shape changing) I cant tell why.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum