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..

    background image also header image cc trick how to do it? [closed]

    How can write a CSS style for a parent class?

    How to detect if content have more then one line in Angular?

    CSS How to make a DIV that starts 100px from the top reach the bottom of the page

    css - why my text box is not showing up?

    CSS: Hover in one DIV, how to display information from another DIV?

    How to create an opacity fade()? ( improvement over jQuery)

    How to evenly distribute menu items with CSS when width and quantity is not known?

    How to override CSS? [closed]

    How to make a table scrollable with fixed header?

    How did overflow actually work here?

    How can I make the menu to wrap when I resize my browser?

    How do i center an HTML DIV with logo on the left?

    JS/JQuery: How to switch class several times in a loop way?

    How to prevent default title behavior with CSS or JavaScript [duplicate]

    How to make mobile menu transition “backwards”?

    How to make CSS compatible with all browsers?

    How To Style background-image CSS

    How can I centre an unordered list of floated items to the page

    How can I change a table td width using CSS in Spiceworks?

    HTML CSS - How to put button at the center of my page

    How do I prevent fadeIn/Out blinking with expanding/collapsing header?

    Normalize.css how to use it?

    How can I create a color with values for green, blue, orange, and gold only?

    How Do I make this JQuery window have a minimum size?

    How to order a css file?

    How to render a template containing CSS with }} sequence inside using Twig

    CSS - How to overlap elements over everything but each other? (No margin/padding etc)

    How to remove border in radial gradient so that it can mix well?

    How to place Facebook send dialog box above other content?