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?

Answer 1

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;
}

Answer 2

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