IE7 problem

[ikthius]

I am updating my martial arts site, as it needs a different look and freshened up…..

My CSS for IE8, FF, Opera, Chrome, Safari works fine, but the CSS for IE7 does not.

I have 2 working pages so far.

http://www.woskf.co.uk/new/index.php
http://www.woskf.co.uk/new/syllabus.php

the header is in the wrapper, the header holds the nav.
the header sites fine in syllabus but not in index. basically I have a 30px shift
I could make the header come back 30px on index but then syllabus will be out.

I can’t seem to see this one today.

any ideas?

if anyone says don’t code for IE7, I will come round your house and shoot you in the face with an x-ray gun until you cry for your mum.

[TheDoc]

"ikthius" wrote:

if anyone says don’t code for IE7, I will come round your house and shoot you in the face with an x-ray gun until you cry for your mum.

Don’t code for IE7? HA! People should still be coding for IE6. Lazy sods.

I’ll have a look at the code after the morning rush has died down here.

[ikthius]

that x ray gun is getting charged as I type…….

IE6 can wait till I got the main modern browser finished.

[TheDoc]

I think this is causing the problem somehow:

Code:

It’s the only thing different between the pages.

[ikthius]

I added that script to the syllabus page with no effect.

my css is split as in IE7 has its own, only a couple of differences. however, I have noticed that the header will not sit in the centre, here is my CSS for the header:

Code:

#header
{
position:fixed;
display:block;
top:0px;
width:960px;
height:80px;
margin: 0 auto 0 auto; /* to get everything centre */
text-align:center; /* to get IE centre */
/*margin-left:-30px; /*IE 7 Only makes index page sit perfect*/
background-color:#5b5b5b;
z-index:100;
}

[screencat]

First of all I would try to put the #banner inside the #content div. Then you will also need to change its "top"-property to auto (or remove it) and change its "margin"-property to something like "0 auto 25px" for a better bottom-spacing.

Other solution (you can leave the div where it is) which I was actually able to test myself with the developer toolbar (I hope you have this) and which works in IE7 (no other browser tested):

Code:

#banner {
width: 956px // full width (960px) minus (2x) 2px border
}

#banner img {
left: 30px; // this will center the images again
}

But I would go for the first solution if I were you.

I think the problem has something to do with the width of the #wrapper-div which gets messed up by IE and to be 100% sure I would need to FULLY inspect your markup and css. Speaking of your markup/css, I think you use many unneeded properties and also at least some unneeded html markup. Doing so always makes things more complicated.

How I found out: Setting "display: none" to suspicious elements in the developer toolbar in IE7. Doing that with the #banner-div removes the problem kinda and you can go on from there. It’s always a good idea to (temporarily) remove chunks of html/css to test/find bugs which break the "frame" of a site so you can target the div/elements.

[Author]

Posts