How to get header to display is IE8?

Hey guys,

My header is not showing up in IE8, not sure about other IE versions, thinking of just making a IF IE statement.

Can anyone help me as to what will make it work?

http://tinyurl.com/p2le55u

HI,

IE8 doesn’t like the max-width on the image in some circumstances which is why I avoid setting that max-width rule on images globally.

The image will re-appear if you do this:

.brand img{width:100%;max-width:none}
1 Like

Hi Paul

what is the best way to debug?

added your style but Im using a mac

You’re looking for ways to test in IE?

  • Get a virtual machine of Windows
  • Find a Windows computer to test on, or phone a friend/colleague
  • Use BrowserStack or similar tool online

I’m notoriously bad for doing things like this or a dozen others and then having IE8 problems when I get to browser testing :frowning: I keep telling my employer(s) that we should abandon old IE support but for some reason those percentages still matter :wink:

Laziness, apparently, is not an option!

Had a look at browser stack, still runs a little slow

VM may be the go

I tested the style I gave you in IE8 and it is working.

If you are on a mac then you will need to run a virtual machine as mentioned above (or just get an old second hand windows machine for testing - its probably cheaper than buying parallels software for the mac :smile: )

It’s a pain to test from screenshots and most of the online testing is very slow as you found out. Luckily I have a Mac, a PC and a Windows laptop which all helps when testing.

I don’t think it will be too long now before we can drop IE8 support as usage for IE8 and under is below 5% now I believe.

I don’t think it will be too long now before we can drop IE8 support as usage for IE8 and under is below 5% now I believe.

Can’t happen too soon? :smiley:

I’ve lucked in to the same boat. I’ve got a windows PC, a linux box, and a mac laptop. I’ve also got an old junk android phone sitting in my desk (no service, but serves as a wifi browser tester) and an iPhone in current use. Nice mess of devices. They may not play nicely together but I can test some!

I’m a little hesitant to drop IE8 support since IE8 is the last IE on Windows…a lot of people handmedown computers and if XP is on it…there is no upgrading from that. I’ll probably always take a peek in it and make sure it’s usable.

I tested the style I gave you in IE8 and it is working.

Thank you much appreciated!

While I got a IE tester,

Can you please see if the hr.side style in IE in all the way to the left, seems ok in Chrome and FF

Not quite all the way.

I’d make it 100% width (you have it 97% width) and if yo udon’t want it hugging the edge, then add in the rule below

main#content{padding-right:20px;}

That is overall a more sound and structurally safe way of doing things.

That seems to be a lot better, only fault I can see now is the content overlaps the left menu and sidebar bg

should prob hide on mobile size too

what would your suggestion be?

Well that’s been occuring for a while. You give approximately 25% width for the sidebar and 75% for the content. So at smaller screen sizes, the 25% width makes the sidebar actually smaller width than hwat it needs to contain the content of it properly. So the main content section is sliding over to the left because it has majority of hte width applied to it. So the sidebar needs 220px minimum (to cover the bottom green image) but the browser is only allocating 150px or so (example) so the content is sliding over 70px worth because there’s not enough room. The content inside of the sidebar is just hanging outside of the parent into nomans land. I’d set a min-width on the sidebar of 220px and allocate less room for the content section.

I wish I could see that like you do!

So I prob just need

.sidebar {
    min-width: 220px;
}

Well sure but you’ll probably run into float drop problems at smaller screen sizes. If you do the 25%/75% width allocation like usual, if the 25% is below 220, then the min-width you set will take effect. However that will mean that you will have more than 100% total width. So lets say that the 25% width is actually like 150px but you force 220.
That means you have 100% width + another 70pixels (220-150=70) so it’ll be 70px too wide.

yeah you’re right, got rid of the min-width

seems to be ok now :smile:

gonna call it a night, thank u for your assistance much appreciated

As long as those using IE8 can still use the page it shouldn’t really matter whether or not the page looks the same as it does in modern browsers.

Exactly. And IE8 support isn’t exactly terrible for most stuff…

Yeah… not terrible. Just annoying sometimes.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.