CODEWITHSUNDEEP
css
JsCoder
JsCoder

Reputation: 1733

Inline CSS produces different result then an equivalent CSS class

PLEASE remove - it was a typo:)

The following CSS

display: table; height: 100%;

works fine in inline mode and doesn't work being extracted into a CSS class. How do I get it fixed?

HTML with inline CSS (working version), to reproduce the problem search for first occurrence of "display: table; height: 100%;" then create a class .blah { display: table; height: 100%; } and try using it instead of inline CSS.

<html>
<head>
    <title></title>
</head>
<body>
    <div style="margin: 100px; width: 100px; height: 430px; background-color: gray; border: 1px solid gray;">
        <table style='background-color: white; width: 100%; height: 100%; border-collapse: collapse; vertical-align: top;'>
            <tr>
                <td style='height: 33.33%;'>
                    <div style="position: relative; width: 100%; height: 100%;">
                        <div style="position: absolute; top: -50%; height: 100%; background-color: green;">
                            <div style="display: table; height: 100%;">
                                <div style="display: table-cell; vertical-align: middle;">
                                    <div style="border: 1px solid #ccc; width: 30px; height: 30px; background-color: yellow;">A</div>
                                </div>
                            </div>
                        </div>
                        <div style="position: absolute; bottom: -50%; height: 100%;">
                            <div style="display: table; height: 100%;">
                                <div style="display: table-cell; vertical-align: middle;">
                                    <div style="border: 1px solid #ccc; width: 30px; height: 30px; background-color: yellow;">B</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="height: 33.33%;">
                    <div style="position: relative; width: 100%; height: 100%;">
                        <div style="position: absolute; bottom: -50%; height: 100%;">
                            <div style="display: table; height: 100%;">
                                <div style="display: table-cell; vertical-align: middle;">
                                    <div style="border: 1px solid #ccc; width: 30px; height: 30px; background-color: yellow;">C</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
             <tr>
                <td style="height: 33.33%;">
                  <div style="position: relative; width: 100%; height: 100%;">
                        <div style="position: absolute; bottom: -50%; height: 100%; display: table-cell; vertical-align: middle;">
                            <div style="display: table; height: 100%;">
                                <div style="display: table-cell; vertical-align: middle;">
                                    <div style="border: 1px solid #ccc; width: 30px; height: 30px; background-color: yellow;">D</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>

</body>
</html>

Upvotes: 0

Views: 146

Answers (1)

DannyB
DannyB

Reputation: 14776

The problem may be related to another style in your CSS overriding the styles defined in the class. Inline styling has a higher priority.

In this JSFiddle, things are working in both inline and class cases.

CSS

.test {
    display: table; 
    height: 100%;
    background:#ccc;
}

HTML:

<div style="height:100px">
    <div class="test">
        Hi
    </div>
    <div style="display: table; height: 100%; background:#ccc;">
        World
    </div>
</div>

EDIT: And although I know you are probably not seeking coding advice other then an answer to your question, I think you should try and reduce the inline styling if possible. Especially since each and every line in your HTML has inline styling. At least some of the attributes can be moved to a class, make your code nicer, and easier to avoid simple CSS priority issues like this.

Upvotes: 3

Related Questions