Adobe Adobe - 4 months ago 8
CSS Question

How do I make my page respect h1 css addition?

I add

h1 {
margin-top:100px;
}


to the end of the css, but the page doesn't change. But if I add to the html of some h1:

<h1 style="margin-top:100px;"><a class="toc-backref" href="#id4">KHotKeys</a><a class="headerlink" href="#khotkeys" title="Permalink to this headline">ΒΆ</a></h1>


Then it does.

I'm not css pro, and I guess the problem is somewhere in the css file. Here it is:

div.clearer {
clear: both;
}

/* -- relbar ---------------------------------------------------------------- */

div.related {
width: 100%;
font-size: 90%;
}

div.related h3 {
display: none;
}

div.related ul {
margin: 0;
padding: 0 0 0 10px;
list-style: none;
}

div.related li {
display: inline;
}

div.related li.right {
float: right;
margin-right: 5px;
}

/* -- sidebar --------------------------------------------------------------- */

div.sphinxsidebarwrapper {
padding: 10px 5px 0 10px;
}

div.sphinxsidebar {
float: left;
width: 230px;
margin-left: -100%;
font-size: 90%;
}

div.sphinxsidebar ul {
list-style: none;
}

div.sphinxsidebar ul ul,
div.sphinxsidebar ul.want-points {
margin-left: 20px;
list-style: square;
}

div.sphinxsidebar ul ul {
margin-top: 0;
margin-bottom: 0;
}

div.sphinxsidebar form {
margin-top: 10px;
}

div.sphinxsidebar input {
border: 1px solid #98dbcc;
font-family: sans-serif;
font-size: 1em;
}

div.sphinxsidebar input[type="text"] {
width: 160px;
}

div.sphinxsidebar input[type="submit"] {
width: 30px;
}

img {
border: 0;
}

/* -- search page ----------------------------------------------------------- */

ul.search {
margin: 10px 0 0 20px;
padding: 0;
}

ul.search li {
padding: 5px 0 5px 20px;
background-image: url(file.png);
background-repeat: no-repeat;
background-position: 0 7px;
}

ul.search li a {
font-weight: bold;
}

ul.search li div.context {
color: #888;
margin: 2px 0 0 30px;
text-align: left;
}

ul.keywordmatches li.goodmatch a {
font-weight: bold;
}

/* -- index page ------------------------------------------------------------ */

table.contentstable {
width: 90%;
}

table.contentstable p.biglink {
line-height: 150%;
}

a.biglink {
font-size: 1.3em;
}

span.linkdescr {
font-style: italic;
padding-top: 5px;
font-size: 90%;
}

/* -- general index --------------------------------------------------------- */

table.indextable {
width: 100%;
}

table.indextable td {
text-align: left;
vertical-align: top;
}

table.indextable dl, table.indextable dd {
margin-top: 0;
margin-bottom: 0;
}

table.indextable tr.pcap {
height: 10px;
}

table.indextable tr.cap {
margin-top: 10px;
background-color: #f2f2f2;
}

img.toggler {
margin-right: 3px;
margin-top: 3px;
cursor: pointer;
}

div.modindex-jumpbox {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
margin: 1em 0 1em 0;
padding: 0.4em;
}

div.genindex-jumpbox {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
margin: 1em 0 1em 0;
padding: 0.4em;
}

/* -- general body styles --------------------------------------------------- */

a.headerlink {
visibility: hidden;
}

h1:hover > a.headerlink,
h2:hover > a.headerlink,
h3:hover > a.headerlink,
h4:hover > a.headerlink,
h5:hover > a.headerlink,
h6:hover > a.headerlink,
dt:hover > a.headerlink {
visibility: visible;
}

div.body p.caption {
text-align: inherit;
}

div.body td {
text-align: left;
}

.field-list ul {
padding-left: 1em;
}

.first {
margin-top: 0 !important;
}

p.rubric {
margin-top: 30px;
font-weight: bold;
}

img.align-left, .figure.align-left, object.align-left {
clear: left;
float: left;
margin-right: 1em;
}

img.align-right, .figure.align-right, object.align-right {
clear: right;
float: right;
margin-left: 1em;
}

img.align-center, .figure.align-center, object.align-center {
display: block;
margin-left: auto;
margin-right: auto;
}

.align-left {
text-align: left;
}

.align-center {
text-align: center;
}

.align-right {
text-align: right;
}

/* -- sidebars -------------------------------------------------------------- */

div.sidebar {
margin: 0 0 0.5em 1em;
border: 1px solid #ddb;
padding: 7px 7px 0 7px;
background-color: #ffe;
width: 40%;
float: right;
}

p.sidebar-title {
font-weight: bold;
}

/* -- topics ---------------------------------------------------------------- */

div.topic {
border: 1px solid #ccc;
padding: 7px 7px 0 7px;
margin: 10px 0 10px 0;
}

p.topic-title {
font-size: 1.1em;
font-weight: bold;
margin-top: 10px;
}

/* -- admonitions ----------------------------------------------------------- */

div.admonition {
margin-top: 10px;
margin-bottom: 10px;
padding: 7px;
}

div.admonition dt {
font-weight: bold;
}

div.admonition dl {
margin-bottom: 0;
}

p.admonition-title {
margin: 0px 10px 5px 0px;
font-weight: bold;
}

div.body p.centered {
text-align: center;
margin-top: 25px;
}

/* -- tables ---------------------------------------------------------------- */

table.docutils {
border: 0;
border-collapse: collapse;
}

table.docutils td, table.docutils th {
padding: 1px 8px 1px 5px;
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1px solid #aaa;
}

table.field-list td, table.field-list th {
border: 0 !important;
}

table.footnote td, table.footnote th {
border: 0 !important;
}

th {
text-align: left;
padding-right: 5px;
}

table.citation {
border-left: solid 1px gray;
margin-left: 1px;
}

table.citation td {
border-bottom: none;
}

/* -- other body styles ----------------------------------------------------- */

ol.arabic {
list-style: decimal;
}

ol.loweralpha {
list-style: lower-alpha;
}

ol.upperalpha {
list-style: upper-alpha;
}

ol.lowerroman {
list-style: lower-roman;
}

ol.upperroman {
list-style: upper-roman;
}

dl {
margin-bottom: 15px;
}

dd p {
margin-top: 0px;
}

dd ul, dd table {
margin-bottom: 10px;
}

dd {
margin-top: 3px;
margin-bottom: 10px;
margin-left: 30px;
}

dt:target, .highlighted {
background-color: #fbe54e;
}

dl.glossary dt {
font-weight: bold;
font-size: 1.1em;
}

.field-list ul {
margin: 0;
padding-left: 1em;
}

.field-list p {
margin: 0;
}

.refcount {
color: #060;
}

.optional {
font-size: 1.3em;
}

.versionmodified {
font-style: italic;
}

.system-message {
background-color: #fda;
padding: 5px;
border: 3px solid red;
}

.footnote:target {
background-color: #ffa;
}

.line-block {
display: block;
margin-top: 1em;
margin-bottom: 1em;
}

.line-block .line-block {
margin-top: 0;
margin-bottom: 0;
margin-left: 1.5em;
}

.guilabel, .menuselection {
font-family: sans-serif;
}

.accelerator {
text-decoration: underline;
}

.classifier {
font-style: oblique;
}

/* -- code displays --------------------------------------------------------- */

pre {
overflow: auto;
overflow-y: hidden; /* fixes display issues on Chrome browsers */
}

td.linenos pre {
padding: 5px 0px;
border: 0;
background-color: transparent;
color: #aaa;
}

table.highlighttable {
margin-left: 0.5em;
}

table.highlighttable td {
padding: 0 0.5em 0 0.5em;
}

tt.descname {
background-color: transparent;
font-weight: bold;
font-size: 1.2em;
}

tt.descclassname {
background-color: transparent;
}

tt.xref, a tt {
background-color: transparent;
font-weight: bold;
}

h1 tt, h2 tt, h3 tt, h4 tt, h5 tt, h6 tt {
background-color: transparent;
}

.viewcode-link {
float: right;
}

.viewcode-back {
float: right;
font-family: sans-serif;
}

div.viewcode-block:target {
margin: -1px -10px;
padding: 0 10px;
}

/* -- math display ---------------------------------------------------------- */

img.math {
vertical-align: middle;
}

div.body div.math p {
text-align: center;
}

span.eqno {
float: right;
}

/* -- printout stylesheet --------------------------------------------------- */

@media print {
div.document,
div.documentwrapper,
div.bodywrapper {
margin: 0 !important;
width: 100%;
}

div.sphinxsidebar,
div.related,
div.footer,
#top-link {
display: none;
}
}

body {
font-family: sans-serif;
font-size: 100%;
background-color: #11303d;
color: #000;
margin: 0;
padding: 0;
}

div.document {
background-color: #d4e9f7;
}

div.documentwrapper {
float: left;
width: 100%;
}

div.bodywrapper {
margin: 0 0 0 230px;
}

div.body {
background-color: #ffffff;
color: #222222;
padding: 0 20px 30px 20px;
}

div.footer {
color: #ffffff;
width: 100%;
padding: 9px 0 9px 0;
text-align: center;
font-size: 75%;
}

div.footer a {
color: #ffffff;
text-decoration: underline;
}

div.related {
background-color: #191a19;
line-height: 30px;
color: #ffffff;
}

div.related a {
color: #ffffff;
}

div.sphinxsidebar {
top: 30px;
bottom: 60px;
margin: 0;
position: fixed;
overflow: auto;
height: auto;
}

div.sphinxsidebar h3 {
font-family: 'Trebuchet MS', sans-serif;
color: #3a3a3a;
font-size: 1.4em;
font-weight: normal;
margin: 0;
padding: 0;
}

div.sphinxsidebar h3 a {
color: #3a3a3a;
}

div.sphinxsidebar h4 {
font-family: 'Trebuchet MS', sans-serif;
color: #3a3a3a;
font-size: 1.3em;
font-weight: normal;
margin: 5px 0 0 0;
padding: 0;
}

div.sphinxsidebar p {
color: #3a3a3a;
}

div.sphinxsidebar p.topless {
margin: 5px 10px 10px 10px;
}

div.sphinxsidebar ul {
margin: 10px;
padding: 0;
color: #3a3a3a;
}

div.sphinxsidebar ul li {
margin-top: .2em;
}

div.sphinxsidebar a {
color: #3a8942;
}

div.sphinxsidebar input {
border: 1px solid #3a8942;
font-family: sans-serif;
font-size: 1em;
}

/* -- body styles ----------------------------------------------------------- */

a {
color: #355f7c;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

div.body p, div.body dd, div.body li {

text-align: left;
line-height: 130%;
margin-top: 0px;
margin-bottom: 0px;
}

div.body h1,
div.body h2,
div.body h3,
div.body h4,
div.body h5,
div.body h6 {
font-family: 'Trebuchet MS', sans-serif;
background-color: #f2f2f2;
font-weight: normal;
color: #20435c;
border-top: 2px solid #cccccc;
border-bottom: 1px solid #cccccc;
margin: 30px -20px 20px -20px;
padding: 3px 0 3px 10px;
}

div.body h1 { margin-top: 0; font-size: 200%; }
div.body h2 { font-size: 160%; }
div.body h3 { font-size: 140%; padding-left: 20px; }
div.body h4 { font-size: 120%; padding-left: 20px; }
div.body h5 { font-size: 110%; padding-left: 20px; }
div.body h6 { font-size: 100%; padding-left: 20px; }

a.headerlink {
color: #c60f0f;
font-size: 0.8em;
padding: 0 4px 0 4px;
text-decoration: none;
}

a.headerlink:hover {
background-color: #c60f0f;
color: white;
}

div.body p, div.body dd, div.body li {
text-align: left;
line-height: 110%;
}

div.admonition p.admonition-title + p {
display: inline;
}

div.note {
background-color: #eee;
border: 1px solid #ccc;
}

div.seealso {
background-color: #ffc;
border: 1px solid #ff6;
}

div.topic {
background-color: #eee;
}

div.warning {
background-color: #ffe4e4;
border: 1px solid #f66;
}

p.admonition-title {
display: inline;
}

p.admonition-title:after {
content: ":";
}

pre {
padding: 0px;
background-color: #ffffff;
color: #000000;
line-height: 120%;
border: 0px solid #ffffff;
border-left: none;
border-right: none;
white-space: pre-wrap;
/* word-wrap: break-word; */
/* width:100px; */
}

tt {
background-color: #ecf0f3;
padding: 0 1px 0 1px;
font-size: 110%;
}

.warning tt {
background: #efc2c2;
}

.note tt {
background: #d6d6d6;
}

body {
width:150%;
}

j0k j0k
Answer

Using Firebug or the Chrome Debugger, you can see which property overrides which other one. Then you will be able to see where, in your CSS file, the problem is.

For example, on this page, you can see that color and text-decoration are overridden by another style. Etc.:

enter image description here

The problem here is that the all.css has only one line of CSS inside. But you can see that each property can be found at a defined line in your file.

You can also add an !important to force this value to be the last one.

h1 {
    margin-top:100px !important;
}