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

    Looping through my table, how do I know if the checkbox is checked?

    How does free hosting website work? [closed]

    How can I do html multi elements list with type attribute?

    How to make the page layout stay the same after minimized?

    Sidebar, Navigation and Content how to do it?

    How to make image previews (thumbnails) using html/css

    How to make space between menu items in CSS/HTML

    How can you hide CSS from the iPhone, but not other browsers?

    how to create a image slider with help of only HTML and CSS?

    How to add css to dynamic div Id

    How do I apply a css class to certain elements using jquery?

    How to push elements after absolute element

    How to put image tiles properly without colum gap or row gap in between using only CSS?

    Javascript how to use external Css sheet

    How to loop this css slider animation?

    How to animate CSS with a delay between an unknown number of elements [duplicate]

    How to prevent CSS table row expanding to parent height

    How do I customize the rdoc Darkfish stylesheet?

    Css how to create navigation bar

    How to make a fixed navigation bar stretch to the width of the browser?

    How to declare CSS font-face with font-weight and font-style properly?

    how to move button to left

    How to display text in the middle?

    How do I make link the highlight link conform to CSS shape

    How can I change this CSS for desktop browsers only?

    HTML CSS, how to create a Side bar or column

    How to load CSS on SSL pages?

    How to make image scale as per browser window?

    How to apply Title Case in input box through css

    How to set css properties to dynamically created table?