- This topic is empty.
-
AuthorPosts
-
September 25, 2009 at 12:30 pm #26245
ikthius
MemberI 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.phpthe 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.
September 25, 2009 at 12:32 pm #64703TheDoc
Member"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.
September 25, 2009 at 12:53 pm #64705ikthius
Memberthat x ray gun is getting charged as I type…….
IE6 can wait till I got the main modern browser finished.
September 25, 2009 at 5:15 pm #64710TheDoc
MemberI think this is causing the problem somehow:
Code:
It’s the only thing different between the pages.
September 26, 2009 at 5:36 am #64721ikthius
MemberI 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;
}September 29, 2009 at 11:44 am #64831screencat
MemberFirst 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.