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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Cross-Browser Functionality Troubles

    Hello!

    I found and edited a small piece of code that seems to only work in Google Chrome. My problem is that I'm using a free website builder, and it allows for a "custom HTML" field, so I can't have multiple style sheets. Everything needs to be internal. Again, this works exactly how I need it to in Chrome.

    Is anyone willing to help me edit the code or revamp it completely? I will admit that I'm a self-taught noob and anything beyond html/css is foreign to me.

    Code:
    <html>
    
    <head>
    <style id="jsbin-css">
    summary {outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); font: bold 1em Arial, Helvetica, sans-serif; padding: 8px 0; position: relative; width: relative; }
    summary::-webkit-details-marker {display: none}
    summary:after{background: #888888;  border-color: blue; border-radius: 5px; content: "+"; color: #ffffff; float: left; font-size: 1.5em; font-weight: bold; margin: -5px 10px 0 0; padding: 0; text-align: center; width: 25px;}
    details[open] summary:after {background: #000000; content: "-";}
    </style>
    </head>
    
    <body>
        <details>
        	<summary> 
    		Title Here
        	</summary>
        	<p>
    		Information Here
        	</p>
        </details>
    </body>
    
    </html>

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    <style id="jsbin-css">? Giving the style block an id? <details>, <summary>? As far as I know, those are non-existing tags. Maybe Chrome supports them, that would explain why it only works in Chrome.

    I would suggest to start with the beginner's course at W3 Schools and to start coding manually. Or build a site with
    Wordpress, although most topics here are about problems with that...
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #3
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Frankie View Post
    <style id="jsbin-css">? Giving the style block an id? <details>, <summary>? As far as I know, those are non-existing tags.
    The code does not work, even in Chrome, if the style ID is removed. As far as <details> and <summary>, they are common HTML5 elements used for making expandable lists.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,618
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by corbinsigle View Post
    The code does not work, even in Chrome, if the style ID is removed. As far as <details> and <summary>, they are common HTML5 elements used for making expandable lists.
    HTML 5 is still at the stage where browsers are implementing different parts of what has been suggested so that people can try them out to work out what works and what doesn't. Only once all the suggestions that don't work have been stripped out and an agreement is reached that what is left is actually useful and will work will HTML 5 become a standard and only then will all the browsers look at implementing all of it instead of just the sections that they decide to test.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    New Coder
    Join Date
    Feb 2013
    Posts
    37
    Thanks
    1
    Thanked 4 Times in 4 Posts
    I tested the code in Google Chrome, so far the code works correctly and drops down when the button is pressed.

    Do note you should include the <!DOCTYPE HTML> right above the <html> tag as the doctype standard for HTML5.

    What information/elements would you like included in this code?


  •  

    Posting Permissions

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