Hello i have a basic html file i want to output some information into via ajax, it seems to explode on firefox and render completely different to how chrome and safari render it. Any idea what mite be causing this?
Oh it works on Firefox 4 just now 3.x.
Oh it works on Firefox 4 just now 3.x.
HTML:
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Welcome to Cabbit</title>
<script type="text/javascript" src="/public/javascripts/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/public/javascripts/cabbit.js"></script>
<style type="text/css">
/* @group Basic */
body {
margin: 2em auto;
background-color: #444;
width: 64em;
}
h1 {
}
h2 {
}
h3 {
}
p {
font: 1em/1.2em "Lucida Grande", Lucida, Verdana, sans-serif;
margin: 0;
padding: 0;
color: #555;
}
/* @end group */
/* @group Header */
/* @end group */
/* @group Article */
article h1 {
color: #333;
text-decoration: none;
font: normal bold 1.4em/1em "Lucida Grande", Lucida, Verdana, sans-serif;
text-align: left;
margin-bottom: 0.6em;
text-shadow: 0em 0.1em 0em #fff;
}
article h1 a:link, a:visited, a:active
{
color: #048cee;
text-decoration: none;
}
article h1 a:hover
{
color: #7aa0ad;
text-decoration: none;
}
article {
background: #e9eaee;
padding: 2em 2em 1em 2em;
margin: 1em auto;
box-shadow: 1px 2px 6px rgba(0,0,0, 0.5);
-moz-box-shadow: 1px 2px 6px rgba(0,0,0, 0.5);
-webkit-box-shadow: 1px 2px 6px rgba(0,0,0, 0.5);
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
}
article section {
background: #fafafc;
border: 1px solid #a3a3a3;
resize: none;
padding: 0;
outline: none;
margin-bottom: 1em;
font: normal 15px Monaco, 'Courier New', monospace;
line-height: 20px;
padding: 9px 10px;
color: #2f2f2f;
overflow: hidden;
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
border-radius: 0.2em;
}
article p {
margin: 0;
padding: 0;
}
/* @end group */
/* @group Messages */
ul.messages {
margin: 0;
padding: 0;
}
ul.messages li {
background: #fafafc;
border: 1px solid #a3a3a3;
resize: none;
padding: 0;
outline: none;
margin-bottom: 1em;
font: normal 15px Monaco, 'Courier New', monospace;
line-height: 20px;
padding: 9px 10px;
color: #2f2f2f;
overflow: hidden;
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
border-radius: 0.2em;
}
ul.messages li.success {
background: #cffdc5 url(/public/images/cabbit_assets/icons/check.svg) no-repeat 1em;
background-size: 2em;
text-shadow: #000000 0 0 0;
text-indent: 4em;
padding: 0.6em;
}
ul.messages li.notice {
background: #fbe1ae url(/public/images/cabbit_assets/icons/info.svg) no-repeat 1.5em;
background-size: 1em;
text-shadow: #000000 0 0 0;
text-indent: 4em;
padding: 0.6em;
}
ul.messages li.error {
background: #ffbcb7 url(/public/images/cabbit_assets/icons/x.svg) no-repeat 1em;
background-size: 2em;
text-shadow: #000000 0 0 0;
text-indent: 4em;
padding: 0.6em;
}
ul.messages li span.right {
float: right;
width: 20em;
}
/* @end group */
</style>
<script type="text/javascript">
$(document).ready(function()
{
$('#basic').load('phpversion.php').fadeIn("slow");
$('#basic').load('/cabbit/application').fadeIn("slow");
});
</script>
</head>
<body>
<article>
<header>
<h1>Cabbit Framework 1.0 beta 1</h1>
</header>
<section>
<p>Welcome to Cabbit Framework 1.0 beta 1. Here is some useful infromation about your
application and configuration settings.</p>
<p>We have also included a getting started guide for you to follow once all tests have
been passed.</p>
</section>
</article>
<article>
<header>
<h1>Basic Settings</h1>
</header>
<ul id="basic" class="messages">
</ul>
</article>
<article>
<header>
<h1>Database Config</h1>
</header>
<ul id="database" class="messages">
</ul>
</article>
<article>
<header>
<h1>Application Config</h1>
</header>
<ul id="application" class="messages">
</ul>
</article>
<article>
<header>
<h1>Getting Started</h1>
</header>
<section>
</section>
</article>
</body>
</html>