CSS and table column broken in wordpress

2 Views

I have a table code. The table has 6 columns. I created a new page at wordpress and entered my code inside of text editor then published.

But is displaying CSS broken and columns are broken into below. But I want all columns will be the same line.

Read More

See wordpress broken CSS view:
http://i.stack.imgur.com/tATOQ.png

See my codes below: 

<html>
<head>
<style>
@import url(http://fonts.googleapis.com/css?family=Ubuntu);
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: Ubuntu, arial, verdana;
}
.pricing_table {
float: center;
    line-height: 150%;
    font-size: 12px;
    margin: 0 auto;
    width: 500%;
    max-width: 800px;
    padding-top: 1px;
    margin-top: 20px;
}
.price_block {
    text-align: center;
    width: 100%;
    color: #fff;
    float: left;
    list-style-type: none;
    transition: all 0.25s;
    position: relative;
    box-sizing: border-box;
    margin-bottom: 10px;
    border-bottom: 1px solid transparent;
}

.pricing_table h3 {
    text-transform: uppercase;
color: #fff;
    padding: 5px 0;
    background: #A6DA18;
    margin: -10px 0 1px 0;
}

.price {
    display: table;
    background: #444;
float: center;
    width: 100%;
    height: 70px;
}
.price_figure {
    font-size: 24px;
    text-transform: uppercase;
    vertical-align: middle;
    display: table-cell;
}
.price_number {
    font-weight: bold;
    display: block;
}
.price_tenure {
    font-size: 11px;
}

.features {
    background: #DEF0F4;
    color: #000;
}
.features li {
    padding: 8px 15px;
    border-bottom: 1px solid #ccc;
    font-size: 11px;
    list-style-type: none;
}

.footer {
    padding: 15px;
    background: #DEF0F4;
}
.action_button {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    background: linear-gradient(#666, #333);
    padding: 5px 20px;
    font-size: 11px;
    text-transform: uppercase;
}

.price_block:hover {
    box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5);
    transform: scale(1.04) translateY(-5px);
    z-index: 1;
    border-bottom: 0 none;
}
.price_block:hover .price {
    background:linear-gradient(#DB7224, #F9B84A);
    box-shadow: inset 0 0 45px 1px #DB7224;
}
.price_block:hover h3 {
    background: #222;
}
.price_block:hover .action_button {
    background: linear-gradient(#F9B84A, #DB7224);
}

@media only screen and (min-width : 768px) and (max-width : 768px) {
    .price_block {width: 50%;}
    .price_block:nth-child(odd) {border-right: 1px solid transparent;}
    .price_block:nth-child(3) {clear: both;}
    .price_block:nth-child(odd):hover {border: 0 none;}
}
@media only screen and (min-width : 768px){
    .price_block {width: 25%;}
    .price_block {border-right: 1px solid transparent; border-bottom: 0 none;}
    .price_block:last-child {border-right: 0 none;}
    .price_block:hover {border: 0 none;}
}


</style>
</head>

<body>
<ul class="pricing_table">
<li class="price_block">
        <h3>
Standard</h3>
<div class="price">
            <div class="price_figure">
                <span class="price_number">$19.99</span>
                <span class="price_tenure">Good</span>
            </div>
</div>
<ul class="features">
<li>6,245 Links</li>
<li>Panda & Penguine Friendly</li>
<li>Manual Instructions</li>
<li>Email Support</li>
</ul>
<div class="footer">
            <a class="action_button" href="http://www.blogger.com/blogger.g?blogID=7860351751400882510#">Buy Now</a>

        </div>
</li>
<li class="price_block">
        <h3>
Professional</h3>
<div class="price">
            <div class="price_figure">
                <span class="price_number">$39.99</span>
                <span class="price_tenure">Best Value</span>
            </div>
</div>
<ul class="features">
<li>6,245 Links</li>
<li>Panda & Penguine Friendly</li>
<li>Manual Instructions</li>
<li>Email & Phone Support</li>
</ul>
<div class="footer">
            <a class="action_button" href="http://www.blogger.com/blogger.g?blogID=7860351751400882510#">Buy Now</a>

        </div>
</li>
<li class="price_block">
        <h3>
Professional</h3>
<div class="price">
            <div class="price_figure">
                <span class="price_number">$39.99</span>
                <span class="price_tenure">Best Value</span>
            </div>
</div>
<ul class="features">
<li>6,245 Links</li>
<li>Panda & Penguine Friendly</li>
<li>Manual Instructions</li>
<li>Email & Phone Support</li>
</ul>
<div class="footer">
            <a class="action_button" href="http://www.blogger.com/blogger.g?blogID=7860351751400882510#">Buy Now</a>

        </div>
</li>
<li class="price_block">
        <h3>
Professional</h3>
<div class="price">
            <div class="price_figure">
                <span class="price_number">$39.99</span>
                <span class="price_tenure">Best Value</span>
            </div>
</div>
<ul class="features">
<li>6,245 Links</li>
<li>Panda & Penguine Friendly</li>
<li>Manual Instructions</li>
<li>Email & Phone Support</li>
</ul>
<div class="footer">
            <a class="action_button" href="http://www.blogger.com/blogger.g?blogID=7860351751400882510#">Buy Now</a>

        </div>
</li>
<li class="price_block">
        <h3>
Professional</h3>
<div class="price">
            <div class="price_figure">
                <span class="price_number">$39.99</span>
                <span class="price_tenure">Best Value</span>
            </div>
</div>
<ul class="features">
<li>6,245 Links</li>
<li>Panda & Penguine Friendly</li>
<li>Manual Instructions</li>
<li>Email & Phone Support</li>
</ul>
<div class="footer">
            <a class="action_button" href="http://www.blogger.com/blogger.g?blogID=7860351751400882510#">Buy Now</a>

        </div>
</li>
<li class="price_block">
        <h3>
Business</h3>
<div class="price">
            <div class="price_figure">
                <span class="price_number">$49.99</span>
                <span class="price_tenure">Recommended for Business</span>
            </div>
</div>
<ul class="features">
<li>6,245 Links</li>
<li>Panda & Penguine Friendly</li>
<li>Manual Instructions</li>
<li>Email & Phone Support</li>
</ul>
<div class="footer">
            <a class="action_button" href="http://www.blogger.com/blogger.g?blogID=7860351751400882510#">Buy Now</a>

        </div>
</li>
</ul>

</body>
</html>
Post Views: 2

Related posts

2 comments

  1. After the min-width : 768px media query in your css there is this code:

    .price_block {width: 25%;}

    That makes every block 25% wide, and therefore they align like that (4 on the first row etc). You need to change that so 6 fits on the same row (~16% wide)

    .price_block {width: 16.66%;}

    You can see it working here (if you widen the output window to show columns):

    http://jsfiddle.net/eurz4a2k/

  2. You have to put html and css content in two different file. Your all css classes are overwritten by wordpress classes. Keep it separately and load it.

Comments are closed.