Header logo issue in Explorer

Report · Nov 10, 2017

Hi all,

Attached is a screenshot of what I'm seeing when running a browser check. It is dropping out of the header bar in Explorer. This is the code used fir the header bar/logo as well as a live link.

DIV:

</div>

LOGO CSS:

.hero .logo{text-align:center;padding:25px;padding-bottom:50px;background-color: #003b49}.hero .logo img{max-width:250px;float:left;padding-left:30px;margin-top:-10px}

LIVE LINK:

dc advocacy - premier inc.

Thanks for your help.

Report · Nov 10, 2017

kineticcreative123 wrote
Hi all,
Attached is a screenshot of what I'm seeing when running a browser check. It is dropping out of the header bar in Explorer. This is the code used fir the header bar/logo as well as a live link.
DIV:
<div class="logo">
<img src="http://offers.premierinc.com/rs/381-NBB-525/images/16389_pinc-logo-white.svg" alt="" />
</div>
LOGO CSS:
.hero .logo{text-align:center;padding:25px;padding-bottom:50px;background-color: #003b49}.hero .logo img{max-width:250px;float:left;padding-left:30px;margin-top:-10px}
LIVE LINK:
dc advocacy - premier inc.
Thanks for your help.

I would say you don't need to use:

float: left;

as there seems no logical reason to do so, being as though the logo is in a <div> on its own.

If you want to keep float: left; then you would need to add:

overflow: hidden;

to the 'logo' css

Report · Nov 10, 2017

Thanks osgood. It seems to just be centering now.

instead of this:

This is explorer:

Report · Nov 10, 2017

That's not what I'm seeing.

Are you using IE in Compatibility Mode which is almost like viewing web pages in legacy IE7?

Turn it off. And add the following meta tag to your <head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 12, 2017

Hi Nancy,

Thanks for your input. I tried your suggestion and am getting the same results. It seems the only Windows 10 IE 11 is working. Windows 7 and 8 don't. I'm wondering if this could be fixed by replacing the div with a table cell?

Thanks!

Report · Nov 10, 2017

Try Nancys suggestion. If I remember correctly this was an extremely poorly coded template.

Report · Nov 12, 2017

Hi osgood. Yes this template was a mess when I got it. Like I mentioned to Nancy, do you think a table cell instead of a div will satisfy IE?

Report · Nov 12, 2017

Try this. Move the 'logo' <div> to above the 'row hero' <div>, as below:::

</div>

Then add the below css selectors to the page or in one of the linked stylesheets but I would first add it to the page along with the other css style you have on the page, which is this - .mktoGen.mktoImg {display:inline-block; line-height:0;}

.logo {

padding: 15px 40px;

background-color: #003B49;

}

.logo img {

width: 270px;

}

.blue {

background-color: transparent;

}

Report · Nov 13, 2017

Hi osgood,

I pasted the css code in the header and moved the div above "row hero" and I'm seeing the same. Since the css for the logo is on the page it overrides an external style right?

I had to create a new link.

This is the page with the revised code.

capital analytics trial

Report · Nov 13, 2017

I think you may be seeing a cached version of the page in the browser.

Try naming the logo <div> to something else like 'corporate_logo' (see below) as there may be some css still associated with the logo selector in your stylesheet causing the issue.

</div>

Then obviously rename the css selectors:

<style>

.corporate_logo {
padding: 15px 40px;
background-color: #003B49;
}
.corporate_logo img {
width: 270px;
}
.blue {
background-color: transparent;
}

</style>

Report · Nov 13, 2017

Thank you! Seems to have fixed it. Good stuff:)

Thanks again osgood.

Report · Nov 10, 2017

I don't see your screenshot. I don't understand what is meant by dropping out of the header bar.

This is what I'm seeing in MS Edge and IE 11 at 100% Zoom.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 10, 2017

Hi Nancy,

This is what explorer was doing.

Adobe Community

Header logo issue in Explorer

1 Correct answer