CODEWITHSUNDEEP
htmlcssfirebugcss-positioncenter-align
Gokul Gopala Krishnan
Gokul Gopala Krishnan

Reputation: 323

Firebug fixing same css?

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?

Upvotes: 0

Views: 77

Answers (2)

jstackk
jstackk

Reputation: 11

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

Upvotes: 1

Praveen
Praveen

Reputation: 56539

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

Upvotes: 1

Related Questions