problem with div’s in Safari

[lambert]

http://www.joshuatrust.org/form

When I check it in Chrome and Firefox the logo and social icons are as they should be, but in Safari the social icons have disappeared and the menu width is about 3x too tall.

This is the code I placed in the fixed header area:

<div class=”logo”><img class=”alignnone size-full wp-image-37″ src=”http://www.joshuatrust.org/wp-content/uploads/2015/07/The-Joshua-Trust-logo.png&#8221; alt=”The-Joshua-Trust-logo” width=”233″ height=”119″ /></div>

<div class=”social-media”>[social font_size=170%; color=#FFFFFF; ]</div>

<div class=”clear:both;”></div>

[extra_menu menu_name='extra' menu_style='secondary' menu_type='standard' add_class='your-class']

and this is the CSS:

.social-media {

    display: inline-block !important;

    float: right !important;

    font-size: 100%;

    margin-right: 2%;

    margin-top: 11%;

    max-width: 80%;

}

.logo {

    height: auto;

    margin-bottom: 2%;

    margin-left: 2%;

    margin-right: 2%;

    margin-top: 2%;

    max-width: 50%;

    display: inline-flex;

}

.is-desktop #wrapper {margin-top:180px;}      /* If using a fixed top area 50px high*/

Any help would be greatly appreciated

[scrambler]

I think inline-flex is not supported as is in safari, so you probably need to use the -webkit- prefix

http://caniuse.com/#search=inline-flex

[lambert]

Thanks Scrambler, I used the following, and all seems fine now 🙂

<div id=”logo”><img class=”alignnone size-full wp-image-37″ src=”http://www.joshuatrust.org/wp-content/uploads/2015/07/The-Joshua-Trust-logo.png&#8221; alt=”The-Joshua-Trust-logo” width=”233″ height=”119″ /></div>

    <div id=”social-media”>[social font_size=170%; color=#FFFFFF; ]</div>

[extra_menu menu_name='extra' menu_style='secondary' menu_type='standard' add_class='your-class']

and the following CSS

#social-media {

    float: right !important;

    font-size: 100%;

    margin-right: 2%;

    margin-top: 11%;

    max-width: 80%;

}

#logo {

    height: auto;

    margin-bottom: 2%;

    margin-left: 2%;

    margin-right: 2%;

    margin-top: 2%;

    max-width: 50%;

    display: inline-table;

}

.is-desktop #wrapper {margin-top:180px;}      /* If using a fixed top area 50px high*/

[Author]

Posts