CODEWITHSUNDEEP
htmlcssinternet-explorerlayoutopera
Mr. Smith
Mr. Smith

Reputation: 5558

Opera and IE does not attribute css text-decoration correctly

Using Opera 11 and IE 9, it seems that these two browsers do not attribute the CSS text-decoration style correctly. This works 100% in Chrome, FireFox and Safari. Does anyone have a suggestion on how to fix this?

The Wrong Effect:

alt text

The Right Effect:

alt text

Here's the CSS:

#main_title {
    font-size: 18px;
    color: #000;
    font-weight: bold;
}

#main_title a {
    color: #000;
}

#main_title_accent {
    border: 1px solid #000;
    background: #ff9935;
    text-decoration: none;
    font-size: 20px;
    padding: 5px;
}

And this is the HTML:

<div id="main_title">
    <a href="home">Text <span id="main_title_accent">Goes</span> Here</a>
</div>

Upvotes: 0

Views: 1289

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196236

You need to give display:inline-block to the #main_title_accent.

Read more at w3c: 16.3.1 - text-decoration property

Relevant quote

Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

Live example: http://jsfiddle.net/qp32H/1/

Upvotes: 6

Related Questions