Unable to add header in firefox os

116 Views Asked by At

I am unable to add a header in my app for firefox os the code that i used is :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Hindie</title>
    <script src="/js/action.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/base.js"></script>
    <script type="text/javascript" src="/js/webapp.js"></script>
    <script type="text/javascript" src="/js/offline.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="/css/headers.css">
    <link rel="stylesheet" type="text/css" href="/css/buttons.css">
    <link rel="stylesheet" type="text/css" href="/css/toolbars.css">
</head>
<body >
  <section role="region">
      <header>
        <button><span class="icon icon-close">close</span></button>
        <menu type="toolbar"><button>done</button></menu>
        <h1>Title</h1>
    </header>
    </section>
    <div id="main">

I ran the same in simulator but am only getting an small orange rectangle on top left corner of my app

2

There are 2 best solutions below

1
On

please retire "/"

<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/headers.css">
<link rel="stylesheet" type="text/css" href="css/buttons.css">
<link rel="stylesheet" type="text/css" href="css/toolbars.css">
0
On

I didn't find any problem: you may not have put the right CSS file online as there is no orange in it. I added

header {
    background-color: #FFA500;
}

to your CSS file, and I'm seeing a large orange rectangle (with some margins) in the browser as in the Firefox OS simulator. If you don't want the margin, add

body {
    margin: 0px;
}