CSS - How to get star aligned properly on this page


Tags: html,css,vertical-alignment

Problem :

I am having difficulty with IE 9 and Opera Browsers only for the alignment of a star.

I am using the following HTML:

<div class="fullwidth">
    <div class="floatleft star">&#9733;</div>
    <h3 class="icontxt">Co-Hosts</h3>
</div>

The Following CSS:

.floatleft
{
    float: left;
}

.fullwidth
{
    width: 100%;
}

h3
{
    margin: 0;
    text-align: left;
    font-family: "GearedSlab-Regular", "Geared Slab Regular", "geared_slabregular";
    text-transform: uppercase;
    color: #212D3B;
    letter-spacing: .1em;
    font-size: 1.5em;
    line-height: 1.7em;
}

h3.icontxt
{
    padding-left: 1.5em;
}

.star
{
    font-size: 1.4em !important;
    color: #A92A23;
}

Ok, so Chrome, Firefox, and Safari render it like so (the way I need it in all browsers to be):

This looks exactly the way I need it to look

However, if you look at this in IE 9, and/or Opera, it looks like this:

The Star is too high

The Star is too high, it needs to be in line with the text: "CO-HOSTS"

Am I doing something wrong here? How can this be done for IE, Chrome, Opera, Safari, and Firefox universally? This is just so frustrating!



Solution :

How about this:

.floatleft
{
    float: left;
}

.fullwidth
{
    width: 100%;
}

h3
{
    margin: 0;
    text-align: left;
    font-family: "GearedSlab-Regular", "Geared Slab Regular", "geared_slabregular";
    text-transform: uppercase;
    color: #212D3B;
    letter-spacing: .1em;
    font-size: 1.5em;
    line-height: 1.7em;
}

h3.icontxt
{
    padding-left: 1.5em;
}

.star
{
    line-height: 1.7em;
    font-size: 1.4em !important;
    color: #A92A23;
}

    CSS Howto..

    How to write a fallback for css files not loaded, loading too long and blocked? [duplicate]

    how to overwrite button's non-hover state colour to grey, but when hover button show the colour (with css framework)

    How would I set this up? [closed]

    CSS: How to create a background cutout using elements (not images)?

    What is a CSS Parse error and how do I fix it?

    Increasing font size for links on hover changes background color size, how to stop this?

    How to set div using Z-index and fix css

    How to navigate divs in a custom built single page app? [closed]

    How do I make template colors update when I choose them from a list or radio buttons? [closed]

    How to set select box height in jquery moblie?

    How to get the CSS style from Inspect Element

    How to clear the (CSS) visited history of an Android WebView?

    How to add to css class in a single html tag? [duplicate]

    How can I show hidden element when it has focus?

    How to align a table menu to an Banner

    How to make CSS menu to open menu in in up direction rather than default down direction

    How to get background image from internal css using xpath?

    How to Change main menu color?

    Android App with HTML/CSS/jQuery. [How] Can it be done?

    How would I have a larger center bottom navbar button in jQuery Mobile default navbar?

    How to fit a list of images in an HTML div to form a 2D grid?

    How to remove jquery mobile button color or override button css?

    How to add a style to