Firebug fixing same css?

Question

CSS:

.list-a .desc-fix {
    width: 180px;
    margin: 0px auto;
    position: relative;
}
.list-a .desc {
    background: url("../images/trans_black.png") repeat;
    display: block;
    font-family: arial;
    font-size: small;
    height: 18px;
    margin: 3px 0 0 50px;
    overflow: hidden;
    padding: 10px;
    position: absolute;
    width: 180px;
    z-index: 3;
    right:30px;
    left:30px
}

HTML:

<span class="desc-fix">
    <span class="desc">
        <h4>Text A</h4>
        <h5>Text B</h5>
    Long text long text long text Long text long text long text Long text long text long text Long text long text long text Long text long text long textLong text long text long text Long text long text long text
    </span>
</span>

Above is my code to align absolute positioned span to align in middle.

But when I load the page it was not aligned in middle.

When I change(not really a change i think) any of the css to anything and changing it back to original value through Firebug it got aligned middle. Any idea, what's going on?

where is your css code? – Falguni Panchal Jun 24 '13 at 12:42 — Falguni Panchal, Jun 24 '13 at 12:42
where is `list-a` in your html code – Aravind30790 Jun 24 '13 at 12:52 — Aravind30790, Jun 24 '13 at 12:52
@falguni I can see my css code at the top of the question – Gokul Gopala Krishnan Jun 24 '13 at 12:55 — Gokul Gopala Krishnan, Jun 24 '13 at 12:55
@Aravind30790 it is the parent of the desc-fix span – Gokul Gopala Krishnan Jun 24 '13 at 12:56 — Gokul Gopala Krishnan, Jun 24 '13 at 12:56

score 1 · Answer 1 · edited May 23 '17 at 12:27

1

You should always link your css classes to their direct parent, eg:

.list-a span .desc-fix {)
.list-a span .desc {)

or simply just

span .desc-fix {}
span .desc {}

Does it work in any other browsers?

EDIT: Give this a whirl https://stackoverflow.com/a/7720742/2516336

edited May 23 '17 at 12:27

Community

1
1

answered Jun 24 '13 at 13:28

jstackk

11
2

score 1 · Accepted Answer · answered Jun 24 '13 at 13:32

Can you try the below code, wrapping those span within a class. Check this JSFiddle

.list-a .desc-fix {
    width: 100%;
    height: 100%;
}
.list-a .desc {
    background: url("../images/trans_black.png") repeat;
    display: block;
    font-family: arial;
    font-size: small;
    margin: 3px 0 0 50px;
    padding: 10px;
    max-width:300px;
    max-heigtht: 400px;
    width: 100%;
    height: 100%;
}
.list-a {
    width:300px;
    height:400px;
    margin: 0px auto;
}

Firebug fixing same css?

2 Answers2