Copy link to clipboard
Copied
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:
Thanks for your help.
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 class="corporate_logo">
<img src="http://offers.premierinc.com/rs/381-NBB-525/images/16389_pinc-logo-white.svg" alt="">
</div>
Then obviously rename the css selectors:
<style>
.corporate_logo {
padding: 15px 40px;
background-color: #003B49;
}
.corporate_
Copy link to clipboard
Copied
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:
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
Copy link to clipboard
Copied
Thanks osgood. It seems to just be centering now.
instead of this:
This is explorer:
Copy link to clipboard
Copied
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">
Copy link to clipboard
Copied
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!
Copy link to clipboard
Copied
Try Nancys suggestion. If I remember correctly this was an extremely poorly coded template.
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
Try this. Move the 'logo' <div> to above the 'row hero' <div>, as below:::
<div class="logo">
<img src="http://offers.premierinc.com/rs/381-NBB-525/images/16389_pinc-logo-white.svg" alt="">
</div>
<div class="row hero">
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;
}
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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 class="corporate_logo">
<img src="http://offers.premierinc.com/rs/381-NBB-525/images/16389_pinc-logo-white.svg" alt="">
</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>
Copy link to clipboard
Copied
Thank you! Seems to have fixed it. Good stuff:)
Thanks again osgood.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Hi Nancy,
This is what explorer was doing.