The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS IE7 problem

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #26245

    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.

    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.

    "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.


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

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


    I think this is causing the problem somehow:


    It’s the only thing different between the pages.


    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:

    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*/

    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):

    #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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.