CSS not working correctly while inline

Question

I want to make my CSS inline but certain parts of the CSS seem to stop working. I tried all CSS inliner services I could find and the result is always the same.

What I want: http://codepen.io/anon/pen/qEBbQg

What I get: http://codepen.io/anon/pen/ogNbQO

Block-CSS:

li {
    display: inline;
    padding: 20px;
    font-weight: bold;
}

#navigation{
    width: 100%;
    background: #0f83a0;
    display: inline-block;
    position: fixed;
    text-align: right;
    height: auto;
    font-size: 20px;
    z-index: 999;
}

html, body{
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

}
li a {
    text-decoration: none;
    color: #FFF;
    padding: 8px 8px 8px 8px;
}
#navigation ul li a{
    cursor:pointer;
    background-color: #0f83a0;
    color:white;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

#navigation ul li a:hover{
    background-color: #fff;
    color: #0f83a0;
}
</style>

<div id="navigation">
            <img id="logo" src="logo.png" style="display:inline-block; position:absolute; left:5; top: 0; height: 100%;"/>
            <ul>
                <li>
                    <a href="#1">What is this?</a>
                </li>
                <li>
                    <a href="#2">[Title 2]</a>
                </li>
                <li>
                    <a href="#3">Works everywhere</a>
                </li>
                <li>
                    <a href="#4">Contact</a>
                </li>
            </ul>
        </div>

Inline CSS:

<div id="navigation" style="width:100%;background-color:#0f83a0;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;display:inline-block;position:fixed;text-align:right;height:auto;font-size:20px;z-index:999;" >
            <img id="logo" src="logo.png" style="display:inline-block;position:absolute;left:5;top:0;height:100%;" />
            <ul>
                <li style="display:inline;padding-top:20px;padding-bottom:20px;padding-right:20px;padding-left:20px;font-weight:bold;" >
                    <a href="#1" style="text-decoration:none;padding-top:8px;padding-bottom:8px;padding-right:8px;padding-left:8px;cursor:pointer;background-color:#0f83a0;color:white;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;" >What is this?</a>
                </li>
                <li style="display:inline;padding-top:20px;padding-bottom:20px;padding-right:20px;padding-left:20px;font-weight:bold;" >
                    <a href="#2" style="text-decoration:none;padding-top:8px;padding-bottom:8px;padding-right:8px;padding-left:8px;cursor:pointer;background-color:#0f83a0;color:white;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;" >[Title 2]</a>
                </li>
                <li style="display:inline;padding-top:20px;padding-bottom:20px;padding-right:20px;padding-left:20px;font-weight:bold;" >
                    <a href="#3" style="text-decoration:none;padding-top:8px;padding-bottom:8px;padding-right:8px;padding-left:8px;cursor:pointer;background-color:#0f83a0;color:white;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;" >Works everywhere</a>
                </li>
                <li style="display:inline;padding-top:20px;padding-bottom:20px;padding-right:20px;padding-left:20px;font-weight:bold;" >
                    <a href="#4" style="text-decoration:none;padding-top:8px;padding-bottom:8px;padding-right:8px;padding-left:8px;cursor:pointer;background-color:#0f83a0;color:white;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;" >Contact</a>
                </li>
            </ul>
        </div>

On-hover animations are not working

And why do you want all your CSS in-line? It makes your code much more unmaintainable. — David Thomas
– David Thomas, Commented Nov 13, 2014 at 0:43
I want email clients to render it, I have read that most clients ignore the <style> tags — Slava Knyazev
– Slava Knyazev, Commented Nov 13, 2014 at 0:44

David · Accepted Answer · 2014-11-13 00:51:34Z

1

To begin, inline CSS is a bad idea. Much harder to maintain, and very prone to issues between elements and pages that otherwise would be in one style.

Also, you can't do things like :hover inline. That has to be done via a stylesheet. Furthermore, inline CSS has the highest priority, so even using :hover to overwrite inline CSS styles doesn't work. The only way you can do this is by using a CSS stylesheet, and the !important attribute, as can be seen in the example below.

http://codepen.io/anon/pen/MYWKZQ

EDIT:

Use an iframe for email, and make all your links have target="_blank" so they won't link in the email.

edited Nov 13, 2014 at 0:51

answered Nov 13, 2014 at 0:46

David

4,8815 gold badges37 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jonathan Over a year ago

OP needs it for email.

David Over a year ago

@ViruZX, see my edit. Use an iframe for email and just add target="_blank" on all your links so they'll open in a new window, and not inside of the iframe.

Slava Knyazev Over a year ago

Then Iframe it has to be... :(

JCOC611 Over a year ago

Keep in mind that iframes do not work in all email clients given security vulnerabilities.

Collectives™ on Stack Overflow

CSS not working correctly while inline

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related