Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Mar 2011
    Posts
    214
    Thanks
    10
    Thanked 1 Time in 1 Post

    Image gallery messes up layout of page

    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.

  • #2
    Regular Coder
    Join Date
    Mar 2011
    Posts
    214
    Thanks
    10
    Thanked 1 Time in 1 Post
    Soo Ive been looking on my own too but havent really been able to figure out what Ive done wrong here. Any one know?

  • #3
    Regular Coder
    Join Date
    Jun 2012
    Location
    Near Chicago, USA
    Posts
    123
    Thanks
    7
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by lmorales View Post
    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

  • #4
    Regular Coder
    Join Date
    Mar 2011
    Posts
    214
    Thanks
    10
    Thanked 1 Time in 1 Post
    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?

  • #5
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    945
    Thanks
    0
    Thanked 129 Times in 128 Posts
    Quote Originally Posted by lmorales View Post
    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
    Code:
    <style>
    .noscript {display:none;}
    </style>
    where it should be
    Code:
    <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
    Code:
    ...
    <head>
    HERE
    <body>
    ...
    or
    Code:
    <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:
    Code:
    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.
    Code:
    <noscript>Content that should be hidden if javascript is enabled, and shown if javascript is disabled</noscript>

  • #6
    Regular Coder
    Join Date
    Mar 2011
    Posts
    214
    Thanks
    10
    Thanked 1 Time in 1 Post
    I get it, so that plugin shoulda never used that javascript portion? But whats making my layout go beserk? I dont get it.

  • #7
    Regular Coder
    Join Date
    Jun 2012
    Location
    Near Chicago, USA
    Posts
    123
    Thanks
    7
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by lmorales View Post
    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:

    Code:
    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/t...d-webfont.woff
    Source File: http://www.trendstudiosorlando.com/t...ets/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
    Last edited by Will Bontrager; 06-05-2012 at 12:36 PM. Reason: Fix code block delimiting tags

  • #8
    Regular Coder
    Join Date
    Mar 2011
    Posts
    214
    Thanks
    10
    Thanked 1 Time in 1 Post
    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?

  • #9
    Regular Coder
    Join Date
    Jun 2012
    Location
    Near Chicago, USA
    Posts
    123
    Thanks
    7
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by lmorales View Post
    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

  • #10
    Regular Coder
    Join Date
    Mar 2011
    Posts
    214
    Thanks
    10
    Thanked 1 Time in 1 Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •