Cross-Browser Functionality Troubles

corbinsigle · 02-25-2013, 07:18 PM

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>

Frankie · 02-25-2013, 07:30 PM

corbinsigle · 02-25-2013, 07:39 PM

Quote:

Originally Posted by Frankie

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.

felgall · 02-25-2013, 08:47 PM

Quote:

Originally Posted by corbinsigle

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.

Obsidian · 02-26-2013, 08:10 PM

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?