Need help? Check out our Support site, then


my Vigilance css and ie6,7

  1. I did some css editing on my blog (theme:Vigilance) to make the header look smaller and thinner, and I'm not sure
    what I've done exactly but it looks like whatever I did worked, at least with chrome and firefox and the newer versions of IE and Safari.
    the header looks wrong on IE7 image 1 , and a lot of things looks wrong in IE6 image 2 , I'm fed up with it and I have no idea how to fix it, I hope I can do something to make it work at least with IE7,

    If you have any idea about this please help!

    The blog I need help with is spocrep.com.

  2. How is it supposed to look like? screenshot would help.

  3. Try this:

    Remove this selector:

    #content {
    margin-top:-80px;
    }

    In the "#sidebar" selector, remove this property:

    margin-top:-80px;

    Replace these selectors:

    #header {
    height:70px;
    background-image:url('http://spocrep.files.wordpress.com/2009/09/20-09-1430-04-54-26-d9856.png');
    background-repeat:repeat-x;
    }
    
    #nav {
    float:right;
    font-size:20px;
    height:33px;
    position:relative;
    top:-74px;
    font-family:Tahoma, "Times New Roman",Arial, Serif ,Sans-serif,Monospace;
    display:block;
    }
    
    h1#title a,h1#title a:hover,div#title a,div#title a:hover {
    height:70px;
    top:-74px;
    position:relative;
    padding:20px 0 0;
    }

    with these:

    #header {
    border: none;
    height:160px;
    background: #fff url(http://spocrep.files.wordpress.com/2009/09/20-09-1430-04-54-26-d9856.png) 0 0 no-repeat;
    padding: 0;
    overflow: hidden;
    clear: both;
    }
    
    #nav {
    float:right;
    font-size:20px;
    height:33px;
    margin: 25px 0 0;
    font-family:Tahoma, "Times New Roman",Arial, Serif ,Sans-serif,Monospace;
    display:block;
    }
    
    #title {
    border-bottom: 5px solid #000;
    height: 90px;
    width: 100%;
    }
    
    #title a {margin: 0;}

    That's it.

  4. Wow! thank you so much that was very good, I don't believe it!

    there's one little thing, it looks better in ie7 except for the header: http://spocrep.files.wordpress.com/2010/06/ie-7.png
    and in Ie6: http://spocrep.files.wordpress.com/2010/06/ie6.png
    how can I fix that? :)

  5. That is weird... it looks right on my test blog... try this, though:

    In your "#header" selector change this:

    background: #fff url(http://spocrep.files.wordpress.com/2009/09/20-09-1430-04-54-26-d9856.png) 0 0 no-repeat;

    to this:

    background:#fff url('http://spocrep.files.wordpress.com/2009/09/20-09-1430-04-54-26-d9856.png') top right no-repeat;

    lemme know.

  6. it did fix it, except now the navbar Dosen't Show Up in ie7 and ie6: http://spocrep.files.wordpress.com/2010/06/no-nav2.png

  7. I so hate IE....

    I need to replicate your settings so that I can test this fully. It shouldn't be the cause but maybe because your language is Arabic, the encoding type might be messing things up.

    Let me fire up my virtual machine where I have IE 7 and I will let you know further info.

  8. how do you change your settings so that the text goes from right to left?

  9. OK, try this

    From your "#nav" selector, remove this property:

    float: right;

    And right below that selector, add this:

    #header > #nav {
    float: right;
    }
  10. Ok, do whatever you would like i'm ready to try anything
    and I just wanna say you really have been a big help, I appreciate everything you did, thank you so much :)

  11. PS. Yes, it seems the language settings have a lot to do with this behavior.

  12. yeh that didn't change anything, maybe Vigilance doesn't work with Arabic in that way?!

  13. if we made the navbar <div style="display: inline; height: auto; position: absolute; visibility: hidden; width: auto; ">centered </div>centered would that solve it?

  14. I mean: if we make the navbar centered would that solve it?

  15. That's weird.... IE 7 displayed it well...

    Yes, I like your approach and maybe position:absolute would be a better solution.

    Since you cannot change the source, the code you posted won't work, however, give this a try:

    Add this to the #header selector:

    position: relative;

    and replace the #nav selector with this:

    #nav {
    position: absolute;
    height: 33px;
    right: 0;
    bottom: 5px;
    }
    `

  16. still the same :(

  17. Are you previewing or saving? sometimes, and this is a quirk, you have to actually save your changes to see them; previewing is just not enough.

  18. I know I save it, but I test it not only on the browser I'm using (chrome) but also using this software called IE tester.

  19. I'm really stumped... I haven't been this stumped in a long time.

    Let me have something to eat and I'll see what else I can do.

  20. ok I'm really sorry, take your time...

  21. it's so strange that when I preview it in IE7 on my test blog, the menu displays just right....

  22. you know it could be (IE tester) I'm using, it's not accurate maybe!

  23. No, there's soemthing else going on that I think I need to go like by line to debug this. When I load your blog, the menus are not visible.

    Would you tell me if you have any special options set for your theme? I need to replicate as much as possible the look of your blog to give you a better solution.

  24. I've looked your CSS in more detail and it needs code clean up. If you don't mind waiting, I can start to tackle this tomorrow. I'll do the best I can to fix this.

  25. damn it, I'm exhausted....

    this should read: "I've looked through your CSS..."

  26. my theme options are all about the colors and the alert box, maybe just the language from general settings (ar - العربية), and the css changes I did

  27. yes, sure tomorrow would be great I have work to do after a few hours, thank you so much

  28. Don't mention it.

    I managed to replicate the menu problem in IE7, I'll keep at it for a while tonight. If I get to fix it tonight, I won't wait till tomorrow to post something.

  29. OK, remove ONLY this from your CSS

    '
    #header > #nav {float: right;}
    `

    That fixed the menu in IE7. Since we're absolute positioning it, the menu should be visible now. If this still doesn't work. I'll continue tomorrow when I'm more fresh.

Topic Closed

This topic has been closed to new replies.

About this Topic