Fixed (static) header

Noooooooo!

It looks great in Safari and Firefox. Any ideas on a fix for IE?

So just because I said I was probably making my last post up pop the problems with Internet Explorer.

I did a search and it turns of that IE doesn’t support position: fixed until version 7.

Making a google search of “position: fixed internet explorer” comes up with the answer, so I have found a couple of fixes on the web but am unsure as to which one to go for and where I would put them in my css.

Do you have any idea?

Thanks.

Try this:

<!--[if lt IE 7]><style type="text/css">
  @media screen {
    html, body {
      height: 100%; overflow-y: hidden;
    }
    #Scrollbereich {
      height: 100%; width: 100%; overflow: auto;
    }
    #Inhalt {
      position: static;
    }
  }
</style><![endif]-->

Got it from https://de.selfhtml.org/css/layouts/fixbereiche.htm and it works well for me.

Sorry, sasch9r where abouts do I put this?

In style.css?

And if so where abouts in the file?

just put it into your style.css. Top or bottom doesn’t matter.

Hallo.

I put the code in but almost feel in my bones that it hasn’t worked. When I put the code in the first line “<!–[if lt IE 7]><style type=”text/css”>” was greyed out. That isn’t right is it?

I think I may have got rid of the grey borders on the header though.

I only have the mac version of IE and the two sidebars don’t even appear in that (????) so I can’t actually check to see if the changes have worked.

Could you let me know?

Thanks

You have to put this code into your header.php between the head-tags. Just have a look at the sourcecode of https://de.selfhtml.org/css/layouts/anzeige/fixiert_ie.htm

The gray borders are still there.

When I put the code in header.php it’s all greyed out. So I imagine that it isn’t going to work either.

I’m starting to think that it’s time I waved a white flag!

It’s so typical that IE is still probably the most widely used browser and position:fixed doesn’t work until version 7.

The site will eventually be a portfolio site for myself and my business partner so it has to look right.

I’m sooooooo frustrated by this.

And those bloody grey borders that appear on the header!!

Hhhhhmmmmm. I need a break from this.

Do you do coding for a job?

Nope, I’m a pupil ^^ I learned everything by myself. Just coding for fun.

A small tip for you. Stop editing your page until it’s IE compatible. People should stop using IE, it’s the unsafest browser.

I totally agree people should stop using IE. It’s just unfortunate that there are still people that will keep using it.

I want to avoid the situation where I say to someone that they can take a look at the site to see my work, they go there using IE and the site has glitches.

‘First impressions last’ and all that.

I think what I’m going to do is go through style.css once more and try to find out what is causing the grey on the header. Try to fix that and then decide if it is worth paying someone to fix the IE problem.

When you look at the site in IE all the content is there but it all scrolls (this is correct isn’t it?).

Maybe it just has to stay that way until those using IE catch up and use IE7.

I have to get rid of the grey on the header though, that probably looks too bad.

Thanks once again for you help.

Yep, everything scrolls down and there are these 2 gray blocks

https://img-up.net/img/lolAOL3UZR.jpg

Thanks for the image. The grey blocks look pretty bad. It almost looks as though the header isn’t centered properly from that image.

Back to the css.

Ok so at least I’m learning things through this process.

The reason for the grey blocks is because IE doesn’t support png images with a transparency either.

I think what is happening is that the header image isn’t quite centered, not sure why though.

Where the png image is off centre (to the left) is where the grey block is although that doesn’t really explain why there would be one on the right as well (???).

At least it’s half a theory!;)

I was right the header wasn’t centered properly. I had changed the headers width in style.css but not in header.php.

I am now hoping that the grey blocks have gone from the header in IE.

Could you confirm this for me?

Danke.

Now, there’s a big space under the header.

https://img-up.net/img/Clipboard0gW3qrn.jpg